Topic: Switch button affects MDB Select option box directly above

jtangel3 pro asked 6 years ago


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>
		

jtangel3 pro answered 6 years ago


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.

Michal Szymanski staff answered 6 years ago


Your code works fine for me and I cannot reproduce that issue. Some of your custom code causes the problem.

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

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
Tags