How to make some things not wrap in responsive form? - html

Question

I'm trying to create a responsive form, where some things wrap, and others do not.
I would like the form to look like this on desktop
and like this on mobile
Notice that the icon stays to the right. Unfortunately I cannot use a background image for the icon, as I need to show a tooltip on hover of the icon.
When I attempt this, however, the icon wraps:
So, how can I make the icon be its own element (span or div), yet not wrap below the text field?
Here is one attempt: http://jsfiddle.net/XVu6V/
And here is a Bootstrap 3 attempt: http://jsfiddle.net/syhLJ/1/ I'd really like to use Bootstrap.
Here's some HTML:
<div text-element class="form-group row">
<label for="firstName" class="col-md-2 control-label">First Name</label>
<div class="col-md-5">
<input type="text" class="form-control" id="firstName" />
</div>
<div class="col-md-1 validation-icon required"></div>
<div class="col-md-3 validation-message">
Needed for communication.
</div>
</div>

Answer 1

Why not wrap the icon and <input> inside a div, set that div to position:relative and add a padding-right the same width of the icon. Then set the <input> 100% wide and the icon position:absolute;top:0;right:0? That'll force the icon to always sit to the right of the <input>.
Something like http://jsfiddle.net/syhLJ/7/.
You can view just the HTML preview of it at http://fiddle.jshell.net/syhLJ/7/show/, I use this solution quite a bit and it's never failed so far.

Answer 2

You can stack col-xx-xx together without overriding bootstrap's default styles.
http://jsfiddle.net/99SFW/2/
<div class="container">
<form class="form-horizontal" role="form">
<div text-element class="form-group row">
<label for="firstName" class="col-md-2 col-sm-2 col-xs-12 control-label">First Name</label>
<div class="col-md-5 col-sm-5 col-xs-9">
<input type="text" class="form-control" id="firstName" />
</div>
<div class="col-md-1 col-sm-1 col-xs-1 validation-icon required"></div>
<div class="col-md-3 col-sm-12 col-xs-12 validation-message">Needed for communication.</div>
</div>
</form>
</div>

Answer 3

Not really optimal but you could try absolutely positioning the input and floating it to the left when on a smaller screen, while floating the icon to the right. Then I guess make the input a percentage that will give you some spacing between it and the icon.
.form-group .form-control {
position: absolute;
float: left;
}

Answer 4

I've updated your fiddle here
The HTML goes something like this...
<form>
<div>
<label for="firstName" class="label">First Name</label>
<div class="input">
<input type="text" class="form-control" id="firstName" />
</div>
<div class="icon">R</div>
<div class="validation">Needed for communication.</div>
</div>
</form>
And the css
.input {
float: left;
width:calc(100% - 35px);
max-width: 500px;
}
.icon {
float: left;
background-color: orange;
width: 32px;
height: 32px;
display: block;
margin: 0 4px;
text-align: center;
vertical-align: middle;
line-height: 30px;
color: white;
font-weight: bold;
}
.validation {
float: left;
}

Answer 5

Or you could float the button right and drag it up with a negative margin.
.form-group .validation-icon {
float: right;
margin-top: -33px;
}
#media (min-width: 992px) {
.form-group .validation-icon {
float: left;
margin-top: 0;
}
}
.form-control {
width: 90%;
}
http://jsfiddle.net/Anp7s/2/