I have a <section> tag containing two main divs. The upper div wraps an input to which a jQuery autocomplete widget is assigned. However, the autocomplete list shows under the lower div, making it useless.
I have already tried setting the z-index of both the input and the div to the value that would make it visible, applying the !important annotation, but nothing seems to work. What could be the reason?
Is this really an issue with the z-index? Note that the bottom div contains a widget with animations (drop down menu), if it has any relevance to the problem.
These are the solutions that I tried:
autocomplete suggestion list wrong z-index, how can i change?
jQuery autocomplete suggestion box hidden behind Bootstrap Nav bar
jQuery AutoComplete displaying behind elements after first use
Here's a code that use to fix it, to no avail:
//top div
.tag-filtering-input{
z-index: 4000 !important;
}
//bottom div
.categories-container{
z-index: 3000;
}
Related
I'm using older version of select2 (3.5), and i have a problem with dropdown position changing when i apply some element that modifies the app height in some way.
When height is modified in the background and dropdown is still open, the dropdown moves above the select2 text field, hiding it. How do i make dropdown position to always be below the select2 text, as it should be.
I fixed this by triggering scroll down on window for 1px and than dropdown gets re-aligned with the text field. Might not be the nicest solution but it works for me.
Here's the code:
window.scrollBy(0, 1);
I am using bootstrap 4.0.0 collapse to hide and reveal a bootstrap "row". The row contains four columns - "col-md-3" - of buttons. This row is laying out just as I want it too until I add the "collapse" class, which then causes all the cols inside the row to stack like block elements.
Is this a known thing, that you can't put a row, or complex elements to be collapsed?
Below are two screenshots of before and after - with the element html visible on the :Before
After:bad
well the col-- css is a flexible container, that has padding and margin settings that change with screen size. There will be some elements that will be blank depending on screen size. When I build a menu I use fixed elements inside the collapse using ul and li tags like you would a nav bar. I have used the navbar code, then override colors inline by setting style attributes in the html tag. Also, you can dynamically insert display:none in an element via jquery or java might give you a better effect (which I use from time to time instead of the collapse routine bootstrap has set up.. ). You can also play with inserting offset-md-* class in if you just need to offset a div container. But I use that for centering a responsive div like a login screen.
I have a scrollable table with buttons that generate popovers. The problem is that it's positioned in the center of the button and not outside of it.
Here's my JSFiddle. http://jsfiddle.net/Br4Zg/999/
I read on the Bootstrap site that when attaching a popover to a btn-group I need to use
container: "body" attribute, but when I used that then it doesn't scroll with the table since it's not relative to the table anymore as seen in this fiddle: http://jsfiddle.net/Br4Zg/1000/
Is there a way to get the position correct along with the scrolling functionality?
If you remove the button from the button group then the popover shows up in the correct location.
Remove this
<div class ="btn-group btn-broup-sm">
I have a menu bar that I want to control the visibility of DIV's featuring varied content. Currently the DIV's visiblity and invisibility is controlled but clicking on the same button. What I want to do is enable any button selected in the menu to make the previous DIV invisible and replace it with the selected DIV's visibility.
Is this possible???
The script that I'm using to call up the DIV is as follows:
<"javascript:unhide('unique DIV id goes here');">
Any help appreciated!
Thanks!
I think you need the display property. Some general stuff:
If you want is to hide - visibility: hidden \ visible
If you want to replace - display: none \ block
The difference is that in display the element stops taking up space in the page, and in visibility they do take space, but you don't see them.
So try this:
function unhide(id){
document.getElementById(id).display = 'none';
}
I'm using a jquery autocomplete function in this page:
link
If, for example, you type a 't' in the "Enter entity name" text field, a list of items is displayed. The problem is that the full list is obscured by the chart. How do I specify the z-index value for the dynamically displayed part of the auto complete element? I tried putting a z-index value in the div but that didn't work.
the element has to be absolutely positioned for z-index to work