CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Mhd
Mhd

Reputation: 2978

Change select width to fit div container

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?

Upvotes: 7

Views: 22711

Answers (2)

Emi
Emi

Reputation: 97

try width:100%;

It works for me each element in ListView

Upvotes: 8

Steven
Steven

Reputation: 867

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>

Upvotes: -1

Related Questions