Button dropdown bs3

toronto2009 · September 11, 2020, 3:25pm

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

PaulOB · September 11, 2020, 4:07pm

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

toronto2009 · September 11, 2020, 5:07pm

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.

PaulOB · September 11, 2020, 6:44pm

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.

toronto2009 · September 12, 2020, 8:37am

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.

PaulOB · September 12, 2020, 10:15am

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">

toronto2009 · September 12, 2020, 10:27am

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.

PaulOB · September 12, 2020, 10:51am

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

Where’s your updated example with the problem?

toronto2009 · September 12, 2020, 4:40pm

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>

PaulOB · September 12, 2020, 6:06pm

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?

toronto2009 · September 12, 2020, 6:17pm

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…

PaulOB · September 12, 2020, 6:45pm

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.

PaulOB · September 13, 2020, 12:30pm

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

.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

toronto2009 · October 7, 2020, 2:13pm

thank you for help.
I would like to ask, how can I submit multiple button selections? I choose something from a button dropdown, then another choice from another button and submit the chosen options? is it happen one by one or i can submit in one go all of them thank you.

PaulOB · October 7, 2020, 4:31pm

The same way that you would submit multiple inputs in a normal form!

You have a submit button on your form and all the data in that form is submitted to your back end script.

As long as all the controls are within the same form then they all get submitted together unless you are interfering with them is some way through js.

Or were you talking about making multiple selections from the same select dropdown? If so then you need the multiple attribute on the select.

Erik_J · October 11, 2020, 5:44pm

3 posts were split to a new topic: Button dropdown

system · January 11, 2021, 12:44am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.