Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

Govaert free asked 5 years ago


Expected behavior.mdb-select + initializer will reform my select element to an input + label field.When clicking on the input field the label moves upwards and I get a dropdown list.https://mdbootstrap.com/docs/jquery/forms/select/ --> Select with a label and search box Actual behavior enter image description here.mdb-select + initializer reforms my select element to an input + label field.When clicking on the input field the label DOES NOT move upwards and I get a dropdown list. Upon selecting something I have both texts mixed through eachother.

Resources (screenshots, code snippets etc.)

<div class="select-wrapper mdb-select md-form"> <span class="caret">▼</span> <input type="text" class="select-dropdown"> <span class="search-wrap ml-2"> <div class="md-form mt-0"> <input type="text" class="search form-control w-100 d-block" placeholder="Search here.."></div> </span> <select searchable="Search here.." class="mdb-select md-form initialized" id="knp_Opties"></select>
</div> <label for="knp_Opties" class="mdb-main-label">Opties</label>

This is the code that is being renderd (I cut out the Options and Li items for readbility.When I manually swap the last Label inside the closing /div tag, like follows.

<div class="select-wrapper mdb-select md-form"> <span class="caret">▼</span> <input type="text" class="select-dropdown"> <span class="search-wrap ml-2"> <div class="md-form mt-0"> <input type="text" class="search form-control w-100 d-block" placeholder="Search here.."></div> </span> <select searchable="Search here.." class="mdb-select md-form initialized" id="knp_Opties"></select><label for="knp_Opties" class="mdb-main-label">Opties</label></div>

Everything works as it is intended. I can not figure out why the label gets locked outsidethe Div.. Thanks for the help


Govaert free commented 5 years ago

I figured out part of the problem. The "Active" class is not being set on the label when I click the Input field


Govaert free commented 5 years ago

Also, all my Labels get moved up to the top of my pop-up. Thinking this might be related to Position Relative/Absolute?


MDBootstrap staff answered 5 years ago


Hi Govaert,

I tested this component. I am realy sorry but I must addmit that searchable select is broken. I made my workaround for this issue in snippet for you.

https://mdbootstrap.com/snippets/jquery/pjoter-2-0/841127

We will try to fix this component asap.

Best Regards, Piotr


MDBootstrap staff answered 5 years ago


Hi Govaert, I am here to help you.

I am sure that our select field can work properly as you see on the page you linked so we surely can find solutions in your code. Please copy your initialization of this object in our snippet so I will try to find the problem for you.

Best Regards, Piotr


Govaert free commented 5 years ago

https://mdbootstrap.com/snippets/jquery/govaert/835373

However the problem that is rising in this snippet is not alike mine. Mine now alligns as it should, (with encapsulation in a col-md-10), but it is not gray nor does it move upwards...



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.2
  • Device: Asus
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes