1

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?

custom table

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

1 Answer 1

3
+50

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.

1
  • 1
    works great, thank you!
    – Karel L
    Commented May 9, 2022 at 8:53

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .