CODEWITHSUNDEEP
cssbootstrap-multiselect
BeniaminoBaggins
BeniaminoBaggins

Reputation: 12433

bootstrap multiselect dropdown width 100%

I have been using bootstrap multiselect in my web app for about 9 months now. I've been styling the width of the dropdown to be 100% like this:

    ul.multiselect-container {
      width: 100% !important;
    }

.dropdown-menu {width:100% !important;}

I just got the new version because it had an extra configuration option (onDeselectAll). Now the dropdown width is not 100%. Looking at the styling in the elements console it looks like my css should still work:

We can see in the photo of the css that .dropdown-menu {width:100% !important} is being overridden but I'm not sure what by.

Any ideas?

Upvotes: 15

Views: 70375

Answers (3)

Hien Nguyen
Hien Nguyen

Reputation: 18975

I tried setup buttonWidth and .multiselect-container but it did not work for me.

This is my way to set select tag to 100% within form-group class, it may help someone.

.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn){
       width:100%;
 }


<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/css/bootstrap-datetimepicker.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.9/css/bootstrap-select.css" />
	<style>	
		.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn){
			width:100%;
		}
	</style>

</head>

<body>
	
	<div class="container">
		
		<div class="row">
			<div class="col-md-12">
				<label for="tags">Select tags list</label>
				<div class="form-group">
					<select class="selectpicker input-large" multiple data-live-search="true">
						<option>COAL_5CD-PT07</option>
						<option>COAL_5CD-PT08</option>
						<option>COAL_5CD-PT09</option>
						<option>LNG_TI37130</option>
						<option>LNG_TI37230</option>
						<option>CCP_AB1HAD45CP900_ZQ01</option>
					</select>
				</div>
			</div>
		</div>
	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
	<script	src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/js/bootstrap-datetimepicker.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.9/js/bootstrap-select.min.js"></script>
	<script>

		$(document).ready(function () {

			$('select').selectpicker();

		});
	</script>
</body>

</html>

Upvotes: 1

Tony L.
Tony L.

Reputation: 19396

I used the buttonWidth parameter that .multiselect gives you similar to David Stutz. However, I put the '100%' right in the parameter.

<body>
    <select id="multiselect" multiple="multiple">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#multiselect').multiselect({
                buttonWidth: '100%'
            });
        //caret is in the middle, switch it to right
        $(".caret").css('float', 'right');
        $(".caret").css('margin', '8px 0');
        });
    </script>
</body>

Upvotes: 26

David Stutz
David Stutz

Reputation: 2618

The below minimal example is working fine, so Bootstrap Multiselect is not override the styling. But note that in your case .dropdown-menu and .multiselect-container refer to the very same elements (the ul, like in the example below. So applying the styling to both classes, like you did is not necessary and may cause what you see in the inspector.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" type="text/css"/>
<script type="text/javascript">
    $(document).ready(function() {
        $('#multiselect').multiselect({
            buttonWidth: '400px'
        });
    });
</script>
<style type="text/css">
    .multiselect-container {
        width: 100% !important;
    }
</style>
</head>
<body>
    <select id="multiselect" multiple="multiple">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
        <option value="5">Option 5</option>
        <option value="6">Option 6</option>
    </select>
</body>
</html>

Upvotes: 20

Related Questions