I'm using visibility:hidden to hide certain elements, but they still take up space on the page while hidden.
How can I make them totally disappear visually, as though they are not in the DOM at all (but without actually removing them from the DOM)?
Try setting display:none to hide and set display:block to show.
use style instead like
<div style="display:none;"></div>
Toggling display does not allow for smooth CSS transitions. Instead toggle both the visibility and the max-height.
visibility: hidden;
max-height: 0;
To use display:none is a good option just to removing an element BUT it will be also removed for screenreaders. There are also discussions if it effects SEO. There's a good, short article on that topic on A List Apart
If you really just want hide and not remove an element, better use:
div {
position: absolute;
left: -999em;
}
Like this it can be also read by screen readers.
The only disadvantage of this method is, that this DIV is actually rendered and it might effect the performance, especially on mobile phones.
Look, instead of using visibility: hidden; use display: none;. The first option will hide but still takes space and the second option will hide and doesn't take any space.
display: none is solution, That's completely hides elements with its space.
Story about display:none and visibility: hidden
visibility:hidden means the tag is not visible, but space is allocated for it on the page.
display:none means completely hides elements with its space. (although you can still interact with it through the DOM)
The answer to this question is saying to use display:none and display:block, but this does not help for someone who is trying to use css transitions to show and hide content using the visibility property.
This also drove me crazy, because using display kills any css transitions.
One solution is to add this to the class that's using visibility:
overflow:hidden
For this to work is does depend on the layout, but it should keep the empty content within the div it resides in.
display:none to hide and set display:block to show.
here's a different take on putting them back after display:none. don't use display:block/inline etc. Instead (if using javascript) set css property display to '' (i.e. blank)
$('#abc').css({"display":"none"});
this hides the content and also does not leave empty space.
above my knowledge it is possible in 4 ways
HTML<button style="display:none;"></button>
CSS #buttonId{ display:none; }
jQuery $('#buttonId').prop('display':'none'); & $("#buttonId").css('opacity', 0);
display:none is the best thing to avoid takeup white space on the page
Thanks to this question. I wanted the exact opposite, i.e a hidden div should still occupy its space on the browser. So, I used visibility: hidden instead of display: none.
If somehow all the other options to hide an element do not suit you, there is another option which I do not see mentioned. It works assuming the element has no children.
It will hide an element without occupying space:
display: contents;
Check the browser support as it is a newish CSS feature.
With visibility set to hidden the only way I know of to make it not take up space is to use position:absolute and then set the top, left, etc., parameters. It's not ideal but it works.
As I have been troubleshooting this issue and researching, I thought I'd share my insight. If you've gotten yourself to this page, I assume you are trying to figure out why your element is taking up space on your page even with style.display = "none".
Most likely, the reason for this is NOT the element in question; but a child, parent, or sibling of it. Open up your console and go to the Elements tab. Look in there for clues as to what could possibly be taking up space. Maybe you're using a template-engine and didn't realize a <br> was rendering outside of a dynamic <div>. Or maybe you should be targeting a more nested element. Try to think along these lines while troubleshooting.
if display: none; doesn't work you have to add clear: none;
Related
I have a long tree element (mat-tree angular) in a <div> tag of fixed height with scroll. How can I change elements that are hidden outside the <div> (display: none)? Accordingly, when scrolling, the style should change
Well your answer is quite vague... But if you like to style elements based on their screen location you will have no luck with css and would have to calculate the position of the element and the current screen via java-script and do some javascript manipulations on the found objects...
that said:
don't do this.
First question:
1.) What is the problem?
2.) What do you want to achieve?
As #Vivek Vikranth also commented there are some well established things out there that COULD help... but your idea is to unclear yet.
Depending on your needs and supported browsers, you might have to use IntersectionObserver OR scroll event subscription / interval polling + document.elementFromPoint(). See:
https://caniuse.com/#search=intersectionobserver
https://developer.mozilla.org/ru/docs/Web/API/Intersection_Observer_API
Pretty new to this coding stuff so forgive the ignorance :)
I'm trying to remove some inline styling from this Wordpress theme which I understand overwrites any external CSS files.
When I 'inspect element' I get the following, and changing hidden to visible on the right does work. But usually it would say like style.css:202 or whatever line of the CSS I need to change and that's how I usually do it. This time though obviously it says element.style { and I can see that style="overflow: hidden; on the left hand side (highlighted).
http://i.imgur.com/qkKHsy0.jpg
How would I go about essentially making that overflow visible?
I've added the following custom css but it just crosses out the overflow and doesn't change anything:
.slides_container[style] {overflow:visible !important;}
Thanks a lot!
For me overflow:auto!important and overflow:visible!important both working nicely.
See live here: http://jsfiddle.net/mayankcpdixit/h7JmT/
This is because there is a javascript which is adding these styles on document load. And I believe this is some kind of slider where usually the overflow is hidden. If you need a slider where overflow is visible, then select your desired slider and use it. Make sure you remove the present slider before doing so.
putting
overflow: visible !important
will allow you to give preference over styles inheriting from other style sources. But will not stop a javascript changing the styles.
I believe this one below created by roXon will give you some idea of overflow : visible sliders
http://jsfiddle.net/roXon/tMxp5/1/
I am looking for a way to hide HTML5 elements in a way that when i will show them, they will be in the same place and with the same style.
I tried removing them from the RootPanel and adding back, but they did not reappear.
// before
$("#myElement").css({"visibility":"hidden"});
// after
$("#myElement").css({"visibility":"visible"});
Adding and Removing elements should not be done more often. Its a performance concern. Each time you add and remove some elements Browser does some operations as mentioned in the link
So, best way to show/hide elements is by using CSS display: None or visibility: hidden properties.
style="display:none"; or style="visibility:hidden";
Is there a way to display a row of links horizontally without using float:left? It's way too hard to center a div when using float:left, I can never get it to work.
Use display:inline;
http://jsfiddle.net/tcQzL/3/
If your elements are inline elements they will display in one row, otherwise you must make them inline.
I'm not sure if I understood correctly, but just make new div-where your buttons are in. And in that new div make your links have float:left
Then just normally position that new divyou made.
But I think that those those earlier answers from Andrei S and mesiesta are more better.
you could try display: inline or inline depending on your needs (from what I know, inline-block offers more flexibility than just inline)
here, check this fiddle
There's a catch though if you use these, if you look in the fiddle, my first two elements are written one after another so that I don't have any gaps between them (that's why I added the borders) and the other ones are written one below each other and as you can see, there's the gap I was talking about. So keep that in mind while writing your code.
There are different workarounds about this, but if you do need borders, and not just the text, you should really consider using float to avoid any workarounds
You can use display:inline-block for that. Write like that
.link{
display:inline-block;
*display:inline;/* For IE7 */
*zoom:1;/* For IE7 */
vertical-align:top;
}
Check this http://jsfiddle.net/tcQzL/10/
I've been setting up a very basic Wordpress site. All of the pages have a lot of empty space at the bottom. Pages with more placeholder content have more space at the bottom than the others.
I have been reading other threads from people with similar problems, and I can't fix the problem on my site using suggested fixes (the margin property in a certain div was often the culprit).
Check it out: http://www.hairofthedogproductions.co.nz/?page_id=5
My client wanted a totally minimal bare-bones site so I have collapsed post/page metadata, comments, and the sidebar. I just can't for the life of me get rid of the big empty space at the bottom.
Your main problem is in the comments template. I see you're using visibility: collapse to hide elements, but collapse is just for table elements, and if used in other tags it'll default to hidden. Plus, keep in mind that visibility: hidden hides elements but keeps them in flow. You might want to use display: none instead.
This will solve your problem, try it out.
#comments { display: none; }
Validate your page: http://validator.w3.org
I validated it and found about a dozen errors (some of them potentially serious enough to break the layout of the page, such as an unterminated tag).
When inspecting the source in Chrome, the element in the blank area was the HTML tag itself, which might indicate an overall failure to determine the correct document structure--the parser tries but can't always determine what you want it to do when there are malformed tags.
Just apply overflow:hidden on your main wrapper then it will remove all blank space at the bottom
#main {
overflow: hidden;
}