Spacing between buttons missing when using prependTo()

Question

I am creating a display builder app for outdoor power equipment dealers where the dealer can add, remove, and rearrange different display sections.

The list of display sections is in a div named sectionControls. This div contains a left and right column (named leftCol and rightCol), in which the name of the display section is on the left and the buttons are on the right: Image

If the dealer selects that they have a 90" wall height, however, the default 96" Backpack Blower section is replaced with a 90" backpack blower section. This is done by hiding the original Backpack Blower section and prepending the new section to the top of the list: Image

As you can see in the above picture, the buttons are misaligned compared to the rest below them. Also, the plus and minus buttons should have a space between them. Image. How can I adjust this?

Here is my code for hiding the 96" Backpack Blower section and prepending on the 90" section in its place:

if(wallHeight === "90"){ //If dealer has a 90 height, we need to show the 90" backpack blower display and hide the normal 96" backpack blower display
      $('<p>Backpack Blower <strong>(90" tall display)</strong></p>').prependTo("#sectionControls .leftCol");
      $("<input type='button' class = 'section-button section-remove-button' value='-'' id = 'remove90BackpackBlowerSectionBtn' onclick='remove90BackpackBlowerSection()'>").prependTo("#sectionControls .rightCol");
      $("<input type='button' class = 'section-button' value='+'' id = 'add90BackpackBlowerSectionBtn' onclick='add90BackpackBlowerSection()'>").prependTo("#sectionControls .rightCol");
      $('<input type="button" class = "section-info-button" value="i" id = "90BackpackBlowerSectionInfoBtn" onclick ="show90BackpackBlowerSectionInfo()">').prependTo("#sectionControls .rightCol");

      //Hide 96" backpack blower section
      $("#96BackpackBlowerText").hide();
      $("#backpackBlowerSectionInfoBtn").hide();
      $("#addBackpackBlowerSectionBtn").hide();
      $("#remove90BackpackBlowerSectionBtn").hide();    
}

Here is the CSS for sectionControls, leftCol, rightCol, and the buttons:

#sectionControls{display:inline-block;}

.leftCol{display:inline-block; margin-left:40px; margin-right:40px;}
.rightCol{display:inline-block;}

.section-button, .section-info-button{background-color: #F15C22; border: none; color: white; margin-bottom:10px; padding: 5px 30px; text-align: center; text-decoration: none; display:inline-block; font-size: 16px;}
.section-button:hover, .section-button:active{background-color:#000000;}
.section-info-button{background-color:gray; margin-right:10px; padding:5px 15px;}

Here is the original HTML

 <div id = "sectionControls">
  <h1>Display Sections</h1>
  <div class = "leftCol">
  <p id ="96BackpackBlowerText">Backpack Blower</p>
  <p>Handheld and Backpack Blowers</p>
  <p>Chainsaw</p>
  <p>Hedge Trimmer</p>
  <p>Trimmer</p>
  <p>Accessories</p>
  <p>PAS</p>
  <p>Cordless</p>
</div>

<div class = "rightCol">
  <input type="button" class = "section-info-button" value="i" id = "backpackBlowerSectionInfoBtn" onclick ="showBackpackBlowerSectionInfo()">
  <input type="button" class = "section-button" value="+" id = "addBackpackBlowerSectionBtn" onclick="addBackpackBlowerSection()"> 
  <input type="button" class = "section-button section-remove-button" value="-" id = "removeBackpackBlowerSectionBtn" onclick="removeBackpackBlowerSection()">

  <br>

  <input type="button" class = "section-info-button" value="i" id = "handheldAndBackpackBlowerSectionInfoBtn" onclick ="showHandheldAndBackpackBlowerSectionInfo()">
  <input type="button" class = "section-button" value="+" id = "addHandheldAndBackpackBlowerSectionBtn" onclick="addHandheldAndBackpackBlowerSection()">
  <input type="button" class = "section-button section-remove-button" value="-" id = "removeHandheldAndBackpackBlowerSectionBtn" onclick="removeHandheldAndBackpackBlowerSection()">

  <br>

  <input type="button" class = "section-info-button" value="i" id = "chainsawSectionInfoBtn" onclick ="showChainsawSectionInfo()">
  <input type="button" class = "section-button" value="+" id = "addChainsawSectionBtn" onclick="addChainsawSection()"> 
  <input type="button" class = "section-button section-remove-button" value="-" id = "removeChainsawSectionBtn" onclick="removeChainsawSection()"> 

  <br>

  <input type="button" class = "section-info-button" value="i" id = "hedgeTrimmerSectionInfoBtn" onclick ="showHedgeTrimmerSectionInfo()">
  <input type="button" class = "section-button" value="+" id = "addHedgeTrimmerSectionBtn" onclick="addHedgeTrimmerSection()"> 
  <input type="button" class = "section-button section-remove-button" value="-" id = "removeHedgeTrimmerSectionBtn" onclick="removeHedgeTrimmerSection()"> 


  <br>

  <input type="button" class = "section-info-button" value="i" id = "trimmerSectionInfoBtn" onclick ="showTrimmerSectionInfo()">
  <input type="button" class = "section-button" value="+" id = "addTrimmerSectionBtn" onclick="addTrimmerSection()"> 
  <input type="button" class = "section-button section-remove-button" value="-" id = "removeTrimmerSectionBtn" onclick="removeTrimmerSection()"> 

  <br>

  <input type="button" class = "section-info-button" value="i" id = "accessoriesSectionInfoBtn" onclick ="showAccessoriesSectionInfo()">
  <input type="button" class = "section-button" value="+" id = "addAccessoriesSectionBtn" onclick="addAccessoriesSection()"> 
  <input type="button" class = "section-button section-remove-button" value="-" id = "removeAccessoriesSectionBtn" onclick="removeAccessoriesSection()"> 

  <br>

  <input type="button" class = "section-info-button" value="i" id = "pasSectionInfoBtn" onclick ="showPasSectionInfo()">
  <input type="button" class = "section-button" value="+" id = "addPasSectionBtn" onclick="addPasSection()"> 
  <input type="button" class = "section-button section-remove-button" value="-" id = "removePasSectionBtn" onclick="removePasSection()"> 

  <br>

  <input type="button" class = "section-info-button" value="i" id = "cordlessSectionInfoBtn" onclick ="showCordlessSectionInfo()">
  <input type="button" class = "section-button" value="+" id = "addCordlessSectionBtn" onclick="addCordlessSection()"> 
  <input type="button" class = "section-button section-remove-button" value="-" id = "removeCordlessSectionBtn" onclick="removeCordlessSection()"> 
</div>
</div>

I guess you add white-space while hand coding, while generated code does not ;) (makes a difference with inline-block) — G-Cyrillus, Jun 18 '19 at 18:50
does the code generated hits the space bar or return to next line before next bit is added ? the trouble seems to be the opposite of (one question among thousands of similar) https://stackoverflow.com/questions/5078239/how-do-i-remove-the-space-between-inline-block-elements bTry add a white space before the opening bracket or after the closing one and tell us what it does ;) — G-Cyrillus, Jun 18 '19 at 19:30

cjc · Accepted Answer · 2019-06-18T20:17:53.833

It turns out the spacing in your HTML is actually important here (I know normally it's not).

Check out this JSFiddle. Notice that when I removed the whitespace from between the input tags on the second line the space between them went away.

There isn't a great solution since the browser is actually using the whitespace. One option would be to programmatically insert whitespace using a span like this:

    $("<span> </span>").prependTo("#sectionControls .rightCol");

A better option would be to remove the whitespace from the HTML and add the spacing with a margin. This answer has a host of different ways to do that.

Edit: The whitespace I removed to at least make everything consistent is between the input tags.

Before:

  <input type="button" class = "section-info-button" value="i" id = "handheldAndBackpackBlowerSectionInfoBtn" onclick ="showHandheldAndBackpackBlowerSectionInfo()">
  <input type="button" class = "section-button" value="+" id = "addHandheldAndBackpackBlowerSectionBtn" onclick="addHandheldAndBackpackBlowerSection()">
  <input type="button" class = "section-button section-remove-button" value="-" id = "removeHandheldAndBackpackBlowerSectionBtn" onclick="removeHandheldAndBackpackBlowerSection()">

After:

   <input type="button" class = "section-info-button" value="i" id = "handheldAndBackpackBlowerSectionInfoBtn" onclick ="showHandheldAndBackpackBlowerSectionInfo()"><input type="button" class = "section-button" value="+" id = "addHandheldAndBackpackBlowerSectionBtn" onclick="addHandheldAndBackpackBlowerSection()"><input type="button" class = "section-button section-remove-button" value="-" id = "removeHandheldAndBackpackBlowerSectionBtn" onclick="removeHandheldAndBackpackBlowerSection()">

I'm having trouble seeing where you removed the whitespace. Could you clarify? — user10605575, Jun 18 '19 at 20:12
I removed it between the `input` tags in the second row. I'll update the answer to make it clearer. — cjc, Jun 18 '19 at 20:13

Spacing between buttons missing when using prependTo()

1 Answers1