my problem is the following:
I've got a grid of containers. When you hover one of them, a child element(absolutely positioned) is popping up. I gave this child element a z-index of 100, and everthing works fine. Except in IE7, where img-elements of the parent container lie above the popup.
Now I know that you can give the parent element a higher z-index than the popup to avoid this problem. In my grid layout, this doesn't work, because there are several parent-container over which the popup is floating. Applying this technique, every container lies in front of the popup, even in modern browsers.
Here is a simple sketch of the situatuion:
How can I solve this problem?
Setting a z-index on a div is actually supposed to create a stacking context, not simply bring the div, it's applied to, above another.. so while I do think IE7 didn't get it quite right, (surprise!)
I think it would be better to make the oner divs the ones that create the start of the stack by setting the z-index on them, and what you want it for the first oner to have a higher z-index than the second
Related
I have a TextField inside a Container. The Container is in the SOUTH of a Form (BorderLayout). The Form's CENTER Contains a scrollable BoxLayout.y() Container
When the bottom TextField is tapped on Android, the keyboard is shown. Sometimes, it cuts the TextField's parent Container up to the TextField's bottom, sometimes it doesn't. When it does cut it, the Form's CENTER also gets pushed up, and the Toolbar disappears. I am trying to make sure that calling the keyboard never cuts the parent Container and that the CENTER Container doesn't get pushed up
Is there a way to guarantee that the parent Container is always shown so that it doesn't get cut?
Example of an instance when it doesn't get cut:
Example of an instance when it does get cut. Notice Toolbar is gone and CENTER Container is pushed upwards:
Generally this is really hard to tune positions for keyboard. We try to make it seamless but there are points where this is pretty difficult to control. Especially with a south placed text field which is static (not scrollable).
If you can isolate a test case that shows misbehavior here we might be able to fine tune the logic a bit.
Solution to prevent this consists in setting the Form's setFormBottomPaddingEditingMode(true);. Easy fix! 👍
I am working on a page where there are two rows in the header.
The first row has a "My Account" icon, Company Logo, and Logout.
The second row has a navigation bar.
When the Focus Ring/Focus Indicator highlights an item on the first row, the bottom of the focus ring is cut off by the navigation bar in the second row.
I am not allowed to change the spacing of the elements on the DOM.
Is there a way I can change the layering so that all of the elements on the page are not changed in size or location, but the Focus Ring is not cut off by the navigation bar?
The site built with React.
I've tried googling a number of things, but haven't turned up much specific to this issue.
I'm a little new to programming (my first job, first year). I'm not totally sure where to even start.
You are looking for z-index. The second element is positioned in front of the first element and so it covers the focus indicator.
This allows you to specify how far 'forward' elements are on the page.
Assuming nothing is using fixed or absolute position within the <div>s you are working on this should solve your issue.
i.e.
<div class="container">
<div id="behind" z-index="1"></div>
<div id="infront" z-index="0"></div> <!--The z-index is not really needed here so try without it first, it is to illustrate that the item in front at the moment should have a lower z-index than the one at the back-->
</div>
You may need to play with the z-index in order to get this to work (you can go to 999999 without a problem, but try and use as low a number as possible).
You may also have to fiddle with heights of elements if the site is poorly designed but without a code example I can only offer general advice and gotcha's
Without a code example it is difficult to suggest a solution, but it sounds like your two rows are overlapping, and thereby hiding part of the focus indicator.
Three different solutions come to mind,
Change the height and placement of the two rows to avoid the overlap in the first place
Try using the CSS z-index property to control which element is rendered foremost
Using the CSS outline-offset property, with a negative value, i.e. -5px, to shrink the focus indicator and hopefully making it visible
Is there a way to detect the background color at one certain point of the page dynamically? I have a website with a fixed header, and the default logo on it is white (default background is black). However, as I scroll down there are sections that have white background, so the logo would have to change colour to black.
Setting it based on scrolling position is not possible, because all sections have different heights and the height is often dependent on the content.
I have found mix-blend-color, but unfortunately its support is pretty bad across browsers. Also tried numerous npm packages, but none of them seem to pick up the background colour.
Is there another way to dynamically change the logo color without getting the background color?
Answer 1
I never tried this, but I think this might lead to the answer.
You can use document.elementFromPoint.
This will retrieve the top element at some (x, y) point.
So you can set the x and y to 1px down the border of your modal ( or some place where you know that will only have element with the background color you want) and get the element.
And check, on a scroll event listener, what is the element at that position and get it's background color.
Is this a good thing to do? Maybe not, but it works and it have good support across browsers.
Answer 2
Setting it based on scrolling position is not possible
Of course it's possible!
If your modal is with position absolute, what you can do is get the modal's ref and use element.getBoundingClientRect() to get it's position.
Then on each section, you also get the ref (you will have an array of section's ref) in the parent component, which knows the modal's refs and section's ref.
Then, on a scroll event, you use getBoundingClientRect on each section element and check if it's inside the modal logo.
To check if it's inside, you can simply use the top and bottom ( if the scroll is vertical).
This is harder to implement, but I think it's the way to go.
I know very little about programming, but I'm excited about the prospect of Polymer making these advanced objects as simple as working in an HTML doc. Anyway, there's some basic stuff I can't figure out, like how to get a section to scroll to fit nested content, like a bunch of cards.
Here's an example
In a full, widescreen monitor, all 8 cards on the "100 years" tab are displayed fine. But as soon as you resize the window to something much narrower, like a smartphone screen, you realize you can't scroll, and thus can't access all of the content.
How do I enable scrolling for this?
The core-animated-pages element is overflow: hidden, and all the visible elements are children of that element.
If you set the core-animated-pages element to overflow: auto, then it will be scrollable.
I've 2 controls one on top of another: border over slider. on border user can mark a segment to appear in different color on slider.
Because the border is written after slider in xaml, it appear on top of the slider. and that's ok.
My problem is, the Thumb of slider also appears under the border.
How can I set the Thumb element (belong to slider control and inside it) to appear on top of all, and also the border will appear on top of the slider?
I tried use zIndex but without success. Any idea?
In CSS:
Make sure your elements are positioned absolutely or relatively. z-index doesn't really have a play in layering unless the elements are positioned absolutely or relatively. You should then be able to set one with:
z-index: 1;
and the other with:
z-index: 2;
and get the desired result.
In WPF:
Use the syntax specified here
Here's an example:
Make sure both of your elements are in the same parent, otherwise they will be displayed in the order in which they were loaded.