I am using input group add-on at the front of the input box. While fixing it, the height of the add-on is getting little higher than the box. How to fix the addon to the size of input box?-
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
<i class="icon-home"></i>
</div>
<input class="form-control" type="text" placeholder=" ">
</div>
</div>
The default image used for the addon is having a bigger height. So, to match it with the input box I have changed the same image into an appropriate size.
Use this image in its place http://i.imgur.com/sCrdOXO.png
Check the FIDDLE
Work with the code in the following way:
.icon-home {
background:url('http://i.imgur.com/sCrdOXO.png') no-repeat;
width:23px;
height:22px;
display:block;
}
.input-group-addon {
display:block;
float:left;
}
#input_css {
display: inline;
margin-top:0px;
}
Hope this answers your question
Related
Basically I have a couple of input fields which have a span prepended with some text. When I try to set col-lg-4 and col-lg-8 on the input-group-addon and the input field itself, it doesn't do what I expected it to do and resize them.
<div class="input-group">
<span class="input-group-addon">some text</span>
<input type="text" class="form-control" id="current_pwd" name="current_pwd" />
</div>
Can anyone help me getting the input-group-addon get the same size?
I've created a fiddle here: http://jsfiddle.net/Dzhz4/ that explains my problem.
Anyone that can shed some light please?
try this
http://jsfiddle.net/Dzhz4/1/
.input-group-addon {
min-width:300px;// if you want width please write here //
text-align:left;
}
.input-group-addon { width: 50px; } // Or whatever width you want
.input-group { width: 100%; }
The first part sets the width of your addons, the second forces the inputs to take up all of their parent container.
I would like to make the login and password field in thesame order. when i try to change order in css file with margin command, it moves both field.
Try something like this. There are many way to do it, but this is the most straighforward.
http://jsfiddle.net/QutGz/1/
dunno want is going on width the fiddle. You can accomplish evening out the "columns" like this:
label
{
float:left;
width: 100px;
}
input
{
float:left;
}
Set the width to something that will be larger than the largest label text.
You can use CSS float to fix the inputs position in relation to each other and their parents elements:
See this working Fiddle example!
Assuming a structure like:
<form method="post" action="#">
<div class="clear">
<label>KULLANICI ADI</label>
<input type="text" value="" name="foo">
</div>
<div class="clear">
<label>SIFRE</label>
<input type="text" value="" name="bar">
</div>
</form>
The CSS solution would be:
input[type="text"] {
float: right;
}
.clear {
clear:both;
}
The bootstrap examples for the navbar search form have just a text box.
I'd like to be able to add a search icon at the beginning, like Twitter does on their search box. How can I do this with bootstrap?
Here's what I've tried so far but it's failing:
http://jsfiddle.net/C4ZY3/3/
Here's how to use the :before pseudo selector and glyphicons for Bootstrap 2.3.2 instead of a background image on the input.
Here's a couple of simple examples: http://jsfiddle.net/qdGZy/
<style type="text/css">
input.search-query {
padding-left:26px;
}
form.form-search {
position: relative;
}
form.form-search:before {
content:'';
display: block;
width: 14px;
height: 14px;
background-image: url(http://getbootstrap.com/2.3.2/assets/img/glyphicons-halflings.png);
background-position: -48px 0;
position: absolute;
top:8px;
left:8px;
opacity: .5;
z-index: 1000;
}
</style>
<form class="form-search form-inline">
<input type="text" class="search-query" placeholder="Search..." />
</form>
Update For Bootstrap 3.0.0
Here's an updated fiddle for bootstrap 3.0: http://jsfiddle.net/66Ynx/
One of the way to do it is to add left padding to the field and add background image for the field.
See example: http://jsfiddle.net/hYAEQ/
It's not exact way twitter.com do it, they used absolute position element above search field because they have all images in the single sprite, and can't easily use them as backgrounds, but it should do.
I used inline image for a background to make it easier to post it to jsfiddle, but feel free to use normal links to images here.
EDIT: The way to do it using bootstrap sprite and additional container for icon
http://jsfiddle.net/hYAEQ/2/
EDIT 2:
Fix for white bootstrap theme: http://jsfiddle.net/hYAEQ/273/
EDIT 3:
If you are using navbar-inverse (black navbar) you will want this minor tweak: http://jsfiddle.net/hYAEQ/410/
.navbar-search .search-query {
padding-left: 29px !important;
}
Play this fiddle, I put some rosin on the bow for you:
http://jsfiddle.net/pYRbm/
.fornav {
position:relative;
margin-left:-22px;
top:-3px;
z-index:2;
}
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<form class="navbar-search">
<div class="input-append">
<input type="text" class="search-query span2" placeholder="Search…"><span class="fornav"><i class="icon-search"></i></span>
</div>
</form>
</div>
</div>
</div>
You can also not touch the css at all by using prepending form inputs like so
<form class="navbar-search">
<div class="input-prepend">
<span class="add-on"><i class="icon-search"></i></span><input name="url" type="text" class="span2" placeholder="Page Url">
</div>
</form>
Note that whitespace between </span> and <input> will create a gap between the icon and the text box.
In bootstrap 3.x.x
<div class="input-group">
<input type="text" class="form-control" id="search">
<span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
</div>
The new version 2.1.1 fixes the problem. It doesn't handle the case of the 15 pixel radius, so I went ahead and styled it accordingly. I also added navbar-inverse for fun.
A couple of caveats. The CSS can be better optimized, but recently I've been spoiled by less. Finally, there's an ever so slight, barely visible, left border to the left of the magnifying glass. I don't know exactly what's causing it, but it is likely the box shadow.
Please feel free to fork and improve.
http://jsfiddle.net/joelrodgers/hYAEQ/333/
For those using Rails, my solution is not the most beautiful but works.
<%= form_tag PATH_TO_MODEL, :method => 'get', :class => "navbar-search" do %>
<%= text_field_tag :search, params[:search], :class => "search-query",
:style => "padding-left:29px" %>
<div class="icon-search" style="position:absolute;top:7px;left:11px;"></div>
<% end %>
Bit late to the party on this one ...
I used the following to achieve the search input as an icon
<div class="input-append">
<input id="appendedInputButton" class="span6" type="text" placeholder="Search...">
<button class="btn" type="button"><i class="icon-search"></i></button>
</div>
You should change your approach. Use span.search-query as an overlay - here you have the most important things:
.navbar-search { position: relative } /* wrapper */
.search-query { position: absolute; left: 0; top: 0; z-index: 2; width: x } /* icon */
.span3 { position: relative; z-index: 1; padding-left: x } /* input */
How can I align button right next to my input text. Example here
HTML
<div id="frm">
<label>Select an Item:
<input type="text" /><input type="button" value="..." class="open">
</label>
<label>Price:<input type="text" /></label>
CSS
#frm label
{
display:block;
float:left;
padding-right:6px;
}
#frm input
{
display:block;
}
Edit
I want my form elements horizontally aligned in blocks & I like the popup button to align with just one textbox.
I'd suggest to move the <input> outside the <label>, like this:
<div id="frm">
<div class="group">
<label for="item">Select an Item:</label>
<input type="text" id="item" />
<input type="button" value="..." class="open">
</div>
<div class="group">
<label for="price">Price:</label>
<input type="text" id="price" />
</div>
</div>
If you want to separate the inputs from the label, you should place the label text inside an own element, and not mix label text and input into a common tag.
Then, you can use the following CSS:
#frm .group {
display: block;
float: left;
padding-right: 6px;
}
#frm label {
display:block;
}
See how it looks like, is this what you want?
-Easiest way to solve your problem, is to remove all CSS - input is inline by default, so it won't wrap to the next line if you add no CSS.
-And I'd add an extra div to make sure your fields are on seperate lines, no CSS needed either.
Like this:
<div id="frm">
<div class="field">
<label>Select an Item:</label>
<input type="text"><input type="button" value="..." class="open">
</div>
<div class="field">
<label>Price:</label>
<input type="text">
</div>
</div>
http://jsfiddle.net/ckfZE/15/
http://jsfiddle.net/ckfZE/18/
added a span-tag though
This CSS is causing that conflict:
#frm input {
display:block;
}
You could set .open to display:inline to fix this.
Be a little more specific with your question. If you took the CSS out completely they would be aligned right next to each other. If you want them on separate lines add a <br/> after the text input.
I am having trouble rendering this correctly in firefox. It renders nicely in chrome and in safari.
<div style="" id="login_inline">
<form accept-charset="utf-8" action="/users/login" method="post" id="UserLoginForm">
<div style="display:none;">
<input type="hidden" value="POST" name="_method">
</div>
<input type="text" id="UserDummyEmail" tabindex="1" value="Email" name="data[User][dummyEmail]" style="display: block;">
<input type="text" id="UserDummyPassword" tabindex="2" value="Password" name="data[User][dummyPassword]" style="display: block;">
<input type="text" id="UserEmail" maxlength="255" tabindex="3" name="data[User][email]">
<input type="password" id="UserPassword" tabindex="4" name="data[User][password]">
<div class="submit">
<input type="submit" value="Login">
</div>
</form>
</div>
CSS:
#login_inline {
position:absolute;
right:10px;
top:30px;
width:420px;
}
.submit {
display:inline;
position:absolute;
left:360px;
}
#UserPassword {
position:absolute;
left: 185px;
}
#UserDummyPassword {
position:absolute;
left:185px;
z-index:1;
color:gray;
}
#UserDummyEmail {
position:absolute;
left:10px;
z-index:1;
color:gray;
}
#UserEmail {
position:absolute;
left:10px;
}
Firefox rendering:
Chrome rendering:
EDIT: Live example (Correct rendering)
By positioning absolute you become dependent on correct width of the input elements. This is difficult to do cross-browser because browsers tend to use custom or native elements that don't style consistently. You're better off with an inline-block or floated layout that handles inconsistent width.
If you really have to do it that way there are some hacks using css3 box-sizing property and/or manually tuning properties like line-height and font size and padding to get all browsers to agree on input sizing but that's harder than it sounds.
This question has some info on box-sizing and using percentage/auto width to get consistency: input with display:block is not a block, why not?
EDIT: Based on your comment above you may need to set up some div wrappers to set the size/position of both the hidden and visible elements and then use percentage widths and box-sizing as explained.
<div class="input_wrapper" style="width:100px;position:relative">
<input style="width:100%;box-sizing:border-box;position:absolute">
<div class="fake_input" style="width:100%;position:absolute">
</div>
The key to it all is that box-sizing:border-box is less susceptible to browser differences in padding and border calculations on form inputs.
I found it that usually it is good to put a font-size on input fields, this will make the size of them (more) consistent