proprietà 'nascosto' non funziona con flex-box

Ho il seguente codice utilizzando flex-boxproprietà 'nascosto' non funziona con 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>

Perché la presenza della classe laboratorio-flex-Col impedisce il nascondiglio del metodo di scrittura? Ho provato hidden = 'hidden' e anche questo non funziona.

Quando nascosto è presente come nell'elemento textarea, funziona come previsto, ma una volta aggiunta la classe flex-box, smette di funzionare e l'elemento rimane visibile.

fonte

2014-05-21 st_clair_clarke

Creare una classe .hidden con display:none e aggiungerla alla classe 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; 
}

Ecco un violino di lavoro: http://jsfiddle.net/2mNux/3/

fonte

2014-05-29 19:47:00

La soluzione più semplice è quella di ignorare l'intero comportamento con un selettore di attributo. Nessuna modifica di documenti necessari:

[hidden]{ 
    display:none; 
}

http://jsfiddle.net/mjxcrrve/

sto indovinando la logica dietro il comportamento predefinito è quello di permettere l'override del attributo HTML "nascosto" con i CSS. "hidden" è più o meno un implicito "display: none", quindi ignorare lo stile "display" è un candidato naturale. Ma sono d'accordo che sembra mal concepito che modificare il layout puro dovrebbe influire sulla visibilità.

fonte

2017-08-14 13:34:26

Questo ottiene il lavoro fatto:

[hidden] { 
    display: none !important; 
}

nota che la parte !important è importante per prevenire la dichiarazione display: none venga sacrificata per il vostro altro codice CSS.

Maggiori informazioni: https://meowni.ca/hidden.is.a.lie.html

fonte

2018-02-22 20:41:36

proprietà 'nascosto' non funziona con flex-box

risposta

Problemi correlati