Change select width to fit div container

Question

I have defined a dropdwon as fellow:

    <div class="form-group">
        <select class="form-control">
            <option>small option</option>
            <option>mediummmmmmmmmmmmmmmmmmmm option</option>                
            <option>large eeeeeeeeeeeeeeeeeeeeee eeeeeeeeeeeeeee eeeeeeeeeeeee eeee option</option>
        </select>
    </div>

I want to change select width to be minimum of container width and option text width. If option text is bigger than div container, truncate option's text and put ellipsis at the end. So the option stays inside the container. Also select must be responsive, When resizing window, select width should be updated to fit new window width.

How can I achieve that using bootstrap CSS?

please check the accepeted answer here: https://stackoverflow.com/questions/10672586/how-to-make-select-elements-shrink-to-max-width-percent-style-within-fieldset — ceferrari, Nov 14 '17 at 16:17

score 7 · Answer 1 · edited Jun 12 '18 at 14:49

7

try width:100%;

It works for me each element in ListView

edited Jun 12 '18 at 14:49

pushkin

9,575
15
51
95

answered Jun 12 '18 at 14:06

Emi

79
1
2

score -1 · Answer 2 · answered Nov 14 '17 at 16:02

I took this answer from this stackoverflow answer

.dropdown{
 width:150px;
 border: 1px solid #cfcfcf;
 height: auto;
 border-radius: 5px;
 padding:3px 4px 4px;
 position: relative;
 z-index: 0;
 overflow:hidden;
 }

.dropdown select{
 border: none;
 background-color: transparent;
 outline: none;
 padding: 0;
 width:150px;
    /* background: url(http://i57.tinypic.com/nnmgpy_th.png) no-repeat right; */
    /* background-position: 55%; */
 }

/* not 100% sure this next option rule is needed */
.dropdown option {
    width:150px
}

/* this places an arbitrary element inside the dropdown but before it's children elements */
/* We use it to cover half the select box as well as display the custom arrow */

<div class="dropdown">
    <select>
       <option value="">Some Text</option>
        <option value="">Some More Text2</option>
        <option value="">Some More More More Longer Text</option>
    </select>
                                
    </div>

I don't like the idea of hardcoding the width to 150px. Also this is not responsive. If you change container width, `select` width remains the same. — Mhd, Nov 14 '17 at 16:07
Hmm, maybe you should look into plugins that can style the select box as you would want : http://selectric.js.org/demo.html — Steven, Nov 14 '17 at 16:12

Change select width to fit div container

2 Answers2