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
I have a series of drop downs that are hidden and enable when needed (they are each different and when you chose a choice in a different drop down, the desired on is set to visible). Problem is, they are all over so if I select something at the end of the previous drop down, my desired drop down appears far away (because the hidden element's padding keep it over there). How can i prevent things from being moved around in HTML. Do I need to use CSS? Thanks!
You will need CSS.
I also recommend using JavaScript if you are familiar with it; CSS will help with it's pseudo selectors and you will have more control over the DOM with JS.
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 creating a set of divs which the user can navigate through with tab, and I wanted to add the standard orange focus outline to the elements.
Does anyone know what I need to do to add it in? I know that it works off the outline property, but I'm not sure what color to set it as, or whether I'd be better off using a box shadow with a bit of blur to get the same effect.
Also, in case it's relevant, I'm using dojo and avoiding jquery - but hopefully this is a pure css solution :)
I would suggest this working jsFiddle, note that in order to accomplish this you will have to use <div tabindex="0"></div>.
Every browser renders the focus differently. In order to unify the entire experience on your website, I would suggest removing the browser outline with CSS and adding your own style.
As far as I know, only Chrome renders the orange outline, I've tried to match the color as best as I could, but you can always experiment on your own.
You can use the css :focus Pseudo selector
:focus {
declaration block
}
Although the div attribute does not accept input, so it cannot have :focus normally. So you would have to set the div's to have a tabindex attribute
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;