Topic: mdb-select
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 .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
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...
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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
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?