I've added both feedback and a button addon to an input field in my form. My HTML is the following:
<div class="form-group has-feedback">
<label class="col-sm-4 control-label" for="authorization_id">AutorisationsID</label>
<div class="col-sm-4">
<div class="input-group">
<input name="authorization_id" class="form-control" type="text">
<span class="glyphicon form-control-feedback"></span>
<span class="input-group-btn">
<a href="#" id="authid-info-btn" tabindex="0" class="btn btn-info" role="button" data-position="auto right" data-container="body" data-toggle="popover" data-trigger="click" data-content="And here's some amazing content. It's very engaging. Right?">
<span class="glyphicon glyphicon-question-sign">
</a>
</span>
</div>
</div>
<div class="col-sm-4 control-label control-label-left-align"></div>
</div>
Here's what it looks like:
And here's what I want it to look like
The feedback is positioned wrong when the button addon is present. Am I missing something or does Bootstrap not support this design?
I slapped your content into a fiddle here: http://jsfiddle.net/DTcHh/2459/
But I don't know how to get the X to come up. Is there any way you can emulate that in the fiddle?
It will be something like
.redX {
position: relative;
left: -10px;
}
Or possibly a small adjustment to margin or padding. It could be a lot of things but likely a simple-ish fix in css. A live example would be best, really.
Related
I have layout like this
<div class="form-group">
<div class="col-md-12">
<div class='col-md-6'>
<div class="form-group">
Date of ship:
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-md-2">
<input type="submit" value="Guardar" class="btn btn-xs" style="background-color:#3399FF;color:#FFFFFF" />
</div>
</div>
</div>
Demo
That I want to do is fix label "Date of ship" just a side of input instead above of it. How can I achieve it? Regards
It's a simple matter of positioning it to the left side of the input field. You might have to decrease the size of the input box, or moving the input field to the left. To do this, you need CSS.
First of all, they're in a col-md-6. Which is half the width of a full row.
This isn't much space, but it should work, CSS:
label { float: left; }
input.form-control { float: left; }
I want to make full with the button on right side.
I added btn-block on button element but it's dont working i don't know why.
Jsfiddle Here
<div class="fieldset">
<div class="field qty">
<label class="label" for="qty"><span>Qlty</span></label>
<div class="control control-qty-cart">
<span class="quantity-controls quantity-minus"></span>
<input type="number" name="qty" id="qty" maxlength="12" value="1" title="Aantal" class="qty-default input-text qty" data-validate="{"required-number":true,"validate-item-quantity":{"minAllowed":1}}">
</div>
</div>
<div class="actions">
<button type="submit" title="In Winkelwagen" class="action primary tocart btn-block" id="product-addtocart-button">
<span>In Winkelwagen</span>
</button>
</div>
</div>
Not sure where you took that bootstrap code from. I tried with this links and it worked. Also better to add it as an external library rather than to put the code there directly.
For bootstrap 3 (css): https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
For bootstrap 3 (js): https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
For bootstrap 4 get the cdn from this link: https://getbootstrap.com
I'm working on an ASP site for the company I work at. It's about adding money saving or earning activities to an overview that one of the directors can look at.
Currently though I have some styling issues, using bootstrap here.
I believe I used to have this issue once but how I solved it escapes me. I can't center all the elements and I can't make the input boxes connect with the addons on the right side as is seen in the picture.
<div class="container body-content" style="padding-top: 15px;">
<div class="container" align="center">
<div class="col-lg-8">
<div class="row">
<h2>Abstract</h2>
<div class="form-group">
<div class="input-group" style="padding-bottom: 10px;">
<span id="add-addon-styling" class="input-group-addon">FYE</span>
<select class="form-control required" id="new-activity-fye-dropdown">
<option value="1">On Track</option>
<option value="2">Issue</option>
<option value="3">Behind</option>
</select>
<span class="input-group-addon" data-toggle="tooltip" data-placement="top" title="The Full Year Expectation of the Activity. Usually On Track on creation.">
<b>?</b>
</span>
</div>
<div class="input-group" style="padding-bottom: 10px;">
<span id="add-addon-styling" class="input-group-addon">Activity Name</span>
<input type="text" class="form-control required" id="new-activity-modal-name-field"
aria-describedby="new-activity-modal-name-field" />
<span class="input-group-addon" data-toggle="tooltip" data-placement="top"
title="The Name of the Activity. This name appears in the Activity Overview.">
<b>?</b>
</span>
</div>
<div class="input-group" style="padding-bottom: 10px;">
<span id="add-addon-styling" class="input-group-addon">Responsible</span>
<input type="text" class="form-control required" id="new-activity-modal-responsible-field"
aria-describedby="new-activity-modal-responsible-field" disabled />
<span class="input-group-addon" data-toggle="tooltip" data-placement="top"
title="The responsible person for this activity. This it the go-to person for questions, progress and reports.">
<b>?</b>
</span>
</div>
<!-- TODO: Find an automatic way to make this dropdown -->
<div class="input-group" style="padding-bottom: 10px;">
<span id="add-addon-styling" class="input-group-addon">Department</span>
<select class="form-control required" id="new-activity-modal-department-dropdown">
<!-- Handled in content-controller: CreateNewActivityDepartmentDropdown() -->
</select>
<span class="input-group-addon" data-toggle="tooltip" data-placement="top"
title="The department this activity belongs to.">
<b>?</b>
</span>
</div>
<div class="input-group" style="padding-bottom: 10px;">
<span id="add-addon-styling" class="input-group-addon">Start Time</span>
<input class="form-control" type="text" id="new-activity-modal-datepicker-start" />
<span class="input-group-addon" data-toggle="tooltip" data-placement="top"
title="The start of the activity. Usually today's date.">
<b>?</b>
</span>
</div>
<div class="input-group" style="padding-bottom: 10px;">
<span id="add-addon-styling" class="input-group-addon">End Time</span>
<input class="form-control" type="text" id="new-activity-modal-datepicker-end" />
<span class="input-group-addon" data-toggle="tooltip" data-placement="top"
title="The estimated end of the activity.">
<b>?</b>
</span>
</div>
</div>
</div>
<div class="row">
<h2>Description</h2>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Upload a thorough description explaining the Activity.</span>
</div>
</div>
</div>
<div class="row">
<h2>Estimation</h2>
<div class="form-group">
<div class="input-group" style="padding-bottom: 10px;">
<span id="add-addon-styling" class="input-group-addon">AX Account Number(s)</span>
<input type="text" class="form-control required" id="new-activity-modal-ax-account-numbers-field"
aria-describedby="new-activity-modal-ax-account-numbers-field" />
<span class="input-group-addon" data-toggle="tooltip" data-placement="top"
title="AX Account number associated with the activity.
Multiple accounts can be added separated by commas.">
<b>?</b>
</span>
</div>
<div class="input-group">
<span class="input-group-addon">Upload the estimation calculations for the Activity.</span>
</div>
</div>
</div>
</div>
</div>
</div>
I feel that my HTML is fairly normal but I have a hard time applying styles from CSS files in ASP in the first place.
How would I make the addons on the right side connect with the input fields?
UPDATE
It appears that the problem was inside a default generated file called Site.css. It had the following in it:
input,
select,
textarea {
max-width: 280px;
}
Commenting that out solves the problem.
Since I don't know how exactly ASP's css structure is, here is how i would approach this situation:
use your browser's inspector to check exactly what type of css rule is making the "?" button be all the way to the right, i can only assume it either has a float, or the form has a huge margin on it's right.
once you have found the issue, you could use your browser's inspector further to test out some edits, if it's a margin thing, see how much margin it will actually need, if it's a float issue, see how it will look with float:none
as soon as you've found the solution to the issue, you will need to apply it, to do this add a custom .css file AFTER ASPs css files, this way whatever you write in it will overwrite any existing rules.
add the fixes to this new file and you should be done.
There must be something elsewhere on the page that is breaking the style of the select boxes, because when I view your snippet in codepen, in both Chrome and IE11, the select boxes do stretch to the question mark boxes at the right:
codepen.io/anon/pen/pgVoQg
btw, inline styles should usually be avoided where possible
Hi I am not a good UI HTML developer but have to do some fixes on a form. I am surprised that text align is not working on this form. I can see this HTML but don't know how to align text right on label StockEnd.
<div class="col-sm-1">
<label class="control-label col-sm-1" for="StockEnd">End</label>
</div>
<div class="col-sm-2 ">
<div class="input-group">
<input type="text" name="StockEnd" class="form-control" id="StockEnd" ng-readonly="readonly" ng-model="Catalogdata.stockTo" ng-disabled="isDisabled" capitalize typeahead="item.number for item in getAutoCompleteStockNumber($viewValue)">
<span class="input-group-btn">
<button class="btn-default btn" type="button" ng-click="stockNumberSearchClick('end')"><i class="fa fa-search"></i></button>
</span>
</div>
</div>
This can be achieved with marginal adjustment to your HTML classes.
First, you must remove .col-sm-1 on your <label>, as this class causes a float:left to be applied to the element, which means any use of text-align will no longer affect it. With that class removed, you can then add .text-right to the parent of the <label>.
In the end, your HTML will look like:
<div class="col-sm-1 text-right">
<label class="control-label" for="StockEnd">End</label>
</div>
<div class="col-sm-2 ">
<div class="input-group">
<input type="text" name="StockEnd" class="form-control" id="StockEnd" ng-readonly="readonly" ng-model="Catalogdata.stockTo" ng-disabled="isDisabled" capitalize="" typeahead="item.number for item in getAutoCompleteStockNumber($viewValue)">
<span class="input-group-btn">
<button class="btn-default btn" type="button" ng-click="stockNumberSearchClick('end')"><i class="fa fa-search"></i></button>
</span>
</div>
</div>
Here's a Bootply to demonstrate.
Hope this helps! Let me know if you have any questions.
either add text-right class to the parent form-group
OR
modify the label to be display: block with text-right class to do this.
After discussing with my colleague, we made this change and it worked as required. Just removed the class from outer Div and it worked. So Instead of
<div class="col-sm-1">
<label class="control-label col-sm-1" for="StockEnd">End</label>
</div>
it is now
<div >
<label class="control-label col-sm-1" for="StockEnd">End</label>
</div>
Rest is same no change.
I'm trying to create a navigation bar which contains an input field. I would like the input field to occupy all available space in the navigation bar.
Following this answer, I successfully created a layout similar to what I want, which contains an "addon" icon to the left of the input field (see code here).
But: I don't want the icon near the input field.
The following code controls the input field:
<form class="navbar-form">
<div class="form-group" style="display:inline;">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
<input type="text" class="form-control">
</div>
</div>
</form>
The problem is that removing <span class="input-group-addon">...</span> to get rid of the icon, makes the input field contract to a smaller size and loose the rounded edges (which is less important. see code here).
Of course it doesn't make sense to wrap a single input field in an "input-group". But removing the "input-group" wrapper causes the input field to expand and break into a new line (see code here).
After looking at Bootstrap.css I tried to create a new css class which mimics the relevant code of the input-group class. This brings back the input field inline in the navbar, but still does not make it expand to occupy all available space (see code here).
My question is: How do I get the layout I want without the icon?
Bonus: Why are the "input-group" and the icon making the input field expand?
Required browser compatibility: Chrome, Firefox, IE8+
Well, most folks didn't used have to design with tables, but in 99 when I began, tables created the layouts and we used spacer .gifs and all kinds of crap to design with. When you have a display:table on the container and a display:table-cell on the contents inside it, since the .form-control is empty there has to be something else to force the width of the element to take up the space, or it's going to act like an empty cell. So you have to have an empty span with some padding on it to force it.
http://jsbin.com/aXOZEXi/1 -- Bootstrap 3.0 - 3.1
http://jsbin.com/aXOZEXi/2/edit -- Bootstrap 3.2
.test {
display:table;
}
.test > .form-control {
display: table-cell;
margin-left:-3px;
}
.test > span {
display: table-cell;
width:1%;
padding:0 3px;
}
HTML
<form class="navbar-form">
<div class="form-group" style="display:inline;">
<div class="test">
<span><!--shim--></span>
<input type="text" class="form-control">
</div>
</div>
</form>
Replace with this html: (made changes to glyphicon glyphicon-search and background-color, border of input-group-addon) Made the round edges too :)
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Some Brand</a>
</div>
<div class="navbar-collapse collapse" id="navbar-collapsible">
<ul class="nav navbar-nav navbar-left">
<li>Link 1</li>
<li>Link 2</li>
</ul>
<div class="navbar-form navbar-right btn-group">
<button type="button" class="btn btn-default">Button 1</button>
<button type="button" class="btn btn-default">Button 2</button>
<button type="button" class="btn btn-default">Button 3</button>
</div>
<form class="navbar-form">
<div class="form-group" style="display:inline;">
<div class="input-group">
<span class="input-group-addon" style="background-color:transparent; border:none"><span class=""></span></span>
<input type="text" class="form-control" style="border-bottom-left-radius: 4px;border-top-left-radius: 4px;">
</div>
</div>
</form>
</div>
</div>
</nav>
</div>
Worked really hard to get to what you require. hope you appreciate :)
This will get you pretty much where you want to be
<div class="form-group" style="display:inline;">
<div class="input-group col-lg-6 col-md-5 col-sm-3 center-block col-xs-12">
<input class="form-control" type="text" placeholder="Search">
</div>
</div>
It will not fill exactly all the space but it will fill most of it and will center the search box so it does not look out of place. Added more dynamic column sizing extra small screen uses a dropdown menu so I re-sized the box to fit the screen. to build a fully responsize page as you are describing you should probably nest everything inside a grid because col-?-? is not a fixed width it is a percentage width based on it's container.