ui:inputCheckbox how to allign with the checkbox itself

Question

i tried to add a checkbox using ui:inputCheckbox and i wasn't able to align the checkbox with the label

this is the code:

<ui:inputCheckbox aura:id="leadsCheckBox" label="leads" click="{!c.handleFilters}" value="true"/>

and in the web app i see

please assist, thanks

This is a matter of modifying the styling applied to your markup. Take a look into SLDS for some tips on Salesforces Lightning Design System and if you have any free time turn over to the Lightning Components Trailhead. — TSmith, Commented Mar 20, 2017 at 10:59
@TSmith i already looked at the SLDS, copied the code from there as an example and it worked, but i want to try and use the ui:inputCheckbox. so i think its better to stick to the SLDS like you said, thanks! — Dana Griff, Commented Mar 20, 2017 at 12:41

itzmukeshy7 · Accepted Answer · 2017-03-27 14:15:08Z

6

I found the answer! I wrote a class in css called .myCheckbox:

.THIS .myCheckbox{
  display: inline-block;
  float: left;
}

and added the class to the inputCheckbox:

<ui:inputCheckbox class="myCheckbox" aura:id="checkboxLeads" label="Leads" change="{!c.doInit}" value="True"/>

itzmukeshy7

3,17021 silver badges31 bronze badges

answered Mar 27, 2017 at 13:50

Dana Griff

1,59611 gold badges31 silver badges59 bronze badges

Add a comment |

Junaid P Khader · Accepted Answer · 2017-03-21 06:40:58Z

1

You can use <p> tag or even a <div> to display the label separately.

<div>leads</div>
<ui:inputCheckbox aura:id="leadsCheckBox"  click="{!c.handleFilters}" value="true"/>

answered Mar 21, 2017 at 6:40

Junaid P Khader

1,3978 silver badges17 bronze badges

Add a comment |

sfdx bomb · Accepted Answer · 2018-08-07 13:35:58Z

1

I used standard SLDS classes to achieve it :

  <ui:inputCheckbox aura:id="checkbox" labelClass="slds-p-horizontal--small slds-float--left" label="My Check" change="{!c.onCheck}"/>

answered Aug 6, 2018 at 19:18

sfdx bomb

1,6911 gold badge25 silver badges34 bronze badges

1

"i did it like this" does not provide an explanation, mind further elaborating on the classes you used alongisde any docuemtnation link(s)? thanks
– glls
Commented Aug 6, 2018 at 20:04
the css classes I used are standard SLDS classes. This code line will show the checkboxes in one line with the label as asked.
– sfdx bomb
Commented Aug 7, 2018 at 10:51
Please edit your post and explain, some users are not aware of this
– glls
Commented Aug 7, 2018 at 11:25
I am trying to use the standard SLDS classes to get the checkbox label to line up with the checkbox. I am not having success. Below is my code:
– Michele Kleinhomer
Commented Sep 23, 2019 at 15:04
$A.createComponent( "ui:inputCheckbox", { "value" : component.getReference("v.EventRSVP."+ fieldAPIName), "aura:id": "checkbox", "label": fieldLabel, "labelClass":"slds-p-horizontal--small slds-float--left" }
– Michele Kleinhomer
Commented Sep 23, 2019 at 15:05

| Show 1 more comment

3 Answers 3