Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It only takes a minute to sign up.
Sign up to join this community
I have a custom table in LWC and standard margin of
<lightning-input
type="checkbox"
variant="label-hidden"
breaks cell center alignment. I know that since it is a nested component I can't set css directly and I think it is also not possible to change via Styling Hooks?
Edit: just to simplify my question. lightning-input has a default margin-right and I need to get rid of it to center the checkbox in my td table cell correctly
Your last screenshot gives it away:
margin-right: var(--lwc-spacingXSmall,0.5rem)
True, 0.5rem is the default. So set your own --lwc-spacingXSmall:
:host {
--lwc-spacingXSmall: 0;
}
It's all about the "var" keyword here:
A styling hook is a placeholder in the SLDS style sheet, for example, var(--slds-c-badge--color-background, #ecebea), which enables you to customize the style using the corresponding --slds-c-badge-color-background CSS custom property.
Maybe worth pointing out that the unfortunate "slds-checkbox_faux" seems the result of applying the "label-hidden" variant. I haven't checked, but you could play with other variants and leaving the label empty too.
