Results 1 to 7 of 7

Thread: ExtReact box-sizing CSS

  1. #1
    Sencha User
    Join Date
    May 2017
    Posts
    68

    Default Answered: ExtReact box-sizing CSS

    I see that you are using this CSS property that overrides the default (content-box) that is a standard. Usually, the border-box is used only for IE in quirks mode.

    .x-root * {
    box-sizing: border-box;
    }

    Can you fix it? It renders the app I'm trying to test unusable.

    Thank you,
    Yuri


  2. I think we can make this easier to handle by adding a css class to all non ExtReact children rendered by reactor, for example, something like "x-react-element". Then, with a few lines of css you could reset the default box-sizing for all third party content:

    Code:
    .x-react-element {
        box-sizing: content-box;
    }
    .x-react-element * {
        box-sizing: inherit;
    }
    So the html resulting from something like:

    Code:
    <Container>
        <div id="myDiv"></div>
    </Container>
    would be

    Code:
    <div class="x-root x-container">
        ...
            <div class="x-component x-react-element">
                <div id="myDiv"></div>
            </div>
        ...
    </div>
    What do you think?

  3. #2
    Sencha User Mark.Brocato's Avatar
    Join Date
    Mar 2015
    Location
    Maryland
    Posts
    482
    Answers
    114

    Default

    The x-root class is assigned to the outermost ExtReact component. Since launch() creates a viewport, it's getting applied to the <html> element. If you avoid using a viewport (by using the hoc we chatted about earlier), then border-box sizing would only be applied within ExtReact components. If you wanted to apply content-box sizing to elements within an ExtReact container, you could do that with css.

  4. #3
    Sencha User
    Join Date
    May 2017
    Posts
    68

    Default

    It becomes problematic when we use third party components inside Sencha containers. Since box-sizing is not inheritable property it would make much more sense to apply it selectively to Sencha elements only. Using * qualifier in the rule propagates it down to all children, whether Sencha or not. Instead Sencha could use .x-box-sizing-border-box class instead.

  5. #4
    Sencha User Mark.Brocato's Avatar
    Join Date
    Mar 2015
    Location
    Maryland
    Posts
    482
    Answers
    114

    Default

    Looks like box sizing should be inheritable: https://css-tricks.com/inheriting-bo...best-practice/. Wouldn't you be able to apply box-sizing: content-box on the top element element (or a wrapper element) of the third party component?

  6. #5
    Sencha User
    Join Date
    May 2017
    Posts
    68

    Default

    Here it says it is not inheritable:

    https://developer.mozilla.org/en-US/...CSS/box-sizing

    I also checked it in Chrome and it is NOT inherited.

    Yes, I can apply it selectively but now ExtReact introduces this extra requirement to do that which is not ideal. In ExtJS world it was not important since all components were 'native' to ExtJS and this behavior was well defined. Now, that ExtJS is playing in React world it should not impose its own rules outside its own boundaries.

  7. #6
    Sencha User Mark.Brocato's Avatar
    Join Date
    Mar 2015
    Location
    Maryland
    Posts
    482
    Answers
    114

    Default

    I think we can make this easier to handle by adding a css class to all non ExtReact children rendered by reactor, for example, something like "x-react-element". Then, with a few lines of css you could reset the default box-sizing for all third party content:

    Code:
    .x-react-element {
        box-sizing: content-box;
    }
    .x-react-element * {
        box-sizing: inherit;
    }
    So the html resulting from something like:

    Code:
    <Container>
        <div id="myDiv"></div>
    </Container>
    would be

    Code:
    <div class="x-root x-container">
        ...
            <div class="x-component x-react-element">
                <div id="myDiv"></div>
            </div>
        ...
    </div>
    What do you think?

  8. #7
    Sencha User
    Join Date
    May 2017
    Posts
    68

    Default

    Yes, that would be good. Probably would need to be documented somewhere.

    Thanks,
    Yuri

Similar Threads

  1. ExtJS or ExtReact for new application
    By ZVONDIC in forum Q&A
    Replies: 5
    Last Post: 26 May 2017, 3:00 AM
  2. Using extReact with Extjs
    By philiparad in forum Q&A
    Replies: 1
    Last Post: 25 May 2017, 11:45 AM
  3. Cannot clone the ExtReact starter app
    By geniny in forum Q&A
    Replies: 4
    Last Post: 16 May 2017, 11:43 AM
  4. Cannot clone the ExtReact starter app
    By geniny in forum Ext JS 6.x Q&A
    Replies: 0
    Last Post: 16 May 2017, 9:53 AM
  5. Sencha ExtReact is Now Available
    By mitchellsimoens in forum Q&A
    Replies: 0
    Last Post: 16 May 2017, 4:06 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •