col-auto not working for select and multi-select


Topic: col-auto not working for select and multi-select

mudassir_saifi premium asked 2 years ago

*_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>


Krzysztof Wilk staff commented 2 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 2 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 2 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-auto class 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-100 will make your select wider.

Best regards, Marcin


Please insert min. 20 characters.

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