For the first time i needed to restyle some dropdown select menu's. Only they leave me with a problem.
I can't seem to get them lined up with the submit image. Anyone got any tips? Maybe i'm overlooking something simple.
<body>
<div class="filterbalk">
<form>
<label>
<select style="width: 250px;">
<option>Woningtype</option>
</select>
</label>
<label>
<select style="width: 250px;">
<option>Plaats</option>
</select>
</label>
<label>
<select style="width: 90px;">
<option value="0">Prijs van</option>
<option value="0">0</option>
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
<option value="400">400</option>
<option value="500">500</option>
<option value="600">600</option>
<option value="700">700</option>
<option value="800">800</option>
<option value="900">900</option>
<option value="1000">1000</option>
</select>
</label>
<label>
<select style="width: 90px;">
<option value="1000000000">Prijs tot</option>
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
<option value="400">400</option>
<option value="500">500</option>
<option value="600">600</option>
<option value="700">700</option>
<option value="800">800</option>
<option value="900">900</option>
<option value="1000">1000</option>
<option value="1000000000">1000+</option>
</select>
</label>
<input type="image" src="http://www.wauwwebdesign.nl/problem/buttonFilter.jpg" value="Filter" id="submit">
</form>
</div>
Both HTML and CSS can be found in the fiddle. I can't seem to paste the CSS here.
http://jsfiddle.net/5FcLf/
I think all you need to add is
#submit {
display: inline-block;
vertical-align: top;
}
JSFiddle
Then tweak...
Related
i am trying to chaneg the colour of text using twitter-bootstrap but something is wrong it is not working.
here is my code:
<select name="number" '<?=htmlspecialchars($s['number'])?>'td>"
<option><?=htmlspecialchars($s['number'])?></option>
<option class="text-cuccess">Tak</option>
<option class="text-danger">Nie</option>
</select>
.newcolor {
color:red;
}
.newcolor1{
color:green;
}
<select id="select" onchange="this.className=this.options[this.selectedIndex].className">
<option style="color:gray" value="null">select one option</option>
<option value="1" class="newcolor">one</option>
<option value="2" class="newcolor">two</option>
<option value="2" class="newcolor1">two</option>
</select>
I am using the Themify builder and I created a small form in a text block in the builder.
There is unintentional gap above the fields. You can view it live here.
HTML:
<form action="contact_info.php" method="get">
Loan Calculator
<select class="form-inline">
<option value="1000">$1,000 Loan</option>
<option value="2000">$2,000 Loan</option>
<option value="5000">$5,000 Loan</option>
<option value="7500">$7,500 Loan</option>
<option value="10000">$10,000 Loan</option>
<option value="12000">$12,000 Loan</option>
<option value="15000">$15,000 Loan</option>
<option value="17000">$17,000 Loan</option>
<option value="20000">$20,000 Loan</option>
<option value="25000" selected="selected">$25,000 Loan</option>
<option value="30000">$30,000 Loan</option>
<option value="40000">$40,000 Loan</option>
<option value="50000">$50,000 Loan</option>
<option value="60000">$60,000 Loan</option>
<option value="70000">$70,000 Loan</option>
<option value="80000">$80,000 Loan</option>
<option value="90000">$90,000 Loan</option>
<option value="100000">$100,000 Loan</option>
</select>
<select class="form-inline">
<option value="1">1 Year</option>
<option value="2">2 Years</option>
<option value="3">3 Years</option>
<option value="4">4 Years</option>
<option value="5" selected="selected">5 Years</option>
<option value="6">6 Years</option>
<option value="7">7 Years</option>
</select>
<input type="submit" value="Calculate" class="form-inline">
</form>
CSS:
.form-inline {
display: inline-block;
margin: 0px;
float: left;
}
Hi please remove <br> tag between <select> in your code and your form fields will be shown as you want. <br> tag forces to break the line, that is why see such gaps.
On your demo page, there are <br> tag after every element in the form, please remove that.
I figured out the problem.
Wordpress adds <br> tags automatically if there is whitespace between form tags.
I removed all the whitespaces between every single tag and the problem was solved.
How can I remove the extra space from the first line? I am new to bootstrap can someone help?
Thanks in advance. I want both the lines starting from same point but it's not so.
<form>
<div class="row">
<div class="col-md-7 col-md-offset-1">
<h1>Number of players you want to play with:</h1>
</div>
<div class="col-md-2">
<select name="deals" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
</select>
</div>
</div>
<div clas="row">
<div class="col-md-5 col-md-offset-1">
<h1>Number of point difference</h1>
</div>
<div class="col-md-2"><h1>
<select name="deals" class="form-control">
<option value="1">5</option>
<option value="2">10</option>
<option value="3">15</option>
<option value="4">20</option>
<option value="5">25</option>
<option value="6">30</option>
<option value="7">35</option>
<option value="8">40</option>
<option value="9">45</option>
<option value="10">50</option>
<option value="11">55</option>
<option value="11">60</option>
<option value="11">65</option>
<option value="11">70</option>
<option value="11">75</option>
<option value="11">55</option>
<option value="11">85</option>
<option value="11">90</option>
<option value="11">95</option>
<option value="11">100</option>
</select></h1>
</div><div class="col-md-2"></div>
</div>
<div class="clearfix"></div>
<br><br>
<div class="row">
<div class="text-center">
<div class="form-group">
<input type="submit" class="btn btn-lg btn-primary " value="Deal" >
</div>
</div>
</div>
</form>
</body>
</html>
By default, Bootstrap is adding some top margin to each heading. You will probably have about 20px there, and the select element by default has 0 margin around it.
Either apply a custom css to the select, to move it down to the right place, or create a class that will remove margin top from the headline, then they will match.
We want to display birthday in dropdown list
How to use Multiple select tag in single line while using bootstrap?
<div class="form-group col-lg-12">
<label>Birthday</label><br>
<select class="form-control" id="sel1">
<option value="jan">Jan</option>
<option value="jan">Feb</option>
<option value="jan">Mar</option>
................
<option value="jan">Dec</option>
</select>
<select class="form-control" id="sel2">
<option value="">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
................
<option value="jan">12</option>
</select>
<select class="form-control" id="sel2">
<option value="">Year</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
................
<option value="2015">2015</option>
</select>
</div>
Note: we are using bootstrap
You need to use the form-inline class on the parent element...
<div class="form-inline">
<div class="form-group col-lg-12">
<label>Birthday</label><br>
<select class="form-control" id="sel1">
<option value="jan">Jan</option>
<option value="jan">Feb</option>
<option value="jan">Mar</option>
................
<option value="jan">Dec</option>
</select>
<select class="form-control" id="sel2">
<option value="">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
................
<option value="jan">12</option>
</select>
<select class="form-control" id="sel2">
<option value="">Year</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
................
<option value="2015">2015</option>
</select>
</div>
</div>
DEMO
In a funny kind of way, the submit button sticks to the input box. I couldn't understand the reason. I can solve it by giving -(minus) margin etc. However, I'm looking for permanent solution.
I've attached the screenshot from chrome's debug tool.
I want to align the button to the left below the select box.
If you have difficulties to see the image...
http://i.stack.imgur.com/VhJVb.png
<input class="reservationdates" type="text" name="date_from"/>
<label>Drop-off date</label>
<select name="to_time" class="reservationdates">
<option value="07:00 am">07:00 AM</option>
<option value="07:30 am">07:30 AM</option>
<option value="08:00 am">08:00 AM</option>
<option value="08:30 am">08:30 AM</option>
<option value="09:00 am">09:00 AM</option>
<option value="09:30 am">09:30 AM</option>
<option value="10:00 am">10:00 AM</option>
<option value="10:30 am">10:30 AM</option>
<option value="11:00 am">11:000 AM</option>
<option value="11:30 am">11:30 AM</option>
<option value="12:00 pm">12:00 PM</option>
<option value="12:30 pm">12:30 PM</option>
<option value="01:00 pm">01:00 PM</option>
<option value="01:30 pm">01:30 PM</option>
<option value="02:00 pm">02:00 PM</option>
<option value="02:30 pm">02:30 PM</option>
<option value="03:00 pm">03:00 PM</option>
<option value="03:30 pm">03:30 PM</option>
<option value="04:00 pm">04:00 PM</option>
<option value="04:30 pm">04:30 PM</option>
<option value="05:00 pm">05:00 PM</option>
<option value="05:30 pm">05:30 PM</option>
<option value="06:00 pm">06:00 PM</option>
<option value="06:30 pm">06:30 PM</option>
</select>
<div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<input class="span2" name="date_to" size="16" type="text" value="12-02-2012" readonly>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<input class="span3 btn btn-large btn-primary" type="submit" name="submit" value="Search For Rates"/>
</form>
You can separate the input fields from your input button into two rows using the .control-group class from the bootstrap. That class adds some margin to the bottom of the div that should unstick your button from your input fields:
Demo: http://jsfiddle.net/MYjzj/
HTML
<form class="form-horizontal">
<div class="control-group">
<input class="reservationdates" type="text" name="date_from"/>
<label>Drop-off date</label>
<select name="to_time" class="reservationdates">
<option value="07:00 am">07:00 AM</option>
<option value="07:30 am">07:30 AM</option>
<option value="08:00 am">08:00 AM</option>
<option value="08:30 am">08:30 AM</option>
<option value="09:00 am">09:00 AM</option>
<option value="09:30 am">09:30 AM</option>
<option value="10:00 am">10:00 AM</option>
<option value="10:30 am">10:30 AM</option>
<option value="11:00 am">11:000 AM</option>
<option value="11:30 am">11:30 AM</option>
<option value="12:00 pm">12:00 PM</option>
<option value="12:30 pm">12:30 PM</option>
<option value="01:00 pm">01:00 PM</option>
<option value="01:30 pm">01:30 PM</option>
<option value="02:00 pm">02:00 PM</option>
<option value="02:30 pm">02:30 PM</option>
<option value="03:00 pm">03:00 PM</option>
<option value="03:30 pm">03:30 PM</option>
<option value="04:00 pm">04:00 PM</option>
<option value="04:30 pm">04:30 PM</option>
<option value="05:00 pm">05:00 PM</option>
<option value="05:30 pm">05:30 PM</option>
<option value="06:00 pm">06:00 PM</option>
<option value="06:30 pm">06:30 PM</option>
</select>
<div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<input class="span2" name="date_to" size="16" type="text" value="12-02-2012" readonly /><span class="add-on"><i class="icon-th"></i></span>
</div>
</div>
<input class="span3 btn btn-large btn-primary" type="submit" name="submit" value="Search For Rates"/>
</form>
As far as I know, to separate input box from submit button bootstrap uses 'form-action' class, which adds padding and margin to with button. So I think your decision with giving margin is correct in some way. Try to put submit button into . But I could be wrong.