У меня есть следующий код с использованием 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>
Почему присутствие класса lab-flex-col предотвращает скрытие ввода текста? Я попробовал hidden = 'hidden', и это тоже не работает.
Когда скрытый присутствует как в элементе textarea, он работает так, как ожидалось, но после добавления класса flex-box он перестает работать и элемент остается видимым.