Skip to content

marginBottom gets dropped sometimes #2231

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
jussi-kalliokoski opened this issue Sep 23, 2014 · 6 comments
Closed

marginBottom gets dropped sometimes #2231

jussi-kalliokoski opened this issue Sep 23, 2014 · 6 comments

Comments

@jussi-kalliokoski
Copy link

In the product I'm currently developing, there's a case where the marginBottom value gets dropped by React sometimes. Unfortunately I couldn't manage to reproduce the issue in my attempts at a reduced test case, and I can't post the link to the unreleased product yet, but I thought I'd report it anyway in case someone has additional information to go by.

Basically the case is that in the application, I have components whose style value I set to an object that is something like this:

var style = {
    margin: "0 10px",
    marginBottom: "6px",
};

These values are dependant on the screen size, which is listened to with window.onresize and then updated with something like setProps({ screen: { width: screen.width, height: screen.height } });.

However, what I noticed is that when resizing the screen, more often than not, the components end up not having a vertical margin at all. I know that this is caused by React because I tried logging the value assigned to style in render() and its sound, and actually the render() is not even called when you hit this behavior. Something that makes the problem go away is setting the style as

var style = {
    margin: "0 10px 6px 10px",
};

instead, which is what I'm doing for now. The application is running v0.10.0, but I just tried with v0.11.2 and it's still reproducible.

@jussi-kalliokoski jussi-kalliokoski changed the title borderBottom gets dropped sometimes marginBottom gets dropped sometimes Sep 23, 2014
@syranide
Copy link
Contributor

Overlapping styles are not currently supported by React, see #2013. While it would be nice to support it, run-time performance is affected so it's a tricky subject (although offline transforms is definitely an idea).

@jussi-kalliokoski
Copy link
Author

Ah, I see. Thanks, that makes sense. Closing.

@zpao
Copy link
Member

zpao commented Sep 23, 2014

I actually think that it wouldn't be terrible to make this work. I'm betting that the reason it doesn't is that we expand shortcut properties and set each individual property (eg margin gets expanded into marginTop, marginRight, marginBottom, marginLeft) and we probably screw up key order (which is isn't technically guaranteed anyway). There would be some perf tradeoffs to make this work but technically shouldn't be too hard. Not sure if it's worth it. #2013 has some good points.

@azazdeaz
Copy link

Hi, here is a simple use case:
When i set the style of a React Component which is including a shorthand property and a modifier for that property
ex. {border: 'solid 1px black', borderBottom: 'none'}
than set a new style without the modifier
{border: 'solid 1px black'}
the new style object wont apply properly. In this case the inline style remains:

border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-color: black;
border-right-color: black;
border-left-color: black;

codepen example

@syranide
Copy link
Contributor

@azazdeaz {border: 'solid 1px black', borderBottom: 'none'} is invalid, you may not set overlapping styles.

@polyakoff
Copy link

Would be really nice to have overlapping styles working.
I have an HOC footer I would like to pass elements to and place them according to my needs inside. I wrote the following code with react-bootstrap:

const Footer = React.createClass({
    render: function() {
        var children = React.Children.map(this.props.children, function(child){
            return React.cloneElement(child, { className :"btn btn-primary", margin : "40" });
        });
        return (
            <div style={style}>
                {children}
            </div>
        );
    }
});

And got className applied, while margin not. Would be convinient from my point to have both working.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants