Login/Register
bootstrap multiselect dropdown width 100%
Asked Answered
Solved cssbootstrap-multiselect
A

3

15

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?

Aquavit answered 27/8, 2016 at 5:58 Comment(2)
Any chance you can share the site to inspect or a fiddle with the code? – Lasonyalasorella
@Lasonyalasorella struggling to get the bootstrap multiselect working in the jsfiddle but here it is jsfiddle.net/u0m6tzsp/1 – Aquavit
S
20

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>
Steelyard answered 2/9, 2016 at 13:15 Comment(3)
I had already got mine working and forgot to answer but your example works too so is a good solution. I needed to add position: relative in my specific case: ul.multiselect-container { width: 100% !important; position: relative !important; }. Really nice plugin by the way. I have also added selectable optgroups now and it works perfectly. Thanks for your work on it! :) – Aquavit
buttonWidth: '400px' and .multiselect-container { width: 100% !important; } worked for me – Sheepshank
Can it be done using bootstrap-5? that is with pure Javascript. – Backfield
H
25

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>
Haywire answered 13/2, 2017 at 22:47 Comment(0)
S
20

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>
Steelyard answered 2/9, 2016 at 13:15 Comment(3)
I had already got mine working and forgot to answer but your example works too so is a good solution. I needed to add position: relative in my specific case: ul.multiselect-container { width: 100% !important; position: relative !important; }. Really nice plugin by the way. I have also added selectable optgroups now and it works perfectly. Thanks for your work on it! :) – Aquavit
buttonWidth: '400px' and .multiselect-container { width: 100% !important; } worked for me – Sheepshank
Can it be done using bootstrap-5? that is with pure Javascript. – Backfield
J
1

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>
Judsonjudus answered 15/4, 2019 at 7:30 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.