Topic: col-auto not working for select and multi-select
*_Expected behavior_*Expected the select to autosize based on the options in the select when col-auto is used.
*_Actual behavior_*The values inside the select are getting wrapped instead.
Resources (screenshots, code snippets etc.)
<div class="row">
<div class="col-auto">
<select id="inputSelect" class="md-form mdb-select colorful-select dropdown-primary">
<option value="" disabled selected>Select</option>
<option value="1">This is a test option</option>
<option value="1">Another test option</option>
<option value="2">Smaller option</option>
<option value="3">option</option>
</select>
<label class="mdb-main-label">Test Select</label>
</div>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Open
Specification of the issue
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.19.1
- Device: Laptop
- Browser: Chrome
- OS: macOS
- Provided sample code: No
- Provided link: No
Related topics
Krzysztof Wilk staff commented 4 years ago
Hi!
I can't map your problem, could you provide a working example using our online editor? You can find it here: https://mdbootstrap.com/snippets/
Best regards
mudassir_saifi premium commented 4 years ago
Hi Krzysztof,
Apologies for the delayed response. Here is a snippet, as you can see the select is not sizing automatically based on the length of options. However if i try the same in vanilla bootstrap, it will auto size.
https://mdbootstrap.com/snippets/jquery/mudassir_saifi/2656509
Mudassir
Marcin Luczak staff commented 4 years ago
Hi,
Material Select doesn't autosize based on the options because, other than normal select, Material Select is dynamically presented into the DOM after the initialization via JavaScript. That's why its content is the one to autosize based on the width of the parent element. In this case,
col-autoclass is causing the select element to take its minimum width, thus options are getting wrapped. Any class that adds specific width to the element, e.g.col-6,w-100will make your select wider.Best regards, Marcin