I am having issues of getting the following selection boxes to appear correctly. When you select like "Package" the dropdown menu is behind the "template" selection box.
I have tried many things to try and get the dropbox to be above the selection box, but nothing seems to work.
website
Thanks for any help.
I managed to resolve the issue by removing the z-index: 10; attribute of the .mfSelect class in style.css:3135.
I believe the problem lies in the stacking context of the elements which is affected by more than just the z-index.
Related
I'm not sure if there is another post similar to this one but I'm hoping this can be a simple fix for someone better as css than me.
See the example here: https://svelte.dev/repl/e7d663de324043f98613b8fe35b8d78f?version=3.47.0
I build the example in Svelte repl but the issue is with the html and css.
The problem is that the dropdown part of the SimpleSelector is hidden behind the other rows below it.
I've tried to set the z-order but that doesn't seem to work. I tried playing with the display attribute and position but I can't seem to get this to work the way I want.
Try clicking on the textbox on any row. You'll see part of the dropdown but the rest is hidden.
Thanks in advance for any help.
I figured it out.
It seems that the z-index had to be set separately for each row.
For example, if there are 100 rows, the first row should have z-index: 100, the second row, z-index: 99, the third, z-index: 98 and so on.
That seemed to have done the trick.
Here is a link to the updated REPL: https://svelte.dev/repl/e84a80ef53a64af6975705407ddff040?version=3.48.0
However, in the end, I redesigned how the interface will work and I will not be editing inline in the table anymore so I won't be using this solution.
I have layered 4 canvases over the top of each over, however i want to be able to click a button and the linked canvas will come to the top.
http://jsfiddle.net/5g3Fe/ shows what i have currently got. I tried to put the following code into the button click functions. however this doesn't work.
function canvasView1()
{
document.getElementById("canvas1").style.z-index="1";
document.getElementById("canvas2").style.z-index="0";
document.getElementById("canvas3").style.z-index="0";
document.getElementById("canvas4").style.z-index="0";
}
can anyone suggest a way to be able to get specific canvas from a button click.
Thanks
For some reason, jsFiddle was ignoring your JavaScript code because of this reason. You can get around that by choosing No wrap - in <body> on the left hand side options.
Then your problem was that to set the z-index in javascript you use .style.zIndex rather than .style.z-index.
Working fiddle here
Or cleaner code version here
I've got a search box, the submit button of which I would like to have inside the box (a bit like bing) I've got some code from a couple of places which I hoped would do the job but I can't make the submit button appear on top of the search box
I've put together a fiddle but coz the image is on my machine it obviously doesn't pick it up, the code is there tho
http://jsfiddle.net/5a3Tr/1/
Anyone any ideas? I thought the z-index thing would work :(
Just remove position: relative from input.rounded - DEMO
I have a YUI dialog with z-index set to 1000. Then there is a little ul/li based (not a select) dropdown on the parent page which has a z-index 100. This (always) works perfect on my dev box - the dropdown goes behind the dialog.
But on a staging site, I get a strange behavior where the dropdown peeps through the dialog. When I check the dialog z-index using firebug, it is set to 4! The dropdown z-index is still 100. This happens only for particular cases.
I was wondering what might be causing to change the z-index of the dialog to 4 when my code sets it to 1000.
Since the problem is only happening for "particular cases," it sounds like a bug in your sw rather than in yui.
Some ideas:
Carefully check your css in the "particular cases" to make sure that your css file is not over-riding the z-index value. (Your css should not set the zindex value if it is being set programmatically by YUI dialog.)
Check your code where you create the dialog to ensure that your z-index setting has been set for each instantiation of the dialog. It could be that the z-index is being reset when the dialog is hidden.
I'm attempting to implement a multi-level drop-down navigation menu in CSS only but there's one small part which I just can't seem to get working correctly.
What should happen is:
1) When hovering over a menu item, it should be highlighted by using a different image (this works fine).
2) When hovering over a sub-menu item, the parent menu item should be highlighted.
Point 2 works fine up until I have a class .bottom on the parent menu item (this class is used as the image is slightly different). If the parent menu item has class .bottom, the highlight simply doesn't happen.
A demo of this can be viewed here: http://jsfiddle.net/cZFtW/2/
The demo shows that when hovering over Menu 1 > Sub Menu 3 > Sub Sub Menu X, Sub Menu 3 is highlighted. However, when hovering over Menu 2 > Sub Menu 3 > Sub Sub Menu X there is no highlight.
Can anyone see what I'm missing? On a side note, there's no real reason for not using Javascript here, I'd just prefer to have it all handled by CSS if possible (only need to support IE7+).
TL;DR; version: this fiddle shows the answer.
I understand what you mean. And I am pretty sure that the styling to which you need an answer to, which works for all except for the one at the bottom, has arisen purely by accident. (Kind a nice one I must say). I am almost certain of this, because your code as well as the file names lack any form of consistancy. There is double code, there is superfluous code, and there are images missing.
Therefore I have rewritten your markup and style sheet, and came to the fiddle as mentioned above.
Now, how does it work?
The trick is to attach the background image to an element inside the list item. In this case I chose for an anchor element, since that is most the likely. The first step is to change the background image at hovering the anchor, that's basic.
The second step is to change the background again when you hover over the submenu. At that point, the anchor element isn't hovered any more, but the list item is. So you can still change the background of the anchor element.
Note: in my solution there is a small difference to what you wish: when you hover the arrow, the background if the list item is already changed instead of until the cursor is over the submenu. If you want to prevent that, then you have to add an extra element for every sub menu like you had done yourself. But I think this is pretty nice also.