0

I have an iteration of checkboxes. There is almost 1 new line of space between these checkboxes. How do I reduce this with css. I tried

.THIS .myCheckbox{
  display: inline-block;
  padding-bottom: 0.1em;
  float: left;  
}

But this does not seem to reduce the space, below is my iteration

  <aura:iteration items="{!v.records}" var="item" indexVar="indx"> 
       <ui:inputCheckbox aura:id="checkbox" 
                          value="{!item.checkboxValue}" 
                          text="{!item.val}" 
                          name="{!indx}" 
                          label="{!item.val}" 
                          change="{!c.selected}"
                          class="myCheckbox"/>    
    </aura:iteration>  
  • why are you adding &nbsp; in iteration ? – Manjot Singh Feb 26 '18 at 17:26
  • @ManjotSingh I had some text behind it, I removed it. But any suggestions to my question? – Thomas Feb 26 '18 at 17:38
  • 1
    @Thomas You apparently didn't remove it from your source code; I just tried your code in my org, and it doesn't have the extra line of space. – sfdcfox Feb 26 '18 at 17:42
  • after removing &nbsp; there is no space between checkboxes – Manjot Singh Feb 26 '18 at 17:42
  • Thx for pointing this out – Thomas Feb 26 '18 at 17:44
2

The &nbsp; is creating the extra line in your presentation; without it, you'll see that they are neatly stacked on top of each other.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.