CODEWITHSUNDEEP
jqueryhtmlcss
steve klein
steve klein

Reputation: 2629

Need consistent horizontal spacing between images

I am generating the following HTML for each row of this image:

<div class='row signup'>
  <div class='col-md-1'>
    <span class='plus-icon'>
      <img alt="Plus" src="/assets/plus.jpg" width="18" height="18" />
    </span>
    <span class='minus-icon'>
      <img alt="Minus" src="/assets/minus.jpg" width="18" height="18" />
    </span>
  </div>
  <div class='col-md-2'><input type="text" value="Food" name="sheet[slots_attributes][1][label]" id="sheet_slots_attributes_1_label" /></div>
  <div class='col-md-2'><input type="text" value="" name="sheet[slots_attributes][1][name]" id="sheet_slots_attributes_1_name" /></div>
  <div class='col-md-2'><input type="text" value="[email protected]" name="sheet[slots_attributes][1][email]" id="sheet_slots_attributes_1_email" /></div>
  <div class='col-md-2'><input type="text" value="3335557777" name="sheet[slots_attributes][1][phone]" id="sheet_slots_attributes_1_phone" /></div>
  <div class='col-md-2'><input type="text" value="" name="sheet[slots_attributes][1][comments]" id="sheet_slots_attributes_1_comments" /></div>
</div>

In the image, the top two rows are generated in jQuery (on click of the + buttons) and the bottom two rows render with the page. I would like the + and - buttons/icons to be spaced as they are on original page render, but can't make it happen for the jQuery generated rows.

I believe that the issue is that the originally rendered rows (in Rails/HAML btw, although I think that is not important) include extra spacing from line feeds etc. while there is no extra spacing in the jQuery rows. So in a sense, the jQuery rows are "correct", just not aesthetic. Note that the HTML for both cases looks identical in Firebug.

What is the best way to ensure consistent horizontal spacing in both cases? I think I need to style the spans or imgs in some way, but I am stuck.

Upvotes: 0

Views: 63

Answers (2)

Josh Kuhn
Josh Kuhn

Reputation: 176

The easiest way is probably to add a class directly to your plus/minus buttons. 

<img class="row-signup-button" alt="Plus" src="/assets/plus.jpg" width="18" height="18" />

Then, you can use CSS padding-right to space the buttons out:

.row-signup-button {
    padding-right: 10px;
}

Here's a JSFiddle to show how it looks: http://jsfiddle.net/0gj9ahun/

Upvotes: 0

H&#233;ctor E
H&#233;ctor E

Reputation: 436

Try with padding. If it doesn't work, try with margin

<img alt="Plus" src="/assets/plus.jpg" width="18" height="18" style="padding:5px;"/>

You can also use padding-left, padding-top... if you want it to affect only at one side

Upvotes: 3

Related Questions