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.
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.
I'm really bad at using Bootstrap and I struggle endlessly over sizing and alignment. (I come from a print background where I am used to positioning things precisely).
In the snippet below, how would I size the bottom select element so that it right-aligns with the right edge of the select element above it?
<form id="date-format-panel" class="mt-3">
<div class="form-group row">
<label for="padding-input" class="col-4 col-form-label-sm text-right">Pad timeline start and end dates by</label>
<input class="form-control col-1" id="padding-input"></input>
<select class="form-control-sm col-2 ml-1 custom-select" id="padding-format-picker">
<option value="years">Years</option>
<option value="months">Months</option>
<option value="days">Days</option>
<option value="hours">Hours</option>
<option value="minutes">Minutes</option>
<option value="seconds">Seconds</option>
</select>
</div>
<div class="form-group row">
<label for="date-format-picker" class="offset-1 col-3 col-form-label-sm text-right">Date
Format:</label>
<select class="form-control-sm col-3 custom-select" id="date-format-picker">
<option value="MM/D/YYYY">06/21/2019</option>
<option value="MM/D/YYYY h a">06/21/2019 1 AM</option>
<option value="MM/D/YYYY h:mm a">06/21/2019 1:51 AM</option>
<option value="MM/D/YYYY h:mm:ss a">06/21/2019 1:51:23 AM</option>
</select>
</div>
</form>
In my opinion you are battling the grid layout by using different column values than recommended by Bootstrap.
Below is an example of how it can be coded with the default grid values. The only difference is the spacing of the elements will change but, the form will remain responsive and your alignment issues will be resolved. I suggest checking the grid docs.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="form-group row">
<label for="padding-input" class="col-sm-4 col-form-label text-right">Pad timeline start and end dates by</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="padding-input" placeholder=" ">
</div>
<div class="col-sm-6">
<select class="form-control" id="padding-format-picker">
<option value="years">Years</option>
<option value="months">Months</option>
<option value="days">Days</option>
<option value="hours">Hours</option>
<option value="minutes">Minutes</option>
<option value="seconds">Seconds</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="date-format-picker" class="col-sm-4 col-form-label text-right">Date
Format:</label>
<div class="col-sm-8">
<select class="form-control" id="date-format-picker">
<option value="MM/D/YYYY">06/21/2019</option>
<option value="MM/D/YYYY h a">06/21/2019 1 AM</option>
<option value="MM/D/YYYY h:mm a">06/21/2019 1:51 AM</option>
<option value="MM/D/YYYY h:mm:ss a">06/21/2019 1:51:23 AM</option>
</select>
</div>
</div>
</form>
Hello im having some problems with the position of some dropdowns and buttons... i need to align them like this picture :
How it is :
The Code
<div class="row">
<div class="col col-sm-6">
<div class="card mb-3">
<div class="card-header">
Parametros Variables
</div>
<div class="card-block">
<div class="form-group">
<label>Modo :</label>
<select [value]="modoSelected" class="form-control-mb-12"
(change)="modo($event.target.value)">
<option value="MODO 1" >MODO 1</option>
<option value="MODO 2">MODO 2</option>
<option value="MODO 3" >MODO 3</option>
</select>
<label>Intervalo de Guarda :</label>
<select [value]="intSelected" class="form-control-mb-12"
(change)="intSelection($event.target.value)" >
<option value="1/4">1/4</option>
<option value="1/8">1/8</option>
<option value="1/16">1/16</option>
<option value="1/32">1/32</option>
</select> <br><br>
<p> Capa A Capa B Capa C </p>
<button (click)="onActivado()">{{ activado ? 'Desactivado' : 'Activado' }}</button>
<select [(ngModel)]="select1" [disabled]="activado" (change)="saveValueA(select1)">
<option *ngFor="let o of options | slice:0:getLimit(select1)" [ngValue]="o">{{ o }}</option>
</select>
<select [(ngModel)]="select2" (change)="saveValueB(select2)">
<option *ngFor="let o of options | slice:0:getLimit(select2)" [ngValue]="o">{{ o }}</option>
</select>
<select [(ngModel)]="select3" (change)="saveValueC(select3)">
<option *ngFor="let o of options | slice:0:getLimit(select3)" [ngValue]="o">{{ o }}</option>
</select>
<br><br>
the dropdowns and menus are all part of a card..
If you want to arrange this like the pictured image, I think you might have more luck placing all of the elements into a table.
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...
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>