javascript - Child div not disappearing with visibility hidden -

-

my code involves having div in div, , when set both of visibilities hidden, parent div disappears. in debugging attempt, tried print out visibility of child div, , has 'visibility: hidden'.

#popup {     visibility: visible;     margin: auto;     position: fixed;     background-color: black;     padding-top: 5px;     padding-bottom: 5px;     padding-left: .5%;     padding-right: .5%;     border-radius: 4px;     left: 14.5%;     top: 20px;     width: 70%;     height: 450px; } #redx {     visibility: visible;     position: absolute;     right: 0px;     top: 0px;     width: 35px;     height: 35px;     text-align: center;     font-size: 25px;     font-weight: bold;     color: white;     background-color: red;     transition: .2s color ease-out; }  ------------------------------------------------     // how control styles in changepopupvisibility()     var popup = document.getelementbyid('popup');     var redx = document.getelementbyid('redx');      var popupopen = true; ------------------------------------------------      // rx variable use paste redx in different functions.     var rx = "<div id='redx' onclick='changepopupvisibility()'>x</div><br>";  ------------------------------------------------ // how change visibility when x has been clicked function changepopupvisibility() {         popupopen = !popupopen;         if (popupopen) {             redx.style.visibility = "visible";             popup.style.visibility = "visible";         }         else {             redx.style.visibility = "hidden";             popup.style.visibility = "hidden";         } }

in case gets little confusing, i've put working version of mean on my website. click red x once , disappear, click word "left" , try again , parent disappear.

thanks.

you should use: display: none; makes element not displayed @ , has no effect on layout, visibility: hidden; element invisible still occupies space in layout.

read:

css visibility property

and more specifically:

css layout - display property


Comments

Post a Comment

Popular posts from this blog

javascript - Slick Slider width recalculation -

-
i'm trying add slide in panel on slick container css. carousel works except new width not being calculated when space has been added. recalibrate once advance next slide i'd happen each time panel opened or closed. i've tried adding both margin , padding, neither makes difference. ideas? https://jsfiddle.net/mhigley/dpf7mlpl/ html: <button type="button" id="button"><i class="fa fa-arrow-right"></i></button> <aside> <h2>slide in panel</h2> <ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol> </aside> <main role="main"> <div class="sections"> <section> <article> <h2>first slide</h2> <p>lorem ipsum d
Read more

jsf - PrimeFaces Datatable - What is f:facet actually doing? -

-
looking through primefaces code in app noticed following line: <f:facet name="header">#{trainsearch.traincount} trains</f:facet> it looks overriding header, makes sense, can explain me in little more detail? what happening line of code? complete code listed below: <p:datatable id = "results" value = "#{trainsearch.trains}" var = "train" rendered="#{not empty trainsearch.trains}" styleclass = "train-search-table horizontal-border"> <f:facet name="header">#{trainsearch.traincount} trains</f:facet> <p:column headertext = "train id"> <p:panelgrid columns="1" styleclass = "train-id-grid" layout = "grid"> <h:outputtext styleclass = "train-id-label" value="#{train.traini}"/> <h:outputtex
Read more

javascript - Rivets.js rv-show not working with rv-each -

-
i new rivets.js. given code: <div id="main"> <div> <button rv-on-click="toggle"> toggle </button> </div> <div> dynamic headers sould visible: {showdynamicheaders} </div> <table> <thead> <tr> <th>fixed header</th> <th>fixed header</th> <th rv-show="showdynamicheaders" rv-each-item="items"> {item.name} </th> </tr> </thead> </table> </div> var rvcontext = {}; var rview = rivets.bind($("#main"), rvcontext); rvcontext.showdynamicheaders = true; rvcontext.items = [ { name : "dynamic header 1" },{ name : "dynamic header 2" },{ name : "dynamic header 3" } ]; rvcontext.toggle = function(){ rvcontext.showdynamicheaders = !rvcontext.showdynamicheaders; } i'd expect
Read more