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}}">
Related
In my code, I am getting the bottom borders for only "High Spot" but I need to get the border for all the label help me with this
<div class="form-group">
<label for="text" class="font-weight-bold"> What is the preferred order methodology? </label>
<br>
<button type="button" class="btn btn dropdown-toggle border-bottom" data-toggle="dropdown">
High Spot Frequency.Low Avg.Rate
</button>
</div>
thank you guys i get the answer just by adding the css and increase the width
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>
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.
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/