Hi Everyone,
I got stuck over here. I have a list made in html and I wanted to put this list in a dropdown.
My list is as follow:
Now I wanted it to open on click of button + if you can help me out to setup the layout of list as well.
If you want I can provide the code as well.
This is just one of a number of ways. This uses CSS only, no scripting.
<a href="#list" title="Show Product List">+ Select Products</a>
<ul id="list">
<li>Thing one</li>
<li>Thing two</li>
</ul>
and css
#list { display: none; }
#list:target { display: block; }
Thanks for the quick response. I just found a solution under this link http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_dropdown-menu&stacked=h (on W3schools). But I am stucked over here due to the layout of the list.Now my list looks like as below:
You can see the garbled layout 
Can you post the code you have so far?
Again, there are various ways to set the layout.
I was thinking of display: table to put things in line but looking at it maybe an actual table would be appropriate in this case, since you have column headers.
I think a 3 column table will do here, or display: table, if you would rather keep it as a list.
I tried with display:table but it is not working.
I think i should go with table
Looking more closely at your code, there are a few things I don’t like about it. I will get back to you in a while.
This is not perfect, but a start using display table:-
<ul class="dropdown-menu table">
<li id="top"><span>Product</span> <span>Quantity</span> <span>Price</span></li>
<li><span><input type="checkbox"/><img height="30" src="pppImages/Add_Gel_Achiever_Pen.png"/><label>Add Gel Pen</label></span><input type="number" min="1" max="10"/><span>15/-</span></li>
<li><span><input type="checkbox"/><img height="30" src="pppImages/pilot_pen.png"/><label>Pilot Pen</label></span><input type="number" min="1" max="10"/><span>30/-</li>
<li><span><input type="checkbox"/><img height="30" src="pppImages/Add_Gel_Achiever_Pen.png"/><label>Montex Gel Pen</label></span><input type="number" min="1" max="10"/><span>15/-</span></li>
<li><span><input type="checkbox"/><img height="30" src="pppImages/Add_Gel_Achiever_Pen.png"/><label>Glitter Gel Pen</label></span><input type="number" min="1" max="10"/><span>15/-</span></li>
<li><span><input type="checkbox"/><img height="30" src="pppImages/Add_Gel_Achiever_Pen.png"/><label>Camlin ink bottle</label></span><input type="number" min="1" max="10"/><span>15/-</span></li>
<li><span><input type="checkbox"/><img height="30" src="pppImages/Add_Gel_Achiever_Pen.png"/><label>Lync Hi School</label></span><input type="number" min="1" max="10"/><span>15/-</span></li>
<li><span><input type="checkbox"/><img height="30" src="pppImages/Add_Gel_Achiever_Pen.png"/><label>Camlin Ink Pen</label></span><input type="number" min="1" max="10"/><span>15/-</span></li>
</ul>
and the css:-
.table {
display: table;
list-style: none;
}
.table li { display: table-row; }
.table li span,
.table li input {
display: table-cell;
vertical-align: top;
}
.table li input {
margin-left:15px;
padding-left:5px;
margin-right:15px;
width:40px;
}
.table #top span {
text-align: center;
}
.table li span img {
padding-right:5px;
}
And things you are doing I don’t like:-
<li> Product Quantity Price</li>
We have margins and padding for that. And this:-
<li> </li>
Really the headers should not strictly be a list item.
<p style="display:inline;">
No! Use <span>
I also moved the in-line styling to the css where it belongs.
Thanks a lot Sam !!
Your solution really works and yes my code was little immature since I am a newbie to it…
We all do these things when starting out. It’s part of the learning process.
The simplest way is to use a table. Here is an example using your list information:
<table border="1" cellpadding="2" cellspacing="0" style="border-collapse: collapse" width="450">
<tr>
<td width="7%">Product</td>
<td width="7%" align="center"> </td>
<td width="22%"> </td>
<td width="12%" align="center">Quantity</td>
<td width="13%" align="center">Price</td>
</tr>
<tr>
<td width="7%"><input type="checkbox" value="ON"></td>
<td width="7%" align="center"><img height="30" src="pppImages/Add_Gel_Achiever_Pen.png"></td>
<td width="22%">Add Gel Pen</td>
<td width="12%" align="center"><input type="number" min="1" max="10" size="3"></td>
<td width="13%" align="center">15/-</td>
</tr>
<tr>
<td width="7%"><input type="checkbox" value="ON"></td>
<td width="7%" align="center"><img height="30" src="pppImages/pilot_pen.png"></td>
<td width="22%">Pilot Pen</td>
<td width="12%" align="center"><input type="number" min="1" max="10" size="3"></td>
<td width="13%" align="center">30/-</td>
</tr>
<tr>
<td width="7%"><input type="checkbox" value="ON"></td>
<td width="7%" align="center"><img height="30" src="pppImages/Add_Gel_Achiever_Pen.png"></td>
<td width="22%">Montex Gel Pen</td>
<td width="12%" align="center"><input type="number" min="1" max="10" size="3"></td>
<td width="13%" align="center">15/-</td>
</tr>
</table>
You can put it into your drop down panel and change the widths to your liking.
Hi Sam,
I am stuck in setting up the layout.I was thinking if you can help me out please
I want the buttons to be set as List1 and List 2 buttons but by doing so I lose the layout of the list of their dropdown
The original layout of the list is as below:
The original layout is what you helped me out to set but on setting the buttons layout I lose the list layout. Please look into this.
Thanks in advance !!
Hi,
Its hard to offer advice without code but I guess that your dropdowns are within a nested list structure.
e.g.
<ul class="nav">
<li><a href="#">top level</a>
<ul>
<li>Nested level</li>
</ul>
</li>
<li class="even"><a href="#">top level</a>
<ul>
<li>Nested level</li>
</ul>
</li>
</ul>
Then also guessing I assume you have floated the second item in the top level to the right (or similar ) but in doing so you have affected the nested items?
If so then make sure that your rules for the top level only affect the top level using the child selector.
e.g.
.nav > li {affects only top level lists}
.nav > li > a {affects only top level anchors}
If you use that approach then the original styles for your dropdown should remain unaffected.
Of course you may be using a completely different structure so a link would be useful.
This post/issue is a continuation of this thread:
How to implement dropdown to my custom list?
I recommend that they be joined for continuity, if possible.
Now the threads have been merged I see you have been working on the code for a while so we will need to see the recent updated css and html to offer a proper solution 
Hi Paul,
Thanks for the response.
Please find the attached code and open the Test-file.html in it.
I want the buttons which are set as List1 and List2 in attached example and the layout of their dropdown should be like of List3 and List4.
Please do help me out and please see if you can make the buttons draggable keeping the list layout intact that would be wonderful.
Thanks Buddy ! (1.3 MB)
Hi,
Why have you got 150px left padding in the inline-style?
It seems to me you need to remove it and then add this css.
.open>.dropdown-menu {
display:table;
white-space:nowrap;
padding:10px;
}
.dropdown-menu {
padding-left:0!important
}
I’m not overly familiar with the bootstrap grid but don;t you need two rows if you just want a 50% on the left. The col-sm-6 should be inside a new row otherwise it won’t clear I think.
e.g.
<!DOCTYPE html>
<html>
<head>
<title>Papers</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/PPP.css">
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> -->
<script src="jquery-1.11.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
.circle {
width:50px;
height:50px;
border-radius:250px;
font-size:50px;
color:#fff;
line-height:500px;
text-align:center;
background:#ccc
}
.badge {
height: 25px;
width: 25px;
display: table-cell;
text-align: center;
vertical-align: middle;
border-radius: 50%; /* may require vendor prefixes */
background: yellow;
}
td {
border:none;
}
.open>.dropdown-menu {
display:table;
white-space:nowrap;
padding:10px;
}
.dropdown-menu {
padding-left:0!important
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1 class="page-header">Let's Play the Game</h1>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="dropdown btn_table">
<button class="btn btn-primary dropdown-toggle round button" type="button" data-toggle="dropdown">List 1 <span class="caret"></span></button>
<ul class="dropdown-menu table_list" style="padding-left:150px;">
<li id="top"><span>Product</span> <span>Quantity</span><span>Kms</span></li>
<li id="PenCheck1"><span>
<input id="PenCheck11" onchange="cart(this)" type="checkbox"/>
<img height="30" src="pppImages/Add_Gel_Achiever_Pen.png"/>
<label>Pizza</label>
</span>
<input id="PenCheck12" type="number" min="1" max="10" value="1" onchange="cart(this)"/>
<span>15/-</span></li>
<li id="PenCheck2"><span>
<input id="PenCheck22" onchange="cart(this)" type="checkbox"/>
<img height="30" src="pppImages/pilot_pen.png"/>
<label>Pasta</label>
</span>
<input type="number" min="1" max="10" value="1"/>
<span>30/-</span></li>
<li id="PenCheck3"><span>
<input id="PenCheck33" onchange="cart(this)" type="checkbox"/>
<img height="30" src="pppImages/Add_Gel_Achiever_Pen.png"/>
<label>Califonian Sweets</label>
</span>
<input type="number" min="1" max="10" value="1"/>
<span>15/-</span></li>
<li id="PenCheck4"><span>
<input id="PenCheck44" onchange="cart(this)" type="checkbox"/>
<img height="30" src="pppImages/Add_Gel_Achiever_Pen.png"/>
<label>Lasagna</label>
</span>
<input type="number" min="1" max="10" value="1"/>
<span>15/-</span></li>
<li id="PenCheck5"><span>
<input id="PenCheck55" onchange="cart(this)" type="checkbox"/>
<img height="30" src="pppImages/Add_Gel_Achiever_Pen.png"/>
<label>Bruschetta</label>
</span>
<input type="number" min="1" max="10"value="1"/>
<span>15/-</span></li>
<li id="PenCheck6"><span>
<input id="PenCheck66" onchange="cart(this)" type="checkbox"/>
<img height="30" src="pppImages/Add_Gel_Achiever_Pen.png"/>
<label>Verdure in pinzimonio</label>
</span>
<input type="number" min="1" max="10" value="1"/>
<span>15/-</span></li>
<li id="PenCheck7"><span>
<input id="PenCheck77" onchange="cart(this)" type="checkbox"/>
<img height="30" src="pppImages/Add_Gel_Achiever_Pen.png"/>
<label>Tortano</label>
</span>
<input type="number" min="1" max="10" value="1"/>
<span>15/-</span></li>
</ul>
</div>
<div class="dropdown btn_table">
<button class="btn btn-primary dropdown-toggle round button" type="button" data-toggle="dropdown">List 2 <span class="caret"></span></button>
<ul class="dropdown-menu table_list">
<li id="top"><span>Product</span> <span>Quantity</span> <span>Kms</span></li>
<li id="PenCheck1"><span>
<input id="PenCheck11" onchange="cart()" type="checkbox"/>
<img height="30" src="pppImages/Add_Gel_Achiever_Pen.png"/>
<label>Pizza</label>
</span>
<input type="number" min="1" max="10"/>
<span>15/-</span></li>
<li><span>
<input type="checkbox"/>
<img height="30" src="pppImages/pilot_pen.png"/>
<label>Pasta</label>
</span>
<input type="number" min="1" max="10"/>
<span>30/-</span></li>
<li><span>
<input type="checkbox"/>
<img height="30" src="pppImages/Add_Gel_Achiever_Pen.png"/>
<label>Califonian Sweets</label>
</span>
<input type="number" min="1" max="10"/>
<span>15/-</span></li>
<li><span>
<input type="checkbox"/>
<img height="30" src="pppImages/Add_Gel_Achiever_Pen.png"/>
<label>Lasagna</label>
</span>
<input type="number" min="1" max="10"/>
<span>15/-</span></li>
<li><span>
<input type="checkbox"/>
<img height="30" src="pppImages/Add_Gel_Achiever_Pen.png"/>
<label>Bruschetta</label>
</span>
<input type="number" min="1" max="10"/>
<span>15/-</span></li>
<li><span>
<input type="checkbox"/>
<img height="30" src="pppImages/Add_Gel_Achiever_Pen.png"/>
<label>Verdure in pinzimonio</label>
</span>
<input type="number" min="1" max="10"/>
<span>15/-</span></li>
<li><span>
<input type="checkbox"/>
<img height="30" src="pppImages/Add_Gel_Achiever_Pen.png"/>
<label>Tortano</label>
</span>
<input type="number" min="1" max="10"/>
<span>15/-</span></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="dropdown btn_table">
<button class="btn btn-primary dropdown-toggle round button" type="button" data-toggle="dropdown">List 3 <span class="caret"></span></button>
<ul class="dropdown-menu table_list">
<li id="top"><span>Product</span> <span>Quantity</span> <span>Kms</span></li>
<li id="PenCheck1"><span>
<input id="PenCheck11" onchange="cart(this)" type="checkbox"/>
<img height="30" src="pppImages/Add_Gel_Achiever_Pen.png"/>
<label>Pizza</label>
</span>
<input id="PenCheck12" type="number" min="1" max="10" value="1" onchange="cart(this)"/>
<span>15/-</span></li>
<li id="PenCheck2"><span>
<input id="PenCheck22" onchange="cart(this)" type="checkbox"/>
<img height="30" src="pppImages/pilot_pen.png"/>
<label>Pasta</label>
</span>
<input type="number" min="1" max="10" value="1"/>
<span>30/-</span></li>
<li id="PenCheck3"><span>
<input id="PenCheck33" onchange="cart(this)" type="checkbox"/>
<img height="30" src="pppImages/Add_Gel_Achiever_Pen.png"/>
<label>Califonian Sweets</label>
</span>
<input type="number" min="1" max="10" value="1"/>
<span>15/-</span></li>
<li id="PenCheck4"><span>
<input id="PenCheck44" onchange="cart(this)" type="checkbox"/>
<img height="30" src="pppImages/Add_Gel_Achiever_Pen.png"/>
<label>Lasagna</label>
</span>
<input type="number" min="1" max="10" value="1"/>
<span>15/-</span></li>
<li id="PenCheck5"><span>
<input id="PenCheck55" onchange="cart(this)" type="checkbox"/>
<img height="30" src="pppImages/Add_Gel_Achiever_Pen.png"/>
<label>Bruschetta</label>
</span>
<input type="number" min="1" max="10"value="1"/>
<span>15/-</span></li>
<li id="PenCheck6"><span>
<input id="PenCheck66" onchange="cart(this)" type="checkbox"/>
<img height="30" src="pppImages/Add_Gel_Achiever_Pen.png"/>
<label>Verdure in pinzimonio</label>
</span>
<input type="number" min="1" max="10" value="1"/>
<span>15/-</span></li>
<li id="PenCheck7"><span>
<input id="PenCheck77" onchange="cart(this)" type="checkbox"/>
<img height="30" src="pppImages/Add_Gel_Achiever_Pen.png"/>
<label>Tortano</label>
</span>
<input type="number" min="1" max="10" value="1"/>
<span>15/-</span></li>
</ul>
</div>
<div class="dropdown btn_table">
<button class="btn btn-primary dropdown-toggle round button" type="button" data-toggle="dropdown">List 4 <span class="caret"></span></button>
<ul class="dropdown-menu table_list">
<li id="top"><span>Product</span> <span>Quantity</span><span>Kms</span></li>
<li id="PenCheck1"><span>
<input id="PenCheck11" onchange="cart(this)" type="checkbox"/>
<img height="30" src="pppImages/Add_Gel_Achiever_Pen.png"/>
<label>Pizza</label>
</span>
<input id="PenCheck12" type="number" min="1" max="10" value="1" onchange="cart(this)"/>
<span>15/-</span></li>
<li id="PenCheck2"><span>
<input id="PenCheck22" onchange="cart(this)" type="checkbox"/>
<img height="30" src="pppImages/pilot_pen.png"/>
<label>Pasta</label>
</span>
<input type="number" min="1" max="10" value="1"/>
<span>30/-</span></li>
<li id="PenCheck3"><span>
<input id="PenCheck33" onchange="cart(this)" type="checkbox"/>
<img height="30" src="pppImages/Add_Gel_Achiever_Pen.png"/>
<label>Califonian Sweets</label>
</span>
<input type="number" min="1" max="10" value="1"/>
<span>15/-</span></li>
<li id="PenCheck4"><span>
<input id="PenCheck44" onchange="cart(this)" type="checkbox"/>
<img height="30" src="pppImages/Add_Gel_Achiever_Pen.png"/>
<label>Lasagna</label>
</span>
<input type="number" min="1" max="10" value="1"/>
<span>15/-</span></li>
<li id="PenCheck5"><span>
<input id="PenCheck55" onchange="cart(this)" type="checkbox"/>
<img height="30" src="pppImages/Add_Gel_Achiever_Pen.png"/>
<label>Bruschetta</label>
</span>
<input type="number" min="1" max="10"value="1"/>
<span>15/-</span></li>
<li id="PenCheck6"><span>
<input id="PenCheck66" onchange="cart(this)" type="checkbox"/>
<img height="30" src="pppImages/Add_Gel_Achiever_Pen.png"/>
<label>Verdure in pinzimonio fasoos special</label>
</span>
<input type="number" min="1" max="10" value="1"/>
<span>15/-</span></li>
<li id="PenCheck7"><span>
<input id="PenCheck77" onchange="cart(this)" type="checkbox"/>
<img height="30" src="pppImages/Add_Gel_Achiever_Pen.png"/>
<label>Tortano</label>
</span>
<input type="number" min="1" max="10" value="1"/>
<span>12/-</span></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Of course thats an awful lot of code for something so simple but that’s bootstrap for you 
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.