I have the following code using flex-box
<!DOCTYPE html><polymer-element name='test-flex'><template><style> .lab-flex-col-container { display: flex; flex-flow: column; align-content: center; background-color: gold; border-radius:5px; margin: 5px; } .lab-flex-col { display:flex; flex-flow:column; align-self:center; margin:5px; } .margin2 { margin: 2px; }</style><form id='form' class='form'><div class='lab-flex-col-container'><div class='lab-flex-col' id='hidden-does-not-work' hidden><input id='hidden-works' type='text'></div><div id='hidden-works' hidden><textarea></textarea></div><div id='hidden-does-not-work-here-either' class='lab-flex-col' hidden><button>Save</button></div></div></form></template><script type="application/dart;component=1"> import 'package:polymer/polymer.dart'; import 'dart:html'; @CustomTag( 'test-flex' ) class TestFlex extends PolymerElement { TestFlex.created() : super.created(); ready() { $['hidden-does-not-work'].hidden = true; } void syncDb ( Event e, var detail, var target ) { } @override void enteredView() { super.enteredView(); $['hidden-does-not-work-here-either'].hidden = true; } }</script></polymer-element>Why does the presence of the lab-flex-col class prevents the hiding of the text input?I have tried hidden='hidden' and this does not work either.
When hidden is present as in the textarea element, it works as expected, but once the flex-box class is added, it ceases to work and the element remains visible.