CODEWITHSUNDEEP
htmlruby-on-railstwitter-bootstrapruby-on-rails-4twitter-bootstrap-3
tetiross
tetiross

Reputation: 192

Bootstrap input group inside table <td> tag

I have an issue when trying to add bootstrap input-group-addon to the input field that is inside the table <td> tag. When adding all needed classes there is some space between a sign and input field.

<td>
  <div class="form-group">
    <div class="input-group">
      <div class="input-group-addon">$</div>
        <%= text_field_tag "variables[#{@home_price_budget.name}]", params.fetch(:variables, {}).fetch(@home_price_budget.name, ''), value: @home_price_budget.default.to_i, class: "form-control", type: 'number' %>
    </div>
  </div>
</td>

Result: enter image description here

What is the solution for this issue? Thanks.

Upvotes: 0

Views: 8622

Answers (2)

Mike Wood
Mike Wood

Reputation: 154

Make sure you are not applying a margin to the form input, that would create this problem if you are doing it on a global CSS scale (all input elements)

here is a simple JSFiddle showing how a simple margin can effect this.

html:

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="input margin" aria-  describedby="basic-addon1">
</div>

CSS:

input {
    margin-left: 7px;
}

Upvotes: 1

Gaurav Gupta
Gaurav Gupta

Reputation: 1191

Use 'span' instead of 'div', modify your HTML as:

<td>
  <div class="form-group">
    <div class="input-group">
      <span class="input-group-addon">$</span>
      <%= text_field_tag "variables[#{@home_price_budget.name}]", params.fetch(:variables, {}).fetch(@home_price_budget.name, ''), value: @home_price_budget.default.to_i, class: "form-control", type: 'number' %>
    </div>
  </div>
</td>

Upvotes: 0

Related Questions