Button dropdown bs3

Hi
I need help with a button dropdown, bs 3, something is wrong with it. clicking on it , I get the dropdown but it doesn’t happen more. I would expect the same results like the other input fields.
yje code:

 <div class="dropdown">
    <button class="btn btn-default btncolor2 dropdown-toggle check" 
            type="button" data-toggle="dropdown" name="pizza">Pizza
      <span class="caret"></span></button>
    <ul class="dropdown-menu dropdwn2">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Margarita</a></li>
      <li role="presentation" class="divider"></li>
      <li ><a href="#">Diavola</a></li>
      <li ><a href="#">Funghi</a></li>
      <li ><a href="#">Veneziana</a></li>
      <li ><a href="#">Quattro Stagioni</a></li>
      <li ><a href="#">Fiorentina</a></li>
    </ul>
    <span class="feedback"></span>
  </div>

order

The bootstrap dropdown is just a dropdown menu. It is not a replacement for a select element.

If you want it to behave like a select element then you will need to code it yourself and swap the values dynamically at the same time as updating a hidden select.

There are plenty of plugins for select elements so it may be easier to use one of them rather than writing your own.

Alternatively just use a select element as that was what it was made for :slight_smile:

thank you for help. select is html, can be used in bs 3? bs 3 has list group. can you help me to get a correct code instead of broken fantasy solution? thank you.

As I said you will need to use a select element then add the plugin code to convert it. It won’t be exactly the same as yours but you should get close enough. I’ve pulled some relevant parts from your page and used this plugin:

(Please check the license and documentation meets your needs (there are many other plugins like this).

The basic result is here but you may need to re-style to your own choice.

It’s quite complex because you have to use classes on each column parent to style the newly inserted html the way that you want.

On the backend it should submit the correct results from the hidden select. For error checking and testing you would need the help of the other @Paul_Wilkins in the JS forum as I have merely used a plugin and adjusted the styling to match. The JS is beyond me.

Remember the html you are working with will be as seen in the devtools window and not the original select which is just used for sending the data.

1 Like

Thank you for help, it is lovely. I noticed another problem: as the view port shrinks the “Please choose” goes behind buttons instead of the top of buttons, I don’t understand why. Can you help me please? thank you.

Shouldn’t the class on the buttons column be col-sm-9 instead of col-xs-9?

<div class="form-group row">
  <label class="control-label col-sm-3">
  <span id="choiceRequired" class="glyphicon glyphicon-star starrq"> 
  </span> Please Choose :</label>

  <div class="col-sm-9">

thank you for help. I changed the mentioned part, the informative part doesn’t go behind the buttons but doesn’t go above buttons neither when view port shrinking. please help me thank you.

I just added my code to your order demo above and I get this result.

Where’s your updated example with the problem?

Hi PaulOB
I’ve done this experiment, would you mind to check it if it is ok?thank you.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Form control: select</h2>
  <p>The form below contains two dropdown menus (select lists):</p>
  <form>
  <div class="row">
  <label  class="control-label col-xs-12 col-sm-3">
  <span id="choiceRequired1" class="glyphicon glyphicon-star starrq"></span> Please Choose 1 :</label>
											
  <div class="col-xs-12 col-sm-9">  
	  
	<!--  <label for="sel0" class="control-label col-xs-12 col-sm-4">
			</label>
			<div class="col-xs-12 col-sm-8">-->
				
					<div class=" btncolor2">
						 <div class="form-group">
						 <!-- <label for="sel0">Select list (select one):</label> -->
						  <select class="form-control" id="sel0">
							<option>1</option>
							<option>2</option>
							<option>3</option>
							<option>4</option>
						  </select>
						  <br>
						  
						</div>
					</div>
				
		<!--	</div>
	  </div>-->
  </div>
  </div>
  
  
  <div class="row">
  <label for="sel1" class="control-label col-xs-12 col-sm-3">
  <span id="choiceRequired2" class="glyphicon glyphicon-star starrq"></span> Please Choose 2 :</label>
	
  <div class="col-xs-12 col-sm-9">  
  
		<div class="form-group">
				<div class="col-xs-12 col-sm-6 col-md-3">
				    <label for="sel1" class="control-label col-xs-12">
						Pizza: </label>
						<div class="col-xs-12">
            				
							<div class="btncolor2">	
							<!--	<label >Select list  (select one):</label>  col-sm-3 col-md-3 col-lg-3-->
								  <select class="form-control" id="sel1">
									<option>1 Margarita</option>
									<option>2 Diavola</option>
									<option>3 Funghi</option>
									<option>4 Veneziana</option>
									<option>5 Quattro Stagioni</option>
									<option>6 Fiorentina</option>
								  </select>
							</div>
						</div>
				</div>
				 						  
				<div class="col-xs-12 col-sm-6 col-md-3">		  
					<label for="sel2" class="control-label col-xs-12">
						Base type: </label>
						<div class="col-xs-12">  
							 <div class="btncolor2">  
							<!--  <label for="sel2"> <br>(hold shift to select more than one):</label>-->
							  <select class="form-control" id="sel2">
								<option>1 Thick</option>
								<option>2 Thin</option>
								<option>3 Extra Thin</option>
								<option>4 Crispy</option>
								<option>5</option>
							  </select>
							 </div>
						</div>
				</div>
		
				<div class="col-xs-12 col-sm-6 col-md-3">
				    <label for="sel1" class="control-label col-xs-12">
						Size: </label>
						<div class="col-xs-12">
            				
							<div class="btncolor2">	
							<!--	<label >Select list  (select one):</label>  col-sm-3 col-md-3 col-lg-3-->
								  <select class="form-control" id="sel1">
									<option>1 Extra large</option>
									<option>2 large</option>
									<option>3 Medium</option>
									<option>4 Smal</option>
								  </select>
							</div>
						</div>
				</div>
						  
				<div class="col-xs-12 col-sm-6 col-md-3">		  
					<label for="sel2" class="control-label col-xs-12">
						Spice: </label>
						<div class="col-xs-12">  
							 <div class="btncolor2">  
							<!--  <label for="sel2"> <br>(hold shift to select more than one):</label>-->
							  <select class="form-control" id="sel2">
								<option>1 Chili sauce</option>
								<option>2 Barbeque</option>
								<option>3 Olive oil</option>
								<option>4 Peper</option>
							  </select>
							 </div>
						</div>
				</div>
				
		</div>
  </div> 
  
  </div>
  </form>
</div>

</body>
</html>

I’m out this evening and will check tomorrow but before I look at it can you tell me what the experiment is trying to do and what you think is wrong or right about it?

I am trying to replicate the code you gave me, using bootstrap select. I want to make sure my code has no mistake.
also , styling: I am wondering, how can I do that? my similar previous experiments are useful? or I need to adapt them? can you help me please?
thank you…

I gave you all the code for that in my codepen. It’s based on your css and html.

I explained how to style it and indeed have already styled it to match your original. It should be straight forward as I have done all the work for you. :slight_smile:

2 Likes

If you are using the plugin I suggested then you need to add the class of dropdown-select to the select otherwise the js won’t find anything to work on.

Note that you have duplicated your ids on some of the selects and ids must be unique so check your labels and selects match up and that their ids are unique. Also you can’t nest columns within columns in bootstrap unless you nest another row first. Please make sure you bootstrap grid is valid and according to the docs.

To style the dynamically inserted html you can add a class to a parent and then use that class to style the newly inserted dwopdown.

e.g. to style the button 1 colour you would do this :slight_smile:

.btncolor1 button {
  min-width: 120px;
  background-image: linear-gradient(darkred, red, darkred);
  color: yellow;
}
.btncolor1 button:focus,
.btncolor1 button:hover {
  background-image: linear-gradient(red, orange, red);
  color: white;
}

If you look at the previous codepen I gave you I styled the 2 button colours and the colours of the dropdown background etc so you have a complete template to follow. You have all the information you need to complete this task now :slight_smile:

1 Like