I have an issue that I should display measurment units after a value in input. The problem is that standard Bootstrap's way to create a span is overkill here, because it requires too many space for it. For example:
<div class="input-group margin-bottom">
<span class="input-group-addon input-source-observer"><i class="fa fa-trash fa-fw"></i></span>
<span class="input-group-addon input-source-observer" style="text-align: right">Persist deleted items for</span>
<input type="text" class="form-control" data-parsley-trigger="change" placeholder="1" initial-value="1" value="7" style="text-align: right">
<span class="input-group-addon input-source-observer">days</span>
<span class="input-group-btn">
<input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Recover">
</span>
</div>
Here it looks fine enough, but in other places it looks really ugly. I want something like
How can I do it with HTML5+CSS3 or/and bootstrap features?
By creating a new class you can adjust the properties of your input and input-group-addon:
The HTML:
<div class="input-group margin-bottom">
<span class="input-group-addon input-source-observer"><i class="glyphicon glyphicon-trash"></i></span>
<span class="input-group-addon input-source-observer" style="text-align: right">Persist deleted items for</span>
<input type="text" class="form-control addon-inline" data-parsley-trigger="change" placeholder="1" initial-value="1" value="7" style="text-align: right">
<span class="input-group-addon addon-inline input-source-observer">days</span>
<span class="input-group-btn">
<input type="button" class="btn btn-default" onclick="restoreInput(event)" value="Recover">
</span>
</div>
The CSS
.input-group-addon.addon-inline {
background: #fff;
color: #999;
border-left: none;
padding-left: 0;
}
.input-group .form-control.addon-inline {
border-right: none;
padding-right: 5px;
}
The Results:
http://www.bootply.com/BOTmrMi4jV
Related
I have a counter with increase decrease button. It's inside a model-content, but I can't center it in the middle of the modal. Can you help me?
https://i.stack.imgur.com/gkoMZ.png
<div class="input-group" style="width:25%;">
<span class="input-group-btn">
<span class="btn btn-white btn-minuse" type="button">-</span>
</span>
<input type="text" class="form-control text-center height-25" value=0 >
<span class="input-group-btn">
<span class="btn btn-red btn-pluss" type="button">+</span>
</span>
</div>
To center it you should use margin: 0 auto. And that will solve your problem
<div class="input-group" style="width:25%; margin: 0 auto;">
<span class="input-group-btn">
<span class="btn btn-white btn-minuse" type="button">-</span>
</span>
<input type="text" class="form-control text-center height-25" value=0>
<span class="input-group-btn">
<span class="btn btn-red btn-pluss" type="button">+</span>
</span>
</div>
Also, avoid using Inline CSS styles. If that didn't help please let me know.
How can I do it so that the label and input elements are placed on the same row? Can anyone help me with this?
.entry:not(:first-of-type) {
margin-top: 10px;
}
.glyphicon {
font-size: 12px;
}
<div class="container">
<div class="row">
<div class="control-group" id="fields">
<label class="control-label" for="field1">Nice Multiple Form Fields</label>
<div class="controls">
<form role="form" autocomplete="off">
<div class="entry input-group col-xs-3">
<input class="form-control" name="fields[]" placeholder="Type something">
<span class="input-group-btn">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
The for attribute of the tag should be equal to the id attribute of the related element to bind them together, however you don't have id in your input div..
try add this :
<input class="form-control" id="field1" name="fields[]" type="text" placeholder="Type something" />
Just place the label above the input element since both are inline elements by default:
.entry:not(:first-of-type) {
margin-top: 10px;
}
.glyphicon {
font-size: 12px;
}
<div class="container">
<div class="row">
<div class="control-group" id="fields">
<div class="controls">
<form role="form" autocomplete="off">
<div class="entry input-group col-xs-3">
<label class="control-label" for="field1">Nice Multiple Form Fields</label>
<input class="form-control" name="fields[]" type="text" placeholder="Type something">
<span class="input-group-btn">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
I've noticed something strange with Bootstrap 3's rendering of input groups, at least on Firefox and IE (Chrome untested):
As you can see, if there are two or more buttons preceding a text input, its left margin becomes wider.
Here is the code I used to reproduce this issue:
<div class="input-group">
<span class="btn btn-default input-group-addon" id="basic-addon1">A</span>
<span class="btn btn-default input-group-addon" id="basic-addon2">B</span>
<input type="text" class="form-control" placeholder="C" aria-describedby="basic-addon1">
</div>
<br/><br/>
<div class="input-group">
<span class="btn btn-default input-group-addon" id="basic-addon1">A</span>
<input type="text" class="form-control" placeholder="C" aria-describedby="basic-addon1">
</div>
Is this expected/normal? How can I fix this?
Associated JSFiddle: https://jsfiddle.net/DTcHh/21418/
I assume you are talking about the double border you see on B? If so its just because there are 1px borders for B and C so when they show next to each other there are 2. This could be easily removed by using something like this:
.form-control {
border-left: 0;
}
But in doing this it will remove the border and it will show incorrectly if you use this technique with no other button elements next to it. If you add this HTML or view your updated js.fiddle so can see what I mean.
<div class="input-group">
<span class="btn btn-default input-group-addon" id="basic-addon1">A</span>
<span class="btn btn-default input-group-addon" id="basic-addon2">B</span>
<input type="text" class="form-control" placeholder="C" aria-describedby="basic-addon1">
</div>
<br/><br/>
<div class="input-group">
<span class="btn btn-default input-group-addon" id="basic-addon1">A</span>
<input type="text" class="form-control" placeholder="C" aria-describedby="basic-addon1">
</div>
<br/><br/>
<div class="input-group">
<span class="btn btn-default input-group-addon" id="basic-addon1">A</span>
<span class="btn btn-default input-group-addon" id="basic-addon2">B</span>
</div>
So I believe this is why the Bootstrap team has the double borders there because depending on what you need to do its probably better to have 2 borders on some occasions then none. Hope that helps.
Your structure is not correct per the Docs --> Multiple Button Input Group.
You're currently applying input-group-addon directly to the buttons, you want input-group-btn as the parent of the buttons (this is also why you're not seeing the btn-default styling also, it should be white, not grey).
Working Example;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<br/>
<br/>
<h1>Correct per Docs</h1>
<div class="input-group">
<div class="input-group-btn">
<span class="btn btn-default" id="basic-addon1">A</span>
<span class="btn btn-default" id="basic-addon2">B</span>
</div>
<input type="text" class="form-control" placeholder="C" aria-describedby="basic-addon1">
</div>
<br/>
<br/>
<h1>Questions Example</h1>
<div class="input-group">
<span class="btn btn-default input-group-addon" id="basic-addon1">A</span>
<span class="btn btn-default input-group-addon" id="basic-addon2">B</span>
<input type="text" class="form-control" placeholder="C" aria-describedby="basic-addon1">
</div>
</div>
I would like to align a spinner just to the right of the input box but it is going underneath:
<form>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-search"></i>
</span>
<input type="text" class="form-control" placeholder="Search" ng-model="searchTerm" ng-change="FetchNearby(searchTerm)">
</div>
<span><img alt="Logo" src="/Content/Images/ajax-loader.gif" /></span>
</div>
</form>
something like this?
https://jsfiddle.net/1e0v352r/
i've added a class to your span and moved it inside of the .input-group
<form>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-search"></i>
</span>
<input type="text" class="form-control" placeholder="Search" ng-model="searchTerm" ng-change="FetchNearby(searchTerm)">
<span class="logo_right"><img alt="Logo" src="/Content/Images/ajax-loader.gif" /></span>
</div>
</div>
</form>
and added some css to position it
.logo_right {
position: absolute;
right: 0;
top: 0;
z-index: 5;
}
I am having trouble getting two components to align in using the <div display='table-cell'>. The first component is being displayed with a gap at the top. I want them to be displayed so that they are aligned.
Here's the JsFiddle: http://jsfiddle.net/66s7x5fr/
Here's the HTML:
<div class="form-group modifierColumn">
<div class="cell">
<select class="form-control input-sm btn-primary">
<option value="Broad">Broad</option>
<option value="Moderate">Moderate</option>
<option value="Single">Single</option>
</select>
</div>
<div class="cell">
<span class="input-group input-group-sm">
<span class="input-group-btn">
<button class="btn btn-primary" type="button"> <i class="fa fa-minus"></i> </button>
</span>
<input class="form-control text-justify" type="text" value="0"> </input>
<span class="input-group-btn">
<button class="btn btn-primary" type="button"> <i class="fa fa-plus"></i> </button>
</span>
</span>
</div>
</div>
Here's the CSS:
.modifierColumn .cell:not(:last-child) {
padding-right: 5px;
}
.cell {
display: table-cell;
}
Similar to nocarrier's response:
.cell {
vertical-align: top;
display: table-cell;
}
Try
.cell {
vertical-align: bottom;
display: table-cell;
}
Somewhat obscure rule. Baffles many. Check Understanding vertical align
Your problem is the the top-padding that the class cell has. Try to use a col-md-x to be more responsive.
<div class="form-group modifierColumn" tabindex="0">
<div class="col-xs-3">
<select class="form-control input-sm btn-primary">
<option value="Broad">Broad</option>
<option value="Moderate">Moderate</option>
<option value="Single">Single</option>
</select>
</div>
<div class="col-xs-4">
<span class="input-group input-group-sm">
<span class="input-group-btn">
<button class="btn btn-primary" type="button"> <i class="fa fa-minus"></i> </button>
</span>
<input class="form-control text-justify" type="text" value="0"> </input>
<span class="input-group-btn">
<button class="btn btn-primary" type="button"> <i class="fa fa-plus"></i> </button>
</span>
</span>
</div>