Topic: Switch button affects MDB Select option box directly above
MDB 4.0.2 PRO When I click the switch, my option box above changes to option 3, if I interact with the option box first, the switch behaves normally. Code is attached. I am more than happy to upload screenshots but it does exactly as I describe. Can anyone advise?
<ul> <li><label for="options">Options</label></li> <li><select class="mdb-select-disp ld-center" id="options" name="options"> <option value="" disabled selected>Option 1</option> <option value="">Option 2</option> <option value="">Option 3</option> <option value="">Option 4</option> <option value="">Option 5</option> <option value="">Option 6</option> <option value="">Option 7</option> </select></li> </ul> </ul> <span class="ld-center-divider"></span> <ul class="ld-contact-ul ld-cent"> <li class="ld-contact-li"><img class="ld-fig-img" src="img/ld-cent-hotlist-icon.png" alt="" /></li> <ul> <li>Add</li> <li>Add To<div class="switch"><label for="add-to-checkbox">Off<input type="checkbox" id="add-to-checkbox" name="add-to-checkbox"><span class="lever"></span> On</label> </div></li> </ul> </ul>
It appears that the toggle switch is actually selecting the option from the dropdown that would be appearing in that particular location, if the dropdown was active, which it is not. I have tried commenting out my custom CSS for the MDB select dropdowns and I was not having any luck getting it to work, however, when I modified my unordered list code and removed "display: inline-block;" from that particular unordered list, it works properly. I can solve this by floating my elements left instead of using display: inline-block, I am sure there is an alternate solution if I needed to maintain display: inline-block, regardless I appreciate your help.
Your code works fine for me and I cannot reproduce that issue. Some of your custom code causes the problem.
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Specification of the issue
- User: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No