„ukryte” nieruchomość nie działa z giętkiego polu

Mam następujący kod przy użyciu elastycznego skrzynkę„ukryte” nieruchomość nie działa z giętkiego polu

<!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>

Dlaczego obecność klasy lab-flex-col uniemożliwia ukrywanie wejścia tekstowego? Próbowałem hidden = 'hidden' i to też nie działa.

Gdy ukryty jest obecny jak w elemencie textarea, działa zgodnie z oczekiwaniami, ale po dodaniu klasy flex-box przestaje działać i element pozostaje widoczny.

Źródło

2014-05-21 st_clair_clarke

Utwórz klasę .hidden za pomocą display:none i dodaj ją do swojej klasy 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; 
}

Oto skrzypce robocze: http://jsfiddle.net/2mNux/3/

Źródło

2014-05-29 19:47:00

Najprostszym rozwiązaniem jest przesłonić całą zachowanie z selektora atrybutu. Nie było żadnych zmian dokumentu potrzebne:

[hidden]{ 
    display:none; 
}

http://jsfiddle.net/mjxcrrve/

Domyślam logikę domyślne zachowanie jest umożliwienie przesłanianie atrybut „ukryty” HTML z CSS. "hidden" jest mniej więcej niejawnym "display: none", więc nadpisanie stylu "display" jest naturalnym kandydatem. Ale zgadzam się, że wydaje się to nierozsądne, że modyfikowanie czystego układu powinno wpływać na widoczność.

Źródło

2017-08-14 13:34:26

ten dostaje zadanie:

[hidden] { 
    display: none !important; 
}

Należy pamiętać, że !important część jest ważne, aby zapobiec deklarację display: none przed zastąpiona przez inny kod CSS.

Więcej informacji: https://meowni.ca/hidden.is.a.lie.html

Źródło

2018-02-22 20:41:36

„ukryte” nieruchomość nie działa z giętkiego polu

Odpowiedz

Powiązane problemy