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
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
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.
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0