Place and fix an icon at right of input textbox using Twitter Bootstrap

Question

I've just started using Twitter Bootstrap (I'm new to it so I don't fully grasp it quite yet!) and I'm trying to create a two-column form with some specific visual elements.

The complete width of the form is approx. 80% of the width of the viewport and within here are two (roughly equally spaced out) columns of labels and associated textboxes. Some of the textboxes need to have a small icon affixed to the right-hand side of the textbox and for that icon to remain fixed to the righ-hand side of the textbox when the user resizes the browser window (to remain like this at least down to 1024x768 resolution). I'm also trying to achieve all of this with a "responsive design".

I can get it looking good at higher resolutions, but I know I'm doing something wrong as the icons are displaying "inside" the textboxes when the user resizes the browser window.

This first image shows how the form should look (roughly) at all sizes:

More or less correct alignment of visual elements on the form

But when resizing the browser window, it does this: Envelope icon moves inside the textbox when browser window is resized

I'd like that little envelope icon to remain fixed to the right-hand side of the textbox at all times. Unfortunately, when the browser window is shrunk even further, it moves to the next line: Envelope icon moves to next line when browser window is resized even smaller

I'm using ASP.NET MVC to generate much of this form, so there's lots of @Html.TextBoxFor calls going on within the mark-up, however, I've posted up a JSFiddle with a portion of the relevant rendered mark-up that highlights the problem:

http://jsfiddle.net/qYTSY/1/

I'm sure I've taken an entirely wrong approach with this, however I'm no designer so I'm struggling to tweak the current mark-up to achieve what I'm after. Can anyone help please?

Have you tried [Prepended and appended inputs](http://twitter.github.com/bootstrap/base-css.html#forms) ? — Sherbrow, Oct 23 '12 at 17:40
@Sherbrow - I'd tried this previously, with not much luck, however, I've also recently tried other things in combination with this and I think I'm there. See my answer below. Thanks for your help! — CraigTP, Oct 24 '12 at 08:35

LiverpoolsNumber9 · Answer 1 · 2012-10-23T13:06:31.217

1

In jsfiddle I added a class:

.controls-row-with-icon {
    width: 28em;
}

...and then obviously changed the two divs to:

<div class="controls controls-row controls-row-with-icon">

That "pins" the mail icon just to the right. Not sure if it "breaks" anything else though?

Note: in jsfiddle the two columns seemed to overlap each other - not sure if it would do that in your production version though? I couldn't get the rh column to "fall under" the lh column when the viewport was smaller - but guess that's working ok in your production code?

Rob

EDIT

See comment

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 10px;

}

.row{
    /*min-width: 62em;*/ /* add this is viewport should be fixed */
}

.controls-row{
    width: 30em;
    background: #ccc;
}

.row-fluid .span5{

    margin-left: 0;
    margin-right: 2em;
    width: 30em;
}

.row-fluid .offset1{
    margin-left:0;
    margin-right: 0;
}

edited Oct 23 '12 at 13:06

answered Oct 23 '12 at 10:42

LiverpoolsNumber9

2,384
3
22
34

1

Also - notice you're using %age's for width - which is fine. But unless the label and the textbox sizes are also fluid (including font-sizes and image sizes) you will need some fixed widths in there to avoid these sorts of overlap issues. – LiverpoolsNumber9 Oct 23 '12 at 10:47
1

Ok - an example of how I would do it from scratch here... http://jsfiddle.net/ntMNv/6/ – LiverpoolsNumber9 Oct 23 '12 at 11:32
1

Ok - from original js-fiddle - now using some fixed widths etc to have a more fixed, but still fluid floating 2 column which will sit under if viewport too small - adjust widths etc as need be. It's mainly just overriding the %age widths with em's (See edit in answer) – LiverpoolsNumber9 Oct 23 '12 at 13:08

score 0 · Answer 2 · edited May 23 '17 at 12:22

Well, after some twiddling around, I believe I've found a solution!

Here is an updated JSFiddle:

http://jsfiddle.net/qYTSY/32/

which highlights the answer (ignore the first column - I've fixed that up separately.)

Many thanks to both LiverpoolsNumber9 and Sherbrow for their help in guiding me towards a solution.

The crux of my solution was to remove the span3 class on the span element around the input elements that needed the icon appended to them (leaving this span in place caused all sorts of weird and wonderful problems), but then also wrapping the input element and the icon element in an extra div and using the input-append and add-on classes in order to ensure the icon is placed and fixed to the right of the input box.

So this mark-up:

<div class="controls controls-row">
    <span class="span3"><label for="Contact_EMail">EMail</label></span>
    <span class="span3"><input id="Contact_EMail" name="Contact.EMail" type="text" value="" /></span>
    <span class="offset4"><a href="mailto:someone@example.com" id="emaillink"><i class="icon-envelope" id="emailicon"></i></a></span>
</div>

Became this:

<div class="controls controls-row">
    <span class="span3"><label for="Contact_EMail">EMail</label></span>
    <div class="input-append">
        <span><input id="Contact_EMail" name="Contact.EMail" type="text" value="" /></span>
        <span class="add-on"><a href="mailto:someone@example.com" id="emaillink"><i class="icon-envelope" id="emailicon"></i></a></span>
    </div>
</div>

Although I've found a solution I have to confess that, where CSS/Styling/Twitter Bootstrap is concerned, I still feel a lot like this!

Place and fix an icon at right of input textbox using Twitter Bootstrap

2 Answers2