0

I am trying to display an icon after a text box within a form-horizontal Bootstrap form. So I set my text-box width to 80% and added the icon.

<div class="form-group">
        @Html.LabelFor(model => model.Tag, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.Tag, new { htmlAttributes = new { @class = "form-control", style = "width: 80%" } })
        <img id="tag-status" src="~/Content/Images/alert.png" style="display: inline" />
        @Html.ValidationMessageFor(model => model.Tag, "", new { @class = "text-danger" })
</div>

Unfortunately, this places the icon below the text box.

enter image description here

Looking further, I see that the form-control class includes display: block. If I remove that, it displays how I want.

enter image description here

But I'm concerned that removing the block style may cause display issues on some devices.

Does anyone know if there's there a Bootstrap way to do what I want?

Jonathan Wood
  • 65,341
  • 71
  • 269
  • 466
  • It's basically been answered here: http://stackoverflow.com/questions/24682421/put-search-icon-near-textbox-using-bootstrap – Carol Skelly Apr 05 '17 at 16:26
  • @ZimSystem: That's very similar and I will study that question in more detail, but it doesn't seem to be running into exactly the same issue that I am. – Jonathan Wood Apr 05 '17 at 16:31
  • Looks exactly like the same situation as input-group-unstyled in this answer: http://stackoverflow.com/a/24682653/171456 .. it will require a custom implementation of sorts. – Carol Skelly Apr 05 '17 at 16:44
  • 2
    You can check out the Boostrap method of adding icons with input groups here http://getbootstrap.com/components/#input-groups – sn3ll Apr 05 '17 at 17:05
  • Utilize grid system like `` or trying adding `bootstrap icons` instead of img – MUT Apr 06 '17 at 09:37

1 Answers1

2

Set icon position to absolute and make sure the form-group class position is relative

.form-group{
  position: relative
}

.form-group img{
  position: absolute;
  top: 5px;
  right: 0px;  
}

This will position the image above the text field if you want it to be side by side just give the right property a negative value right: -5px

or use the bootstrap way (mentioned in the comment) which uses input-group class to customize the look and feel.

copoet
  • 169
  • 11
  • But you're changing the `form-group` class, which would affect every form on the site for every device. Isn't that was I've said I'm trying to avoid? – Jonathan Wood Apr 05 '17 at 16:33
  • I do not think this will affect the default behavior, but to make sure you can wrap this specific snippet in a custom class container and prepend that class to the css rule. Or add another class to the form-group div and set it to relative – copoet Apr 05 '17 at 16:40
  • Well question is for a bootstrap solution and I'm afraid that's not the one. – MUT Apr 06 '17 at 09:40