Make a text and select dropdown horizontal - html

I am trying to make a text like label and select dropdown in the same line.
When I use display: inline for both divs it works. But when I use form-control class in select it breaks. Here is the example
Here is the code
<div class="col-md-2">
<div> <span>test</span></div>
<div>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
I want to make it in same line.

Add display: flex for container.
.flex {
/* become a flex container */
/* its children will be flex-items */
display: flex;
/* align items on font's baseline */
align-items: baseline;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-2 flex">
<div><span>test</span></div>
<div>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>

You can use flex on the container to make it's decendants become flex-items, align-items: center to center them, and have a margin-right on the label to have a nice spacing between it and the select element.
.input-container {
display: flex;
align-items: center;
}
.input-label {
margin-right: 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-2 input-container">
<label class="input-label">test</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>

When you use Bootstrap, always think in a Bootstrap way: I mean use its grid layout philosophy.
So you can wrap those 2 <div>s within a .row, and then use the predefined columns you need according to the available breakpoints you want. This procedure should solve your problem:
<div class="row">
<div class="col-your_break_point_unit">
<!-- your text here -->
</div>
<div class="col-your_break_point_unit">
<select>
<!-- your select options here -->
</select>
</div>
</div>

<div class="form-horizontal">
<label>Country</label>
<select>
<option>Nepal</option>
<option>India</option>
<option>China</option>
</select>
Note: form-horizontal class of bootstrap will keep both in the same line.

Related

Moving elements of a div to the right

I have a simple parent div element containing multiple child div elements. When the page is loaded, these div elements are displayed on the left. I would like to display these items on the right. How can I achieve this?
Currently, my page elements look like this:
If I try style="float:right", I am getting compressed elements:
Here is the html code:
<div class="row">
<div class="col-md-2" style="text-wrap:none; width:11%">
<label>Requests Per Page: </label>
</div>
<div class="col-md-1" style="text-wrap:none">
<select id="RecordsPerPage">
<option value="10">10</option>
<option value="25" selected="selected">25</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="150">150</option>
<option value="200">200</option>
<option value="250">250</option>
</select>
</div>
<div class="col-md-3" style="text-wrap:none">
Go to Page #:
<input type="number" id="UserPageNumber" min="1" size="5" style="width:50px;" value="1" max="87">
of <span id="spTotalPages">87</span>
<button id="btnPage" onclick="handlePaging();">GO</button>
</div>
</div>
Add class justify-content-end to row element
<div class="row align-items-end">
I also recomend using bootstrap utility classes instead of inline styles. Here is your example - little adjusted: https://www.bootply.com/k7mrP9fHPz
Assumed you are using current version of Boostrap - v4

Responsive table-like design

In a form four properties have to be set by the user. I chose a table like layout:
This layout, however, makes problems on smaller screens. In this case, I would like to have:
and on very small screens:
Any idea? I am using HTML5, CSS3, jQuery 3.3.1 and bootstrap 2.
If I understand it right, you intend use table to make your form stay in a good layout.
it's not recommended this way because you can't rearrange the cell in a table freely. Or should I say, don't use table to make a responsive layout.
Bootstrap grid system is responsive by default so you should make use of it.
https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
In your case, you can put your element in four div tag like this
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-3">
<!-- your first element -->
</div>
<div class="col-xs-12 col-sm-6 col-lg-3">
<!-- your second element -->
</div>
<div class="col-xs-12 col-sm-6 col-lg-3">
<!-- your third element -->
</div>
<div class="col-xs-12 col-sm-6 col-lg-3">
<!-- your fourth element -->
</div>
</div>
</div>
I solved my problem with flexbox:
Here my CSS:
.flex-container {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.flex-container > div {
margin: 1px;
}
.flex-container > .label {
padding-left: 8px;
width: 20%;
min-width: 100px;
}
.flex-container > .value {
vertical-align: middle;
}
.line-break {
width: 100%;
}
.cond-line-break {
width: 100%;
display: none;
}
#media screen and (max-width: 720px) {
.cond-line-break {
display: inline;
}
}
#media screen and (max-width: 360px) {
.cond-line-break {
display: inline;
}
.flex-container > .label {
width: 100%;
}
}
and my HTML:
<div class="flex-container">
<div class="label">Property 1:</div>
<div class="value">
<select>
<option selected="selected">Value 1</option>
<option>Value 2</option>
<option>Value 3</option>
<option>Value 4</option>
</select>
</div>
<div class="cond-line-break"></div>
<div class="label">Enter Property 2 here:</div>
<div class="value">
<select>
<option>Value 1</option>
<option selected="selected">Value 2</option>
<option>Value 3</option>
<option>Value 4</option>
</select>
</div>
<div class="line-break"></div>
<div class="label">Property 3:</div>
<div class="value">
<select>
<option>Value 1</option>
<option>Value 2</option>
<option selected="selected">Value 3</option>
<option>Value 4</option>
</select>
</div>
<div class="cond-line-break"></div>
<div class="label">Property 4:</div>
<div class="value">
<select>
<option>Value 1</option>
<option>Value 2</option>
<option>Value 3</option>
<option selected="selected">Value 4</option>
</select>
</div>
</div>
It works as intended, even with labels of different length.

How do I put space between top of all elements inside a div?

Let's assume I have a HTML like this:
<div id='main'>
<select name='foo'>
<option>A</option>
<option>B</option>
</select>
<br>
<select name='baa'>
<option>C</option>
<option>D</option>
</select>
<br>
</div>
I'm looking for a CSS rule to make a space between top of these elements, like I had a margin-top: 10px; on every element in main div. How can I make this? Searching I found this solution:
border-collapse: separate;
border-spacing: 0 1em;
But it didn't work in the way I described.
It looks like using a css universal selector will do the trick:
#main *{ /* see the asterisk in the selector here, that's what you're after*/
margin-top: 10px;
}
<div id='main'>
<select name='foo'>
<option>A</option>
<option>B</option>
</select>
<br>
<select name='baa'>
<option>C</option>
<option>D</option>
</select>
<br>
</div>
Give your select a class, then add a margin to the class.
Like this:
.center {
text-align: center;
color: red;
margin-top: 10px
}
<div id='main'>
<select name='foo' class="center">
<option>A</option>
<option>B</option>
</select>
<br>
<select name='baa' class="center">
<option>C</option>
<option>D</option>
</select>
<br>
</div>

How to make Dropsdownlist + text inline under 768px?

I'm trying to make my dropdownlists I have created to be on the same line under 768px.
Right now, I'm using the form-inline, but that only works over 768px and not under.
Can any tell me how this can be done? Have tried with a list, but that did not work well.
As you can see in the fiddle, I want some text over each dropdownlist. I know i'm not using an label, cause this makes
My Jsfiddle
<div class="col-xs-12">
<div class="form-inline">
<div class="form-group">
Adult<br />
<select class="dropdown" id="Dropdown-adult">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="form-group">
Child (3-15)<br />
<select class="dropdown" id="Dropdown-child">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="form-group">
Infant (0-3)<br />
<select class="dropdown" id="Dropdown-infant">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="form-group">
Pet<br />
<select class="dropdown" id="Dropdown-pet">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
</div>
</div>
<div class="form-group">
<div class="padding-top15">
<button type="submit" class="bookingbutton">BOOK NOW</button>
</div>
</div>
</div>
Hope someone can tell me what I should look at.
Updated:
I think you guys have misunderstood what I was trying to tell. Right now when viewing the page over 768px the dropdownlists are inline as they should be.
If the webpage goes under 768px, all the dropdownlists going out of the inline, which it should not do. I just want to use 2 lines instead of 5-8
I just want it to look the same as it does over 768px. I have uploaded the image of how it should look like under 768px.
It's because Bootstrap add classes to make a responsive grid. If you want your lists to be always on the same line just add this in you css:
.form-group{
display:inline-block
}
JS Fiddle: https://jsfiddle.net/f8gfa768/1/
If I understood you correctly, you want to achieve under 768px width:
[text] [dropdown] <!-- new line -->
[text] [dropdown] <!-- new line -->
[text] [dropdown] <!-- new line -->
[text] [dropdown] <!-- new line -->
Those br tags are messing up your styles. Why don't you remove them, and add display: block/inline-block styles to select element, depending on the window width, which will replace that br:
select{
display: inline-block;
}
#media (min-width: 768px){
select{
display: block;
}
}
#Dropdown-adult {
height: 30px;
font-size: 15px;
width: 45px;
}
#Dropdown-child {
height: 30px;
font-size: 15px;
width: 80px;
}
#Dropdown-infant {
height: 30px;
font-size: 15px;
width: 80px;
}
#Dropdown-pet {
height: 30px;
font-size: 15px;
width: 45px;
}
#Dropdown-vehicles {
max-width: 100%;
height: 30px;
width: 100%;
font-size: 15px;
}
.bookingbutton {
background-color: #F6861F;
border-style: none;
height: 30px;
width: 110px;
color: white;
font-size: 15px;
text-align: center;
font-weight: bold;
font-family: 'Open Sans', sans-serif;
}
.padding-top15 {
padding-top: 15px;
}
select{
display: inline-block;
}
#media (min-width: 768px){
select{
display: block;
}
}
<div class="col-xs-12">
<div class="form-inline">
<div class="form-group">
Adult
<select class="dropdown" id="Dropdown-adult">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="form-group">
Child (3-15)
<select class="dropdown" id="Dropdown-child">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="form-group">
Infant (0-3)
<select class="dropdown" id="Dropdown-infant">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="form-group">
Pet
<select class="dropdown" id="Dropdown-pet">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
</div>
</div>
<div class="form-group">
<div class="padding-top15">
<button type="submit" class="bookingbutton">BOOK NOW</button>
</div>
</div>
</div>
JSFiddle

Bootstrap 3: how to create an inline form with selects and labels?

My labels keep appearing above the selects. I want them all on the same line. Pls see the jsfiddle: http://jsfiddle.net/jjgelinas77/9nL9x/
<div class="well well-sm">
<form name="myForm" role="form" novalidate="novalidate" class="form-inline">
<div class="form-group">
<label>C-Band</label>
<select id="cband" class="form-control">
<option value="C15+">C15+</option>
<option value="C12-14">C12-14</option>
<option value="Other">Other</option>
</select>
</div>
<div class="form-group">
<label>C-Band</label>
<select ng-model="form.cband2" id="cband2" class="form-control">
<option value="C15+">C15+</option>
<option value="C12-14">C12-14</option>
<option value="Other">Other</option>
</select>
</div>
<button class="btn btn-primary">Filter</button>
</form>
</div>
There's a CSS rule in bootstrap that sets the width of .form-control to 100% on small screen sizes. So even when it's floated, it will take the whole width and therefore start on a new line. Good news is you only need a couple lines of CSS to override it:
.form-control {
width:auto;
display:inline-block;
}
Hope this simplifies the problem for anyone still facing the issue! http://jsfiddle.net/c3m77ah6/2/
You have to wrap your label around the select. Like this:
<div class="form-group">
<label>C-Band
<select id="cband" class="form-control">
<option value="C15+">C15+</option>
<option value="C12-14">C12-14</option>
<option value="Other">Other</option>
</select>
</label>
</div>
And then add the following CSS:
.form-group label {
float: left;
text-align: left;
font-weight: normal;
}
.form-group select {
display: inline-block;
width: auto;
vertical-align: middle;
}
Here is your updated fiddle: Updated Fiddle
form-inline class with form-group will do the job like
<div class="form-group form-inline">
<label for="sel1">My InlineSelect: </label>
<select class="form-control" id="rotit">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
</select>
</div>
demo : http://jsfiddle.net/9arahevn/2/
This problem is so recorrent that there is a Github project solving it
https://fk.github.io/select2-bootstrap-css/
Place their CSS file right after the CSS from Select2
<link rel="stylesheet" href="css/select2.min.css">
<link rel="stylesheet" href="css/select2-bootstrap.css">
Then you can use the label along with the select
<div class="form-group">
<label for="sName">Select Title</label>
<select class="js-example-basic-single form-control" id="sName">
</select>
</div>
It does work if you use the latest bootstrap:
#import url('http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css');
And please DON'T FORGET to make the column with result more than 768px. Form-inline works only if screen with more than 768px. (Just drag the column with a mouse a bit)
The issue was with css for
#media (min-width: 768px)
.form-inline .form-control {
//old bootstrap
display: inline-block;
// new bootstrap
display: inline-block;
width: auto;
vertical-align: middle;
}