Menu
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.
362
If you are using flexbox and want the content to wrap, you must specify flex-wrap: wrap . By default flex items don't wrap. To have the images be three-across, you should specify flex-basis: 33.33333% .
Simply add min-height: 0; to the flex child that has our overflow container. Boom!
The align-content property is used to align the flex lines.
Just add margin-top: auto; to the footer. That will cause it to stick to the bottom of its container.
The easiest fix is to override the entire behavior with an attribute selector. No document changes needed:
[hidden]{ display:none; } http://jsfiddle.net/mjxcrrve/
I am guessing the logic behind the default behavior is to allow overriding the "hidden" html attribute with CSS. "hidden" is more or less an implicit "display: none", so overriding the "display" style is a a natural candidate. But I agree it seems ill-thought-out that modifying pure layout should affect visibility.
118
This gets the job done:
[hidden] { display: none !important; } Note that the !important part is important to prevent the display: none declaration from being overridden by your other CSS code.
More info: https://meowni.ca/hidden.is.a.lie.html
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
