How do I lineup up form controls like select boxes and others in a line in jquery vs having them displayed vertically?
<label for="select-choice-0" class="select">Shipping method:</label>
<select name="select-choice-0" id="select-choice-1">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
<label for="select-choice-2" class="select">Shipping method:</label>
<select name="select-choice-2" id="select-choice-2">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
I don't want them in the same fieldset with data-type="horizontal". Thanks
Would a grid layout work for you? Here is a Example:
http://jsfiddle.net/RM5eq/
HTML
<div data-role="page" class="type-home">
<div data-role="content">
<div class="ui-grid-a">
<div class="ui-block-a">
<select name="select-choice-0" id="select-choice-1">
<option>Shipping method</option>
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
<div class="ui-block-b">
<select name="select-choice-2" id="select-choice-2">
<option>Shipping method</option>
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
</div>
</div>
</div>
Docs for the Grid Layout options
http://jquerymobile.com/demos/1.1.0/docs/content/content-grids.html
I have liked jquery-mobile-960.
jquery-mobile-960 is a port of 960 grid to jquery mobile. It merge the flexibility of 960.gs, and the ease of jquery mobile. It aims to bring more flexibility to jquery-mobile layout and thus make it easier to use on tablets.
Alternative Example using CSS and data-inline="true" tag
http://jsfiddle.net/CFXxt/
CSS
#inline-select-container {
overflow:auto;
}
#inline-select-left {
float:left;
}
#inline-select-right {
float:right;
}
HTML
<div data-role="page" class="type-home">
<div data-role="content">
<div id="inline-select-container">
<div id="inline-select-left">
<select name="select-choice-0" id="select-choice-1" data-inline="true">
<option >Shipping method</option>
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
<div id="inline-select-right">
<select name="select-choice-2" id="select-choice-2" data-inline="true">
<option >Shipping method</option>
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
</div>
<br />
<br />
<div id="inline-select-container">
<div id="inline-select-left">
<label for="select-choice-0" class="select">Shipping method:</label>
<select name="select-choice-0" id="select-choice-1" data-inline="true">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
<div id="inline-select-right">
<label for="select-choice-2" class="select">Shipping method:</label>
<select name="select-choice-2" id="select-choice-2" data-inline="true">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
</div>
</div>
</div>
Related
I'm trying to add 2 select dropDown materialize css side by side, in my react app.
But instead they are stacked one on top of each-other and taking up the full width. here is my code.
const SearchPillows = () => {
return (
<div className="container">
<div className="input-field col s12">
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<div className="input-field col s12">
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1" className="left">Option 1</option>
<option value="2" className="left">Option 2</option>
<option value="3" className="left">Option 3</option>
</select>
</div>
</div>
<p>hello</p>
</div>
);
};
export default SearchPillows;
Please assist, thanks !!
Several errors in your code:
1) No .row div. .col must live in rows to be responsive.
2) No class name to make the columns side by side, which is .s6, .m6 .l6 etc.
3) Missing closing div tag after the first select.
<div class="container">
<div class="row"><!-- < This was missing -->
<div class="input-field col s12 m6">
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div><!-- < This was missing -->
<div class="input-field col s12 m6">
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1" className="left">Option 1</option>
<option value="2" className="left">Option 2</option>
<option value="3" className="left">Option 3</option>
</select>
</div>
</div>
<p>hello</p>
</div>
</div>
Codepen.
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
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...
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.