Here is the site:
http://ivideez.com/
As you can see my dropdowns are being hidden behind the video; how do I get then to dropdown OVER the video.
What do I add to css? i've tried overflow, position, z-index, I'm stuck, any advice? I'd prefer if cross-broswer capable answer.
Use wmode property of embed to transparent as like bellow :-
wmode=transparent
I hope it will helps..!!
PS
For more details :- Refer to here
i had same problem once and i solved it by applying z-index to main container. try giving the z-index value to parent container that holds the dropdown menu instead of directly giving it to the .. Also give z-index to flash video whose value should be smaller..
Related
React select (https://github.com/JedWatson/react-select) drop down list is not fully shown in IE, works in other browsers.
Works on other browsers.
I tried setting the
.react-select__menu {
overflow-x:auto;
overflow-y:auto;
}
Tried also to set the position to absolute and fixed for react-select and overflow to visible when menu is open (not sure if correct).
and also setting the height for both menu and its child menu-list, nothing seems to work.
what can be done to fix it ?
Thanks in advance.
it was a simple fix ,after many "un-necessary" trial and errors, i made the react-select position:absolute and it worked.
I don't have experience with react-select, however I suspect the parent is limiting the visibility of the drop-down menu. If you can add the CSS of the parent container to your answer, that might be helpful, but for now my suspicion is based on the way the menu is being cut off. If you inspect the drop-down does IE indicate the element hight is taller than what is shown, with the rest of it hidden on the page?
Another way to test this which might be faster, is to create a plain HTML document with the drop-down, no additional except for react select.
If it's still broken I think you would have a good case for opening a bug ticket on GIThub.
In the mean time, without knowing what the exact issue is, you might be able to use positioning on the parent or a nested child of the drop-down (as the top level might be position absolute) to get the drop-down to render correctly. Sometimes adding position:relative can resolve collapsing element issues.
I see that you solved your problem but I had this same issue and struggled with it for awhile. In case anyone else struggles with this I wanted to share how I solved it. My dropdown was cut off and I was having issues getting the scrollbar to show up, overflow: auto; was not working for me.
To make it work I added maxMenuHeight={150} to and set the position to fixed. Here is my code:
<div className="d-flex justify-content-end align-items-baseline">
<p className="font-size-14 mr-1 mt-3 align-self-end">Page</p>
<div className="mr-5 mb-5 align-self-start">
<Select
maxMenuHeight={150}
className="btn btn-mini position-fixed"
options={paginationOptions}
placeholder="1"
/>
</div>
I have also faced the same issue.
I just fixed it by using overflow: visible on the parent component of react select check attachment here.
as the menu was cut down due to the overflow hidden of the absolute positioned parent.
I'm trying to embed some contents into a HTML5 device mockup. The library that I use for mockup is https://github.com/pixelsign/html5-device-mockups.
I created a button inside 'screen' div but I can not reach to it.
If you inspect this page's elements, you can see that 'screen' div is not reachable with mouse click. I've tried to changed z-index property but it didn't help.
The .screen div has its property pointer-events set to none in general.scss
Removing the property and rebuilding the CSS should work.
Note: I do not know why this property was set to none in the first place. Removing it might have some side effects.
I've been searching and trying out some code to make my dropdown menu same size for each link, like nelly.se, but I can't figure that out. I was tried this code:
.nav-dropdown{position:fixed; left:0; right:0;}
but can't make it work at all.
The website I am working on is: http://94.247.169.169/~welloteket/
position: fixed will really fix it in relation to the window, which means it can't be scrolled at all - that won't work.
Usually for dropdowns you use position: absolute and adjust the left and top settings as needed. There are at least two important additional things:
1.) it has to be a direct child element of the element in relation to which you want it to fix. In the example you linked to that would be the black navigation bar, probably a ul element in there.
2.) That parent container has to have position: relative.
The kind of "mega dropdown" (i.e. equal size and position for each dropdown regardless of its related main menu entry) is trickier than a regular dropdown (i.e. one than opens directly under / next to its main menu entry). You propably need Javascript for this.
Apart from those general guidelines we can only help you if you post detailed code - HTML, CSS and JS, if there is any.
I have a display issue with the popover control. I had to set the overflow property to 'visible' otherwise it would be hidden behind the table.
overflow:visible;
See jsfiddle for repro : http://jsfiddle.net/vEMrD/
But now that I've set it to visible, the table has display issues related to the horizontal scrollbar. In the jsfiddle, just change the css property overflow to 'hidden' and the table will look just fine, however the popover is then hidden (click 'display filter' to reproduce)
anyone knows what's wrong with the css ?
Add data-container="body" to the popover link. Try http://jsfiddle.net/vEMrD/5/ for a working example. See http://getbootstrap.com/javascript/#popovers-usage - and in specific the container flag - on how to break out the popover from its default container. body works, but you can be more specific if necessary.
Actually My problem is i want to rotate the image when a button click occurs(HTML img and HTML Button), i already done that with help of jQuery , but now after rotating the image the content is hiding behind that Rotated image when scrolling.i hope u understand my problem, please give me any suggestions,thanks in advance
You could try adding a z-index to the image or the content (A low or minus z-index on the image will put it behind, or a high z-index on the content will bring it to the front). Create a CSS class:
.BringToTheFront{ z-index: 1000 };
or
.SendToTheBack{ z-index: -1000 };
And then assign the class to the image / content. If this doesn't work, you may need to use jQuery to assign the CSS to the element after it has rotated.
$('#MyElement').css('z-index', 1000);
or
$('#MyElement').css('z-index', -1000);
If you are using z-index elsewhere on your page, you may find 1000 isn't enough.
Dan