I have some code using Materialize CSS. I want to show a select with 15 options, but when I select it is cut off. The code in the container is inside a main tag.
$('select').material_select();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="input-field col s12 m6">
<select>
<option selected="" disabled="" value="">Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
<label>Browser Select</label>
</div>
</div>
</div>
Related
I am using bootstrap 4 and I need to add a checkbox and a dropdown menu inside a div inline. Checkbox first and then dropdown.
Here is an image example of what I need:
Example image:
How can I do this in Bootstrap 4?
You can use bootstrap Inline forms or Column Auto Sizing for that. Try following two example code.
With Inline forms:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="form-inline">
<div class="custom-control custom-checkbox mr-sm-2">
<input id="workflow" name="workflow" class="custom-control-input" type="checkbox">
<label class="custom-control-label" for="workflow">Default Workflow</label>
</div>
<select id="dropdown" name="dropdown" class="custom-select" >
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
</div>
With Column Auto Sizing:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="form-row align-items-center">
<div class="col-auto">
<div class="custom-control custom-checkbox">
<input id="workflow" name="workflow" class="custom-control-input" type="checkbox">
<label class="custom-control-label" for="workflow">Default Workflow</label>
</div>
</div>
<div class="col-auto">
<select id="dropdown" name="dropdown" class="custom-select">
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
</div>
</div>
No need for bootstrap classes
.input-wrapper {
display: flex;
}
label {
margin-right: 10px;
}
<div class="input-wrapper">
<input type="checkbox" name="checkbox" id="checkbox">
<label for="checkbox">Default workflow</label>
<select name="select" id="select">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
</div>
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>
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.
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>