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
    May 9 at 8:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.