Set Grid Width - Smart UI Components

This topic has 3 replies, 2 voices, and was last updated 2 years, 3 months ago by svetoslav_borislavov.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
August 5, 2022 at 7:41 pm #103451

Johan Iskandar
Participant

Hello,

I wonder how to set the Grid width, I am using StencilJs. Thank you.

regards,

Johan

August 8, 2022 at 6:58 am #103455

svetoslav_borislavov
Participant

Hi,

You can set the width with CSS’s width property.

Here is a quick demo of setting the width to 100% and the height to 300px: https://codepen.io/svetoslavb04/pen/OJvEWMe

If you have any questions, do not hesitate to contact us!

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

August 8, 2022 at 10:04 am #103464

Johan Iskandar
Participant

Hello,

Thank you for you respond. I think the problem that I have is because it is under the shadow root. I am using Stenciljs, how to overswrite the default styling in shadow root. Can I do it without document.getSelector, I just want the easiest solution so I can overwrite the css file rather than doing it programmatically

https://ibb.co/x5L2026

in the css

smart-ui-grid {
width: 800px;
height: 800px!important;
}

But this does not overwrite the shadow root styling. Please shed some light. Thank you.

regards,

Johan

August 9, 2022 at 6:41 am #103465

svetoslav_borislavov
Participant

Hi,

You can read more about styling while using shadow dom here: shadow-dom
Basically, the shadow dom inherits the CSS variables so each component has exposed CSS variables to play with.
Here is a link for the grid’s variables: css-variables

If you need further help, do not hesitate to contact us!

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.