I am using bootstrap visibility classes as follows on my webpage:
<div class="hidden-sm">
<div id="lrg-div-A"></div>
</div>
<div class="hidden-lrg">
<div id="lrg-div-B"></div>
</div>
<div class="hidden-md">
<div id="lrg-div-C"></div>
</div>
The visibility classes work and are hidden in the viewport where required. But, when I look at the markup in the browser's developer tools, I still see the markup for the hidden divs. For example, on large screens, "lrg-div-B" is not seen in the viewport, but the markup is still seen in the HTML tab. Is there anyway to remove it from the markup as well, similar to what 'dispaly: none' does?
display: none doesn't remove it from the markup, but it does remove it from the document flow so that it doesn't take up space. You can remove a node with javascript using remove() or removeChild() but mind you can't get it back again (unless you store it and re-append it later).
console.log('Hidden node: ', document.querySelector('.hidden-sm'));
//Hidden node: <div class="hidden-sm">…</div>
console.log('Before remove(): ', document.getElementById('lrg-div-B'));
// Before remove(): <div id="lrg-div-B">large B</div>
document.getElementById('lrg-div-B').remove();
console.log('Removed node: ', document.getElementById('lrg-div-B'));
// Removed node: null
.hidden-sm {
display: none;
}
<div class="hidden-sm"> <!-- hidden but still in markup -->
<div id="lrg-div-A">large A</div>
</div>
<div class="hidden-lrg">
<div id="lrg-div-B">large B</div> <!-- removed from markup -->
</div>
<div class="hidden-md">
<div id="lrg-div-C">large C</div>
</div>
It is not supposed to remove the elements from markup. CSS handles how DOM looks not its structure. You need to use a bit of Javascript if you actually want to remove the DOM elements.
Related
Is there a way to tell Tailwind: If a parent has a certain class then show a certain HTML element, if not hide it? Or can this not be done in Tailwind?
<body>
<div class="hidden">Hello</div>
</body>
<body class="show">
<div class="block">Hello</div>
</body>
Yes!
You can use and arbitrary value on the parent, if you conditionally add the class it will show the children like so:
Demo: https://play.tailwindcss.com/0pCtnVrAh7
<!-- hidden -->
<div class="">
<div class="hidden item">Hey!</div>
</div>
<!-- Show if class "[&_.item]:flex" is added-->
<div class="[&_.item]:flex">
<div class="hidden item">Hey!</div>
</div>
<!-- Coming soon -->
<div class="group should-show">
<div class="hidden group-[&.should-show]:block">Hey!</div>
</div>
In a future update, hopefully tailwind will allow us to use the group modifier to style based on if the group has an additional class.
No. Tailwind is a css framework. To use conditional statements, you can either use Tailwind with javascript or php or any other languages.
Actually, there is.This is a css solution, but it can be achieved in tailwind as well:
.hidden {
display:none
}
.parent .hidden {
display:block
}
<div class="hidden">Text that doesn't show up</div>
<div class="parent">
<div class="hidden">
Text is visible
</div>
</div>
html
I have this:
<div class="block3">
<div class="surround">
<div class="s_title">
<h3>Title</h3>
</div>
<div class="block_content">
<div class="content"> </div>
</div>
</div>
</div>
In my example I can't add content directly in HTML (blocks rendered by default in PHP), so I need to add in CSS.
The hard part of this is that I need to add text only in block3 element, after <h3> (.s_title:after will affect all s_title, so it will not work for me.)
Is there any way to do this?
Just add .block3 in front of your selector like how you would limit selection of any other element to some container element:
.block3 .s_title:after
I am using the following CSS to try and remove the left-border on the first child div of any element with the class called, "tblRow"
.tblRow div:first-child{
border-left: none;
}
<div class="tbl">
<div class="tblRow">
<div class="tblCell">Lower limit QTY</div>
<div class="tblCell">Upper Limit</div>
<div class="tblCell">Discount</div>
</div>
<div class="tblRow">
<div class="tblCell">1</div>
<div class="tblCell">5</div>
<div class="tblCell">25%</div>
</div>
</div>
This only removes the left-border from the first child div in the first row. It does not remove it in the second row. Any ideas?
I generally only use the :first-child and :nth-child psuedo selectors when I have little or no control over the elements or they are populated dynamically where I cannot rely on an order. Additionally, since :nth-child is CSS3, you can't rely on complete browser compatibility. If you can do without this psuedo selector, my advise is to create a secondary class for this purpose.
.tblCell.firstCell{
border-left: none;
}
<div class="tbl">
<div class="tblRow">
<div class="tblCell firstCell">Lower limit QTY</div>
<div class="tblCell">Upper Limit</div>
<div class="tblCell">Discount</div>
</div>
<div class="tblRow">
<div class="tblCell firstCell">1</div>
<div class="tblCell">5</div>
<div class="tblCell">25%</div>
</div>
</div>
It seems to work on the fiddle, so you probably have a (hidden) text node somewhere there. Therefore I suggest using .tblRow div:first-of-type { ... }, if possible from browser support point-of-view.
I am wondering how to override styles of shell view being injected in Durandal inside div with id="applicationHost" ... I am trying to use common Bootstrap template (sticky footer with fixed navbar) and it works as standalone but as soon as I use it within shell.html the "wrapper" looses its auto height...
Here is my shell.html
<div>
<div id="wrapper">
<!-- ko compose: {view: 'nav'} -->
<!-- /ko-->
<div id="content" class="container-fluid">
<!--ko compose: {
model: router.activeItem, //wiring the router
afterCompose: router.afterCompose, //wiring the router
transition:'entrance', //use the 'entrance' transition when switching views
cacheViews:true //telling composition to keep views in the dom, and reuse them (only a good idea with singleton view models)
}--><!--/ko-->
</div>
<div id="push"></div>
</div>
<footer id="footer">
<div class="container-fluid">
<div class="row-fluid">
<div class="span6"><p class="muted">© ABC Company Inc. 2013. All rights reserved.</p></div>
<div class="span6 "><p class="muted pull-right">v0.0.1-debug</p></div>
</div>
</div>
</footer>
</div>
the nav sub-view just has standard <nav id="mainnav" class="navbar navbar-fixed-top"> and the styles are the same as on Bootstrap example page...
When I examine styles via Firebug I can clearly see that wrapper div has lost its full height...Driving me nuts! :)
I fixed this by adding the following style to my main html page after the styles necessary to get the sticky footer to work
/*durandal fixes*/
#applicationHost, #applicationHost > div
{
height: 100%;
}
The first selector takes care of the applicationHost div in the main html page and the second the one inserted by durandal (it has a class of durandal-wrapper, so you could make the selector more specific if you wanted). As you have an extra div in your shell.html file you may need the following:
/*durandal fixes*/
#applicationHost, #applicationHost > div, #applicationHost > div > div
{
height: 100%;
}
For some reason div elements change their parents during rendering in unexpected way, reproducible in Firefox and Chrome.
E.g.
<div class="main">
<div class="slot"/>
<div class="slot"/>
</div>
<div class="footer"></div>
Firefox debugger will show as this at runtime as:
<div class="main">
<div class="slot"><div class="slot"/></div></div>
<div class="footer"></div>
</div>
When I remove .slot elements(see the code attached), everything renders as expected(#footer place in tree after rendering is same as in the source).
Code:
http://pastebin.com/3j3aQFdh
The problem is that you use empty divs: like that
<div />
You should try to change your code to use valid divs with empty content:
<div></div>