I am using an existing lightning component that displays some checkboxes. I am wondering if there is a way to reduce the size of the checkboxes.
<design:component >
<design:attribute name="childCheckbox1_label" label="Label Checkbox 1 "/>
<design:attribute name="childCheckbox1_storage" label="Checkbox 1 Output
Value"/>
<design:attribute name="childCheckbox1_defaultValue" label="Checkbox 1
Default Value"/>
<design:attribute name="childCheckbox2_label" label="Label Checkbox 2 "/>
<design:attribute name="childCheckbox2_storage" label="Checkbox 2 Output
Value "/>
<design:attribute name="childCheckbox2_defaultValue" label="Checkbox 2
Default Value"/>
</design:component>
I checked the code using inspect element. Found out this piece of code.
slds-form-element_stacked:not([class*="slds-size"]), .slds-form_stacked .slds-form-element:not([class*="slds-size"]), .slds-form_horizontal .slds- form-element_stacked:not([class*="slds-size"])
{ width: 100%; flex-basis: 100%; }
The width above is set to 100%. I need to change the width somehow in the above code. I tried to add the following in style class but it does not work.
.THIS.slds-form-element_stacked .slds-form_stacked .slds-form_horizontal { width: 3%; flex-basis: 100%; }