Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #103451
    Johan Iskandar
    Participant
    Up
    0
    Down

    Hello,

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

    regards,

    Johan

    #103455
    Up
    0
    Down

    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/

    #103464
    Johan Iskandar
    Participant
    Up
    0
    Down

    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

     

    #103465
    Up
    0
    Down

    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/

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.