2

I'm trying to set max-height property to slds-scrollable_y class inside lighting-datatable web component via css with:

.slds-crollable_y{
    max-height: 10rem !important;
}

But it's not working. Is it even possible to overwrite standard lwc css as it was in aura?

1
  • are you trying to say max height of whole table? – salesforce-sas Sep 30 '19 at 15:01
5

No. Because of CSS Isolation, you can't generally monkey with the internals of a component, especially if it's in another namespace. The documentation says:

CSS styles defined in a parent component don’t leak into a child. In our example, a p style defined in the todoApp.css style sheet doesn’t style the p element in the c-todo-item component, because the styles don’t reach into the shadow tree. See CSS.

There is currently a loadStyle hack that works around this, but I expect it will eventually be fixed.

You should be able to specify a height for the entire table, which should auto-size the inner table accordingly:

lightning-datatable {
  min-height: 10rem;
}

This is because the Shadow DOM allows us to modify the "outside" of the component, such as its size, a border, etc, while not allowing us to modify the internal components.

2

As of Spring'21 you can now use styling hooks as a beta feature to override slds styles from base lightning components:

https://www.lightningdesignsystem.com/platforms/lightning/styling-hooks/

-2

I was able to override the standard styling of a slds class. For example, on a quick action modal there is a class called "slds-modal__container".

Keep in mind this is a hack, I'm sure it will be pulled by salesforce at some point but for now it solves the issue I had.

By creating a static resource with the following:

.slds-modal__container{
    max-width: 70rem !important;
    width:80% !important;
}

I was able to override the standard behavior. In your component you will need to reference your resource with the following:

<ltng:require styles="{!$Resource.{NAME_OF_RESOURCE}}" />    

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.