Sort of a weird problem. I'm following this section exactly but having a little trouble. When the button is aligned to the left of the field they align perfectly but when the button is aligned to the right (which I think of as more natural for a "submit" type behavior) there is about 5-10px of padding on top of the button that I can't get rid of:
My code is below:
<div class="col-sm-7">
<h3>Get the latest Amazon News first:</h3>
<div class="input-group">
<input type="text" class="form-control" placeholder="E-mail" />
<span class="input-group-btn">
<button class="btn btn-default btn-group" type="submit">Sign Up</button>
</span>
</div><!-- /input-group -->
</div><!-- /col-7 -->
<div class="col-sm-5">
<h3>Get Started Now:</h3>
<a class="btn btn-large btn-primary" href="#"><i class="icon-caret-right icon-space-right"></i>Start a Free Trial!</a>
</div>
I'm pretty confused why it would work on one side and not the other. Any help would be appreciated!
Something seems to be wrong if you have written any of your custom css. I just copied your html and created a pen using bootstrap cdn css hosted files. Check this pen/demo.
It's because somehow you are adding break tag i.e. above and below of your button element. just remove those breaks.
Related
I have a button called Delete next to a link inside a DIV per list item. To confirm I have another button that should appear next to called Confirm Delete. When that is clicked it is posted back to server. The Delete appears correctly but the confirm drops down to the next line instead of appearing on the same line.
Source:
<ul>
<li>
<div style="font-size: x-large;">
<a href="/item/detail/123>Rearden Steel</a>
</div>
<button type="button" name="delete" value="Delete" onclick="ShowDeleteButton('Delete123', this);" class="btn btn-default btn-primary disableOnClickSubmit">Delete</button>
<span id="Delete123" style="display: none;">
<form action="/item/ItemDelete" method="post">
<input id="id" name="id" type="hidden" value="123" />
<button type="submit" name="deleteConfirm" value="DeleteConfirm" class="btn btn-default disableOnClickSubmit">Confirm Delete</button>
</form>
</span>
</li>
<li> ... </li>
<ul>
What style do I need to apply to have the confirm Delete button appear on the same line as the link and Delete button?
I'm using Bootstrap 3.
Bootply Example: http://www.bootply.com/VsU984gbLs
You just need to do either of these to make <li> come in the same line.
display: inline-block: You should ensure you have no space character between <li>s.
float: left: You should ensure to clear the floats.
Remember the caveats above. Since you are using Bootstrap, you may use the utility class: pull-left or pull-right. The best thing is to make sure the pattern you want is already present in the framework and use the mark-up instead of creating your own styles.
I'm having trouble getting a glyphicon-search button to line up in bootstrap.
This is not a unique problem, I found this question that asks a similar thing, except the accepted and celebrated answer isn't working for me. Just like the answer, I have a div input group wrapper that should line up the field, but it isn't working, as you can see in my jsfiddle:
http://jsfiddle.net/pk84s94t/
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default glyphicon glyphicon-search input-sm" type="submit"></button>
</span>
<input type="text" class="form-control input-sm">
</div>
http://jsfiddle.net/kv8n7n5g/
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="glyphicon glyphicon-search"></i></button>
</span>
<input type="text" class="form-control" placeholder="Search">
</div>
You had the glyphicon classes inside the button tag.
If that doesn't work you may have to change the line-height of the icon to 1. I was using ionicons and the 1.4... line-height was throwing everything off.
That's interesting. I've never tried using a button with an input group like that, and I'm not sure why that behavior is occuring. Seems to be an easy fix though.
I added top:0 to the existing rule .input-group-btn>.btn which already had position: relative; ...
http://jsfiddle.net/pk84s94t/1/
EDIT
While this does fix the behavior, Rachel S's answer is a better solution as it's not changing CSS rules, but using proper HTML within bootstrap to fix the problem.
The problem you are having is due to the glyphicon button default size in bootstrap. But if you put some text in the button it aligns perfectly as now the button for the text is given more priority than the glyphicon's default. For the text I used  . It works fine now.
<div class="input-group">
<input class="form-control" type="text">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span> 
</button>
</span>
</div>
In the Bootstrap Jumbotron example, the username, password and sign in button are spaced without the aid of JavaScript (I disabled JS in both and refreshed), margin, padding, etc. How are these elements spaced? div.form-group specifically is a mystery to me. I have tried to mimic the code myself. I'm using Bootstrap's CSS and JS. In my HTML I have no space between the the three elements. After disabling JS, and trying various styles I cannot explain how the spacing in the Bootstrap Jumbotron example is achieved. Besides the difference in spacing my elements have a slightly different size. My password input is 160px wide with 12px of padding and 1px of border, while the proper Jumbotron example is 170px wide. Both computed widths are auto. How can I get spacing between email, password, and the sign in button like in the Bootstrap example cited?
There is a similar but different question, of how to get it to work differently than in the example by Bootstrap.
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="email" class="form-control"></div>
<div class="form-group"><input type="password" placeholder="password" class="form-control"></div>
<button type="success" class="btn btn-success">Sign In</button>
</form>
Here is the whole page:
<!DOCTYPE html><html><head><title>Foodle Bardle</title><link rel="stylesheet" href="/stylesheets/bootstrap.css"><link rel="stylesheet" href="/stylesheets/bootstrap-theme.css"><link rel="stylesheet" href="/stylesheets/style.css"><script type="text/javascript" src="/javascripts/jquery.min.js"></script><script type="text/javascript" src="/javascripts/bootstrap.min.js"></script></head><body><nav class="navbar navbar-inverse navbar-fixed-bar" aria-expanded="false" aria-controls="navbar" data-toggle="collapse" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>Foodle Bardle</div><div id="navbar" aria-expanded="true" class="navbar-collapse collapse in"><form class="navbar-form navbar-right"><div class="form-group"><input type="text" placeholder="email" class="form-control"></div><div class="form-group"><input type="password" placeholder="password" class="form-control"></div><button type="success" class="btn btn-success">Sign In</button></form></div></div></nav><div class="jumbotron"><div class="container"><h1>Sample</h1><p>Welcome to Sample. Lots of sites and apps offer a foo. Some even add a bit of the bar (foobar fooy and doey) way to bar up. Here is a place to nuture your bardle using all the tools available. </p></div></div><div class="container"><div class="row"><div class="col-md-4"><h2>Foo Integration</h2><p>Foo work is demanding, and solving complex bars all day will actually make productivity smurf, but there are ways to maximize hoey bar over time. </p><a class="btn btn-primary btn-lg">Learn More</a></div><div class="col-md-4"><h2>GTD - Getting Bardle Done</h2><p>David Barish gave us some insights that can help us keep our foodle focused on what matters at the moment. </p><a class="btn btn-primary btn-lg">Learn More</a></div><div class="col-md-4"><h2>SRS - Spaced foobardle Software</h2><p>One of psychology's best kept secrets, SFS is a way to overcome much of the innefiency in learning. All people forget and learn in some predictable ways, SFS puts the computer to task, scheduling well structed foodle bars or bardle foos for review at the ideal moment. </p><a class="btn btn-primary btn-lg">Learn More </a></div></div></div></body></html>
Logic behind it:- The elements on the Bootstrap Jumbotron link are made to display as inline-blocksand Inline blocks tend to behave as "words" in a sentence, and as words have spaces between them to differentiate them from each other (delimiter), likewise HTML Renderers also adds a space between the elements with the attribute of display:inline-block;
The problem:- Your elements are being treated as such because they have a (hidden) space (in the form of new-line) between them.
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="email" class="form-control"></div>
<div class="form-group"><input type="password" placeholder="password" class="form-control"></div>
<button type="success" class="btn btn-success">Sign In</button>
</form>
Solution:- So to avoid this type of behavior, you shall have to write them as such that they don't have a space(or a new-line) between them.
A. You could just write the whole concerning elements' HTML in one line.
B. Write the HTML as below.
<form class="navbar-form navbar-right"><div class="form-group">
<input type="text" placeholder="email" class="form-control"></div><div class="form-group">
<input type="password" placeholder="password" class="form-control"></div><button type="success" class="btn btn-success">
Sign In</button>
</form>
CodePen Demo!
Note:- Now that i reread your question I have a better understanding of your requirements, and If I'm not wrong, you want the opposite to happen. So for your solution,
Make sure that the elements have the display attribute set to inline-block.
Also make sure that the elements are not inheriting the property of float:left (or right), and if it is, then you can stop the float as shown here.
I have the following HTML. I want the "Get Geotag" button to be right aligned and the text to be anywhere before/to the left of the button. However, currently I cannot figure out a way to get the buttons aligned properly and to continue functioning (the text for the input is based off of getLoc()). Any help would be appreciated!
<button class="button button-positive button-clear pull-right" ng-click="getLoc()" readonly>
Get Geotag
</button>
<input type="text" value="{{geoString}}">
There is no related CSS.
I tried this:
Get Geotag
which aligns correctly but then the location functionality goes away. I also tried to use things like float: right and right-align to no avail.
<div class="center">
<button class="button button-positive button-clear pull-right" ng-click="getLoc()" readonly>
Get Geotag
</button>
<input type="text" value="{{geoString}}"></div>
Two Options:
1.
.center{display:inline-block;}
2.
.center{display:flex;
flex-direction:row;
justify-content:space-around; /* you could also use justify-content:space-between; *\
}
My code had a typing mistake. Fixed it
It is difficult to say without your css. But I'm trying to help you.
CSS:
.my_css{display:inline-block}
HTML:
<button class="button button-positive button-clear pull-right my_css" ng-click="getLoc()" readonly>
Get Geotag
</button>
<input type="text" value="{{geoString}}">
The following code example code should result in something like .
<form class="well form-search">
<div class="pull-right">
<div class="input-prepend">
<span class="add-on">
<i class="icon-search"></i>
</span>
<input type="text" class="input-large search-query" />
</div>
<button class="btn" type="submit">Search</button>
</div>
</form>
This works perfectly well in Firefox, but in both Chrome and Internet Explorer 7 browsers, it looks like the following:
Am I doing something "illegal" with bootstrap? I did not make any adaptions yet so it's completely out-of-the-box.
Any help is greatly appreciated!
This was a reported issue: https://github.com/twitter/bootstrap/issues/1362
The fix outlined by tonybolzan in the issue works best because you don't have explicitly set a width:
.input-prepend, .input-append {
white-space: nowrap;
-webkit-padding-end: 27px;
}
The problem is with the whitespace found in your markup, try to place the span tag on the same line as the input, like so:
<form class="well form-search">
<div class="pull-right">
<div class="control-group">
<div class="input-prepend">
<span class="add-on"><i class="icon-search"></i></span><input type="text" class="input-large search-query" />
</div>
<button class="btn" type="submit">Search</button>
</div>
</div>
</form>
This is old, but it helped me determine the answer I was looking for:
The problem is probably that bootstrap is setting the width of the input to 210px, which is causing the whole icon/input/button grouping to be wider than your well.
I've updated the fiddle Andres posted above with a sample of the problem by forcing the well forms to a smaller width than their default and a fix by using an input class with a smaller width.
http://jsfiddle.net/dDtUg/2/