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>
Add comment
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags