"скрытое" свойство не работает с flex-box

У меня есть следующий код с использованием 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 он перестает работать и элемент остается видимым.

Ответы

Ответ 1

Создайте класс .hidden с display:none и добавьте его в свой div-класс.

HTML:

<div class='lab-flex-col-container'>
    <div class='lab-flex-col hidden' id='hidden-does-not-work'>
        <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>

CSS:

.lab-flex-col {
    display: flex;
}

.lab-flex-col.hidden {
    display: none;
}

Здесь работает скрипка: http://jsfiddle.net/2mNux/3/

Ответ 2

Самое простое исправление - переопределить все поведение с помощью селектора атрибутов. Не требуется никаких изменений документа:

[hidden]{
  display:none;
}

http://jsfiddle.net/mjxcrrve/

Я предполагаю, что логика поведения по умолчанию заключается в том, чтобы разрешить переопределять "скрытый" атрибут html с помощью CSS. "hidden" - это более или менее неявный "display: none", поэтому переопределение стиля "display" является естественным кандидатом. Но я согласен с тем, что кажется неправильным, что изменение чистого макета должно повлиять на видимость.

Ответ 3

Выполняется эта работа:

[hidden] {
    display: none !important;
}

Обратите внимание, что часть !important важна для предотвращения переопределения объявления display: none другим кодом CSS.

Дополнительная информация: https://meowni.ca/hidden.is.a.lie.html