Add text to bootstrap select input in same line - html

I'm trying to add an asterisk to the select input field, I can easily do if I give the my css but my condition is to use bootstrap 3.3.7 or lesser version and display the asterisk on the same line screenshot.
<style>
.asterik-span{
color: red; font-family: bold; font-size: 16px;
}
.select-diag{
width:90%;border:1px solid #ddd; border-radius:3px;height:32px;
}
</style>
html
<select class="select-diag">
<option >Value1</option>
<option >Value2</option>
<option >Value3</option>
</select>
<span class='pull-right asterik-span'>*</span>
Jsfiddle

To use bootstrap only you can do this
<div class="input-group">
<select class="form-control">
<option>Value1</option>
<option>Value2</option>
<option>Value3</option>
</select>
<div class="input-group-addon">
<span class='asterik-span'>*</span>
</div>
</div>

Related

Display div elements in one line

I have three elements in my div dropdown list, input date and button they are all in on div , i want all of them to be in the same line , not under each other
<div id="cont">
Status :
<select id="dropdown">
<option value="Approved">Approved</option>
<option value="Rejected">Rejected</option>
<option value="Pending">Pending</option>
<option value="Error">Error</option>
</select>
<!-- Date Picker -->
<p>Date:
<input type="text" id="datepicker">
</p>
<button type="submit" id="searchBtn" value="">Search</button>
</div>
Use CSS with display: inline-block
.inline {
display: inline-block;
}
<div id="cont">
Status:
<select id="dropdown" class="inline">
<option value="Approved">Approved</option>
<option value="Rejected">Rejected</option>
<option value="Pending">Pending</option>
<option value="Error">Error</option>
</select>
<!-- Date Picker -->
<p class="inline">Date:
<input type="text" id="datepicker">
</p>
<button type="submit" id="searchBtn" value="" class="inline">Search</button>
</div>
Although the above works, it's better practice to put the specific elements in a span tag. Like so ...
.inline {
display: inline-block;
}
<div id="cont">
<span class="inline">Status:
<select id="dropdown">
<option value="Approved">Approved</option>
<option value="Rejected">Rejected</option>
<option value="Pending">Pending</option>
<option value="Error">Error</option>
</select>
</span>
<!-- Date Picker -->
<span class="inline">
<p>Date: <input type="text" id="datepicker"></p>
</span>
<span class="inline">
<button type="submit" id="searchBtn" value="">Search</button>
</span>
</div>
You can add the display: inline-block property to the divs. This will make them get rendered inline with the content, but they keep their block properties, so you can still set their width and height for example.
Example:
.inline {
display: inline-block;
width: 50px;
height: 20px;
}
#red {
background-color: red;
}
#green {
background-color: green;
}
#blue {
background-color: blue;
}
<div class="inline" id="red"></div>
<div class="inline" id="blue"></div>
<div class="inline" id="green"></div>
My favourite tutorial site about the topic: http://learnlayout.com/inline-block.html
This can be used for every element, which supports the display property. Some elements are even set to this by default, like the span element.
https://jsfiddle.net/v9qxobaf/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<style media="screen">
#cont {
margin-left: -20px;
}
.status, .date, .button {
float: left;
padding-left: 20px;
}
</style>
<body>
<div id="cont">
<div class="status">
<label>Status: </label>
<select id="dropdown">
<option value="Approved">Approved</option>
<option value="Rejected">Rejected</option>
<option value="Pending">Pending</option>
<option value="Error">Error</option>
</select>
</div>
<div class="date">
<!-- Date Picker -->
<span> Date: <input type="text" id="datepicker"></span>
</div>
<div class="button">
<button type="submit" id="searchBtn" value="">Search</button>
</div>
</div>
</body>
</html>
wrap each in a div and display: inline-block.

How to increase width of select box arrow?

I want to increase the width of select box arrow like fa fa caret. i am not getting it how to do. I used img tag inside the each field and given position absolute and adjusted with left top properties but i think this is not proper way of doing this and even i click on the image arrow not select options are opening so i removed this. Please tell me proper solution for it.
.search-categories{
background: #E40444 !important;
color: #fff !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<style type="text/css">
</style>
<div class="col-md-12 ">
<div class="row">
<form action="#" method="get" id="search_mini_form">
<div class="col-sm-offset-2 col-sm-2 catnames">
<select name="cat" class="form-control search-categories">
<option>Categories</option>
<option value="3">abcd</option>
<option value="4">abcd</option>
<option value="5">abcd</option>
</select>
</div>
<div class="col-sm-2 catnames catnames-arrow ">
<select name="cat" class="form-control search-categories search-Hourly">
<option>Hourly</option>
<option value="3">abcd</option>
<option value="4">abcd</option>
<option value="5">abcd</option>
</select>
</div>
<div class="col-sm-4 catquery ">
<div class="input-group">
<input type="search" class="form-control " name="q" id="location" value="" maxlength="128" placeholder="Search Place..." autocomplete="off" />
<div class="input-group-addon catsubmit"><i class="fa fa-search"></i></div>
</div>
</div>
<div id="search_autocomplete" class="search-autocomplete"></div>
</form>
</div>
</div>
You can use the css triangle to make the arrow.
HTML
<div class="selectwrap">
<select>
<option>Option 1</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>
CSS
select {
border: 1px solid #ccc;
height: 34px;
width: 250px;
padding: 6px 12px;
line-height: 1.42857143;
}
.selectwrap {
position: relative;
float: left;
}
.selectwrap:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #000;
right: 4px;
top: 14px;
pointer-events: none;
}
It's very complicated to style form elements cross-browser because very browser has different look for form elements (especially checkbox, radio, select, progress).
I suggest using some plugin like select2 so you can easily style very element browser-independent.
$(document).ready(function() {
$('select').select2({
width: '200px'
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://select2.github.io/select2/select2-3.5.3/select2.css" rel="stylesheet" />
<script src="http://select2.github.io/select2/select2-3.5.3/select2.js"></script>
<select>
<option>Op 1</option>
<option>Op 2</option>
<option>Op 3</option>
<option>Op 4</option>
</select>
better use some select element customisation plugin like select2, selectize. The appearance that these plugins create can be customised through css.
You cannot fully control the appearance of select element in cross browser manner with css alone.

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>

Hide text after div using css

Here is my Div:
<div id="show" class="dataTables_length">
Show
<select size="1" name="show_length">
<option value="10" selected="selected">10</option>
<option value="20">25</option>
<option value="30">50</option>
<option value="40">100</option>
</select>
entries
</div>
I want to hide this show and entries text how should I hide this using css? Not using javascript or jquery.
.someClass {
display: none;
}
Tried this? I am sure this would do it!
Where it would be this:
<span class="someClass">Show</span>
<!-- select statement here -->
<span class="someClass">Enteries</span>
I thought you wanted to hide whole of it!
Try this:
<div id="show" class="dataTables_length">
<span class="hidden">Show</span>
<select size="1" name="show_length">
<option value="10" selected="selected">10</option>
<option value="20">25</option>
<option value="30">50</option>
<option value="40">100</option>
</select>
<span class="hidden">entries</span>
</div>
With CSS:
span.hidden {
display: none;
}
Despite so many answers and comments, you don't seem to be ready to accept the fact that the text needs to be wrapped in span. And that too using only css!
So, you can do a faux hide like this: http://jsfiddle.net/abhitalks/R7Yt4/1/
CSS:
div#show {
background-color: #ccc;
color: #ccc;
}
div#show::selection {
color: #ccc;
}
div#show > select {
color: #fff;
}
You can warp a span around the items you want to hide, and the hide this.
For example
<span class="hide">Show</span>
and css:
.hide{display:none;}
Your full html will look like this:
<div id="show" class="dataTables_length">
<span class="hide">Show</span>
<select size="1" name="show_length">
<option value="10" selected="selected">10</option>
<option value="20">25</option>
<option value="30">50</option>
<option value="40">100</option>
</select>
<span class="hide">entries</span>
</div>
<div id="show" class="dataTables_length">
<span style="visibility:hidden">Show </span>
<select size="1" name="show_length">
<option value="10" selected="selected">10</option>
<option value="20">25</option>
<option value="30">50</option>
<option value="40">100</option>
</select>
<span style="visibility:hidden"> entries </span>
</div>

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;
}