Removes unnecessary important in VerticalLayout_IE9

[jaszczw]

Fixes issue for IE9 as style.display = 'table !important' was omitted when passing styles as props due to the fact it's an inline style so it takes precedence nevertheless without the need of important.

[bywo]

@jaszczw thanks for this. could you explain how to repro the issue that this fixes?

I believe we still need that display: table !important. If we don't put !important there, then this style will override because it is !important: https://github.com/byronmwong/react-flexbox-layout/blob/7964ddd8e19c1c5158ff67bd3229a93f7dc01738/src/styles.css#L8

[jaszczw]

@byronmwong I see your point but

https://github.com/facebook/react/issues/1881 https://github.com/ManuelDeLeon/viewmodel-react/issues/19

tldr;

Styles applied via bindings do not work if they include !important

So currently !important just isn't applied at all, unless we add some specific hacks.

could you explain how to repro the issue that this fixes?

I have been trying to test library in IE9 and saw that there are no styles applied to VLayout.

[bywo]

ah man, didn't know React had that limitation :(

okay, I think a better fix would be to apply another class name to the element, for example noFlexGrow. Then, add a couple more CSS rules:

.rflGrowChildStatic > .noFlexGrow { display: table !important; }

.rflGrowChildStatic .rflExpandChild > .noFlexGrow { display: table !important; }

That way, we work around the React limitation but still override display: block !important via higher specificity.