Document flow & CSS styling: Hiding elements properly - javascript

I'm running into an issue hiding graphs in a modal. The user can click through the modal and the click events are hiding the other elements. However, some of the charts are out of the flow of the document by the hidden charts with position:absolute. I read up on position: absolute on MDN and the elements should be placed to their closest parent and they're not. Am I missing something?
absolute
The element is removed from the normal document flow; no space is created for the element in the page layout. Instead, it is positioned relative to its closest positioned ancestor if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left. This value creates a new stacking context when the value of z-index is not auto. Absolutely positioned boxes can have margins, and they do not collapse with any other margins.
Screenshots
Graph in intended flow
Other Charts out of flow
Code
$(".table-bordered").css({'visibility': 'hidden'});
$(".kendoOptionsLinear").css({'visibility': 'hidden'});
$(".kendoOptionsChart").css({'visibility': 'hidden'});
$(".kendoOptionsRadial").css({'visibility': 'visible'});
<div style="position:relative">
<div kendo-chart class="kendoOptionsChart"
k-options="options1" style="position:absolute;"></div>
<div kendo-radialGauge class="kendoOptionsRadial"
k-options="options2" style="position:absolute;"></div>
<div kendo-linearGauge class="kendoOptionsLinear"
k-options="options3" style="position:absolute;"></div>
<div kendo-radialGauge class="kendoOptionsRadial"
k-options="options4" style="position:absolute;"></div>
</div

When you apply the CSS style visibility: hidden, the element you have hidden is still part of the document flow. Though you cannot see the element, it takes up space in the layout and affects where sibling elements appear in the layout.
If you want to hide an element and not have that element continue to take up space and affect where other elements appear, use display: none
Elements with absolute position are taken out of the document flow. Their position is relative to the viewport. For example, an absolutely positioned element with top: 10px; left: 10px; would appear in the upper left hand corner of the viewport, 10 pixels from the top and 10 pixels from the left. If however, the parent container has position: relative, the absolute position of the child will be relative to its parent. Thus, the child would be 10 pixels from the top and 10 pixels from the left of its parent. not the viewport.
I hope this helps.

Related

scrollIntoView(true) is not scrolling to top, because of 'scrollable ancestor'. How do I get my element to be at the top of the view screen?

The docs say .scrollIntoView(true):
true - the top of the element will be aligned to the top of the visible area of the scrollable ancestor
[...]
Note: Depending on the layout of other elements, some elements may not be scrolled completely to the top or to the bottom.
ok, well how to I get it to scroll to the top, actually? I want my element to be the first visible thing, in the viewport.

Why fixed positioned element with lower z-index is front of relative positioned element with higher z-index?

I have a code which controls scroll dependant animations. The direct children of body are put on each other. So the first element has z-index 0, the second has z-index 1, and so on. And all of them are wrappers, with relative position. They children have relative position first, and if the element reaches the top of the window, the position of it switches to fixed. If it happen, it's wrapper goes back in the layer panel (with z-index: 100), behind an another element with position: fixed, and with z-index 2. It's a bit weird, because if the wrapper's child has position: relative, the wrapper takes the right place. After it's child's position turns to fixed, it immediately goes back in the layers. What's the relationship between these things? For better understanding i attach some pictures from chrome devtools, layers:
Here, the black element is the child, and the gradient element is the parent. The parent stays at the right place in the order of z axis, and the child has position: relative.
Here, just a few scrolls away, the child gains position: fixed, and the parent goes back (with z-index 100). What happens here? Why the parent goes back in the layers, if it's child has position: fixed?

How to add class to elements which are not fully visible in viewport?

I have something like a carousel with elements inside of a container with overflow: hidden
I can scroll left and right and I want to determine which elements are not visible at all or only half is visible (like on this picture) and when add to this invisible and half visible elements a class.
Width of each element is for example 100px but width of container depends on screen size. I can get number of elements which are visible (by dividing offsetWidth of container by width of one element)
Alse I know that there is such thing as getBoundingClientRect() but not sure how to use it in this case.
example
Here you can see how I try to implement getBoundingClientRect but I can't figure out which elements to target. I want to add class to the div which is partially seen (4th) and if on the first click part of the first div would be seen - to it too.

HTML z-index not working as expected - element position issue?

I have a page with an input element whose position is determined by the normal flow of the page (i.e. its position is NOT explicitly defined as part of the element definition).
Then, I have other elements (divs) that are created programmatically with fixed position, and should appear behind the input element whenever there is an overlap between them.
I tried assigning to the input element a ridiculously high z-index (100001, while the programmatically elements have a z-index < 1000) but the input element still is shown BEHIND the others.
I found some posts suggesting that the input element should also be positioned as the other elements, but this could have negative impact on the general layout of the page.
Does anyone have a suggestion I may try?
Thanks.
z-index only applies to positioned elements, so you need to position it.
Set it to position: relative if you want to position it without moving it or taking it out of normal flow.
z-index is intended for elements positioned as absolute, relative and fixed.
Try setting your input position: relative, then you z-index should work.
#myInput {
position: relative;
z-index: 100001;
}

Fixed effect of div within a parent div but position stick on screen as page scrolls

I want a DIV element fixed but relative to a parent DIV for as the screen resized that fixed DIV will move as the parents moved/resized so when you scroll down the page it will stick to that position. As i know when use position fixed on css, it will be relatively fixed to the entire screen, so the position of that fixed div will be relative to the size of your screen. What i want is that to stick or let the DIV stay to that location of the screen even if you scroll the page but its position will be relative to its parent DIV container. Is there any way to do that on CSS/Javascript/jquery?
Note: The effect should be like position:fixed where the DIV wont move when you scroll the page.
Any answer is greatly appreciated.
You may use position: absolute. You should nest the div inside a parent div. Assign top: 0, left: 0.
Here is the demo.
and if you want the div fixed in a location, Here is the demo.
Hope this helps

Categories