I have the following selection boxes that are working with select2 js:
<!-- Selections for the table -->
<div class="form-group row">
<div class="col-xs-2">
<label for="month" class="control-label">Year</label>
<select class="form-control select2" id="year" name="year" data-placeholder="Select a year">
<option value="2015">
xxx
</option>
...
</select>
</div>
<div class="col-xs-2">
<label for="manager" class="control-label">Manager</label>
<select class="form-control select2" id="manager" name="manager" data-placeholder="Select a manager" multiple="multiple">
<option value="2">
xxx
</option>
...
</select>
</div>
<div class="col-xs-2">
<label for="user" class="control-label">User</label>
<select class="form-control select2" id="user" name="user" data-placeholder="Select a user" multiple="multiple">
<option value="87">
xxx
</option>
...
</select>
</div>
</div>
I am using bootstrap 3 and it is strange, when I get a smaller window, the boxes overlap :(. You can see this in the image below.
How can I have bootstrap to make the different select get below each other when there is not enough space and in a line if there is enough space horizontally?
Use below CSS:
.select2{width:100%}
if this not working then you can use:
.select2{width:100% !important}
Related
Hi how i can change my text in option to a bit higher using css as is not in centre line
<div class="form-row">
<div class="col">
<label for="select-price-mode" class="col-form-label">Price Mode</label>
<select class="select-price-mode custom-select-sm col-10" id="select-price-mode" required>
<option selected disabled value="" >Select ....</option>
</select>
<div class="invalid-feedback">
Please select a valid price mode.
</div>
</div>
<div class="col">
<label for="select-payment-frequency" class="col-form-label">Payment Frequency</label>
<select class="select-payment-frequency custom-select-sm col-10" id="select-payment-frequency" required>
<option selected disabled value="">Select ....</option>
</select>
<div class="invalid-feedback">
Please select a valid payment frequency.
</div>
</div>
select{font-size: 30px;}
<div class="form-row">
<div class="col">
<label for="select-price-mode" class="col-form-label">Price Mode</label>
<select class="select-price-mode custom-select-sm col-10" id="select-price-mode" required>
<option selected disabled value="" >Select ....</option>
</select>
<div class="invalid-feedback">
Please select a valid price mode.
</div>
</div>
<div class="col">
<label for="select-payment-frequency" class="col-form-label">Payment Frequency</label>
<select class="select-payment-frequency custom-select-sm col-10" id="select-payment-frequency" required>
<option selected disabled value="">Select ....</option>
</select>
<div class="invalid-feedback">
Please select a valid payment frequency.
</div>
</div>
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>
I have a Bootstrap form to which I've applied form-inline and have several elements there. I've read that, until 768px, the elements are kept inline. But I found this to not be the case, if I assign input-lg to some elements, the last elements breaks at a new line even above 768px.
An alternative would be to make these elements SMALLER until 768px. Is there a way to do this?
Code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form class="form-inline">
<div class="form-group">
<input type="text" class="form-control input-lg" placeholder="Your Title">
</div>
<div class="form-group">
<input type="text" class="form-control input-lg" placeholder="Your Description">
</div>
</form>
<form class="form-horizontal">
<div class="row">
<div class="form-group col-sm-6">
<input type="text" class="form-control input-lg" placeholder="Your Title">
</div>
<div class="form-group col-sm-6">
<input type="text" class="form-control input-lg" placeholder="Your Description">
</div>
</div>
</form>
Use this to keep them on the same line above 768px.
If you want to keep the horizontal under 768px just change "col-sm-6" class to "col-xs-6" like this:
<form class="form-horizontal">
<div class="row">
<div class="form-group col-xs-6">
<input type="text" class="form-control input-lg" placeholder="Your Title">
</div>
<div class="form-group col-xs-6">
<input type="text" class="form-control input-lg" placeholder="Your Description">
</div>
</div>
</form>
Try to limit the width of the field with the max-width property.
Add the float: left; property to them so that they remain on one line.
Use the overflow: hidden; property to make the form a container of floating elements.
Please check te result: http://www.bootply.com/JXslxuh3qX
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.form-2-groups-on-one-line,
.form-4-groups-on-one-line {
clear: left;
overflow: hidden;
}
.form-2-groups-on-one-line .form-group {
float: left;
max-width: 50%;
}
.form-4-groups-on-one-line .form-group {
float: left;
max-width: 25%;
}
.form-2-groups-on-one-line input,
.form-2-groups-on-one-line select,
.form-4-groups-on-one-line input,
.form-4-groups-on-one-line select {
max-width: 100%;
}
<form class="form-inline form-2-groups-on-one-line">
<div class="form-group">
<input type="text" class="form-control input-lg" placeholder="Your Title">
</div>
<div class="form-group">
<input type="text" class="form-control input-lg" placeholder="Your Description">
</div>
</form>
<form class="form-inline form-4-groups-on-one-line">
<div class="form-group">
<input type="text" class="form-control input-lg" placeholder="Your Title">
</div>
<div class="form-group">
<select class="form-control input-lg">
<option value="0" selected="" disabled="">Choose Assignment Type</option>
<option value="1">Essay</option>
<option value="18">Admission / Scholarship Essay</option>
<option value="12">Research Paper</option>
<option value="26">Research Proposal</option>
<option value="4">Coursework</option>
<option value="2">Term paper</option>
<option value="5">Article</option>
<option value="22">Literature / Movie review</option>
<option value="9">Reports</option>
<option value="3">Dissertation</option>
<option value="29">Thesis</option>
<option value="30">Thesis Proposal</option>
<option value="13">Creative Writing</option>
<option value="11">Business Plan</option>
<option value="15">Speech / Presentation</option>
<option value="7">Outline</option>
<option value="14">Annotated Bibliography</option>
<option value="6">Dissertation Proposal</option>
<option value="17">Proofreading</option>
<option value="25">Paraphrasing</option>
<option value="28">PowerPoint Presentation</option>
<option value="27">Personal Statement</option>
<option value="24">Non-word Assignments</option>
<option value="23">Math Assignment</option>
<option value="21">Lab Report</option>
<option value="20">Code</option>
<option value="19">Case Study</option>
<option value="16">Other types</option>
</select>
</div>
<div class="form-group">
<input type="text" class="form-control input-lg mg-up1" placeholder="Your Email Address">
</div>
<div class="form-group mg-up">
<button type="submit" class="form-control input-lg">Check The Price</button>
</div>
</form>
Please see my updated example: http://www.bootply.com/paPWbTuwAL
I added bootstrap column classes to each of your form items so you have better control over their sizing, and added a little custom CSS
Hope this helps!
CSS
.custom-form .form-control{
width:100%;
}
HTML
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1 class="margin-bottom-30">Get Instant Essay Writing / Editing Help</h1>
</div> <!-- end col-xs-12 -->
</div> <!-- end row -->
<div class="row">
<form class="form-inline custom-form">
<div class="form-group col-xs-2">
<input type="text" class="form-control input-sm " placeholder="Your Title">
</div>
<div class="form-group col-xs-4">
<select class="form-control input-sm">
<option value="0" selected="" disabled="">Choose Assignment Type</option>
<option value="1">Essay</option>
<option value="18">Admission / Scholarship Essay</option>
<option value="12">Research Paper</option>
<option value="26">Research Proposal</option>
<option value="4">Coursework</option>
<option value="2">Term paper</option>
<option value="5">Article</option>
<option value="22">Literature / Movie review</option>
<option value="9">Reports</option>
<option value="3">Dissertation</option>
<option value="29">Thesis</option>
<option value="30">Thesis Proposal</option>
<option value="13">Creative Writing</option>
<option value="11">Business Plan</option>
<option value="15">Speech / Presentation</option>
<option value="7">Outline</option>
<option value="14">Annotated Bibliography</option>
<option value="6">Dissertation Proposal</option>
<option value="17">Proofreading</option>
<option value="25">Paraphrasing</option>
<option value="28">PowerPoint Presentation</option>
<option value="27">Personal Statement</option>
<option value="24">Non-word Assignments</option>
<option value="23">Math Assignment</option>
<option value="21">Lab Report</option>
<option value="20">Code</option>
<option value="19">Case Study</option>
<option value="16">Other types</option>
</select>
</div>
<div class="form-group col-xs-3">
<input type="text" class="form-control input-sm mg-up1 col-xs-3" placeholder="Your Email Address">
</div>
<div class="form-group col-xs-2 mg-up">
<button type="submit" class="form-control input-sm col-xs-3">Check The Price</button>
</div>
</form></div>
<div class="row">
<h3 class="margin-top-30">Over 7000 Writers and Editors Available 24/7 To Help You Out.</h3>
</div>
</div>
I am trying to make my form inline and also trying to reduce the the gutter width between elements in my form. What is the best approach for this?
Here my jsfiddle code and a sample below.
<form class="form-inline" role="form">
<div class="col-lg-3">
<input type="text" class="form-control" placeholder="Put something here">
</div>
<div class="col-lg-3">
<select class="form-control dropdown">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3t</option>
</select>
</div>
<div class="col-lg-3">
<select class="form-control dropdown">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="col-lg-3">
<button type="submit" class="btn btn-default">submit</button>
</div>
</form>
Your JSFiddle isn't including Bootstrap 3 correctly. Try Bootply.com
Here is the example I made, seems to be working fine http://bootply.com/108144#
In the inline forms the elements need to be wrapped in class="form-group", as far as I can see in the docs.
<form class="form-inline" role="form">
<div class="form-group">
<select class="form-control">
<option>Group 1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<select class="form-control">
<option>Group 2</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
I am having trouble implementing a form in Twitter Bootstrap2.
I've set up a JS Fiddle http://jsfiddle.net/manishap/WNSCW/15/
Here is the code:
<div class="container">
<div id="ratingSubectives" class="row-fluid">
<form class="well" >
<fieldset>
<div class="control-group span3">
<label class="control-label" for="select01">Aaaaaaaaaaaa</label>
<div class="controls"><select id="select01">
<option value=""></option>
<option value="A">A</option>
<option selected="selected" value="B">B</option>
<option value="C">C</option>
</select></div>
</div>
<div class="control-group span3">
<label class="control-label" for="select02">Bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</label>
<div class="controls"><select id="select02">
<option></option>
<option selected="selected" value="A">B</option>
<option value="B">B</option>
<option value="C">C</option>
</select></div>
</div>
<div class="control-group span3">
<label class="control-label" for="select03">Ccccccccccc</label>
<div class="controls"><select id="select03" disabled>
<option value="A">A</option>
<option value="B">B</option>
<option selected="selected" value="C">C</option>
</select></div>
</div>
<div class="control-group span3">
<label class="control-label" for="select03"> </label>
<div class="controls"><button type="submit" class="btn">Submit</button></div>
</div>
</fieldset>
</form>
</div>
I'm trying to place 3 select controls with labels horizontally across a div. It looks right in English with short labels. However, eventually this is a site that is delivered in multiple languages, and if the labels get long (as in the middle selector), the label text overlaps the text next to it. How do I get the text to wrap?
I tried adding a max-width: 100%, as per another answer and that didn't work. Maybe I put the labels in divs instead of label tags...
Thanks for any suggestions.
Use the word-wrap attribute to break the word:
.control-label {
word-wrap: break-word;
}