Using Bootstrap (v2.0.4), i'm trying to prepend an icon to a select list - I can't get the placement correct. I'm unable to update Bootstrap to a newer version at this stage, must use v2.0.4
I've looked through the docs but can't see any mention of it.
I have included my code snippet below and a link to a fiddle;
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.4/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.4/css/bootstrap-responsive.css" rel="stylesheet"/>
<hr>
<div class="control-group">
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-question-sign"></i></span> <select class="input-xlarge">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
</div>
<hr>
<div class="control-group">
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-envelope"></i></span><input type="text">
</div>
</div>
</div>
<hr>
You can give position absolute to you class add-on and make the parent class Relative. Just add the below css and it will work properly ;)
.input-prepend input, .input-append input, .input-prepend select,
.input-append select, .input-prepend .uneditable-input, .input-append
.uneditable-input {
padding-left: 30px;
}
span.add-on {
position: absolute;
left: 1px;
z-index: 9999;
}
.input-prepend {
position: relative;
}
Related
I need to put two select types side by side which re in different forms
Float and span are not working, I have also tried position-property but of no use.
Below is the HTML code,
form.aui .field-group {
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 4px 0 4px 145px;
position: fixed;
left: 50%;
margin: 1px 0;
width: 100%
}
<div class="xyz-page-panel">
<div class="xyz-page-panel-inner">
<section class="xyz-page-panel-content">
<div id="searchType">
<form class="xyz">
<div class="field-group">
<label for="one-two-id">Search Type </label>
<select name="searchType" class="select long-field" id="one-two-id">
<option value="one">one</option>
<option value="two">two</option>
</select>
</div>
</form>
</div>
<div>
<form class="xyz">
<div class="field-group">
<label for="search-options-id">Search field </label>
<select class="select long-field" id="productName">
<option value="one">one</option>
<option value="two">two</option>
</select>
</div>
</form>
</div>
</section>
</div>
</div>
By using
.xyz-page-panel-content {
display: flex;
}
It's important that you recognize the elements in your structure that are siblings. In your case it's
<div class="xyz-page-panel">
<div class="xyz-page-panel-inner">
<section class="xyz-page-panel-content">
<!-- sibling 1 -->
<div id="searchType">
<!-- ... -->
</div>
<!-- sibling 2 -->
<div>
<!-- ... -->
</div>
</section>
</div>
</div>
For display: flex to work, you must assign this rule to the parent element of those who are meant to be next to each other. If those are not siblings, you have to use some other strategy or change the HTML structure.
You could use float instead by floating the siblings. I don't like using float for layout purposes like these, so I don't show it in action.
.xyz-page-panel-content > * {
float: left ;
}
form.aui .field-group {
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 4px 0 4px 145px;
position: fixed;
left: 50%;
margin: 1px 0;
width: 100%
}
.xyz-page-panel-content {
display: flex;
}
<div class="xyz-page-panel">
<div class="xyz-page-panel-inner">
<section class="xyz-page-panel-content">
<div id="searchType">
<form class="xyz">
<div class="field-group">
<label for="one-two-id">Search Type </label>
<select name="searchType" class="select long-field" id="one-two-id">
<option value="one">one</option>
<option value="two">two</option>
</select>
</div>
</form>
</div>
<div>
<form class="xyz">
<div class="field-group">
<label for="search-options-id">Search field </label>
<select class="select long-field" id="productName">
<option value="one">one</option>
<option value="two">two</option>
</select>
</div>
</form>
</div>
</section>
</div>
</div>
Try to float the divs outside the form tags. This should work.
#searchType {
float:left;
}
Like this
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>
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.
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.
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;
}