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.
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 am having an issue with the layout of my website in Firefox it works in Chrome. It is also hard to show you my code because I am using some plug ins to add elements so it is not just in normal HTML. The images inside the table cell are being displayed full size in Firefox which is messing up my layout.
I was playing around with the inspector and I saw that if I untick display:table cell the layout goes back to how I want it.
Could I please have a pointer of how to override this in the CSS?
The default value of the display property depends on the specific element, but for layout elements it is most likely block. Therefore you can use display:block to reset the value to its cascading default.
Hi i am using twitter bootstrap. I have used typeahead in my model window. My Problem is when I type in textbox the dropdown is coming perfect but its coming at very bottom of textbox. I have observed that there is attribute top set when drop down is coming. But I don't know how to change that at run time.
Here is the Image:
I am not good in CSS. Can anybody tell me that what should do to resolve this problem ?
You need to override some of the default styling of the typeahead class in bootstrap. Specifically, I am able to get it to appear properly by setting the position to relative and the z-index to 10000. The position property requires that you use the !important declaration.
.typeahead {
position:relative !important;
z-index:10000;
}
See my working fiddle at http://jsfiddle.net/technotarek/Msttw/.
Note that my typeahead values are the color of the rainbow in case you're having trouble triggering it.
Also, depending on your exact form layout, you may have to adjust the positioning of the typeahead element for your own situation by using the top/bottom or left/right CSS properties.
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..