I've got a question about how to get a bootstrap popover to show above (outside) a slider, which has a wrapper of overflow:hidden, that I can't seem to get around.
I'm using this slider: http://owlgraphic.com/owlcarousel/
I'm also using Twitter bootstrap 2.3.2 popovers: http://getbootstrap.com/2.3.2/javascript.html#popovers
both work well together with the exception of the overflow:hidden on the carousel, which is similar to issues like this:
Popovers in Bootstrap 2.2.1
https://github.com/twbs/bootstrap/issues/6122
My question specifically is: Has anyone gotten this to work? I've done some moves with height and negative margin to get the vertical height showing, but if the popover is at the edge of my wrapping dive, it will get cut off at the edge.
please let me know if I need to provide any additional detail.
Thanks
Steph
Ok, so I figured this one out.
I changed:
$('.popover-with-html').popover({ html : true, });
to:
$('.popover-with-html').popover({ html : true, container: 'body'});
and it's working.
container: 'body'
was the key, I hope this helps someone.
Thanks
Steph
For other people having this problem in 2021 with newer versions of bootstrap, the solution is using the "boundary" parameter, as "container" doesn't seem to work.
I had to implement a popover inside a sidebar made with AdminLTE
This is what was happening using content:"body"
And this is how it looks using boundary:"viewport"
Without this option active the Popper fallbackPlacement takes over and flips the popover direction (the default placement is "right")
As you can see in the official documentation boundary have different options, the default is "scrollParent", but you can use "viewport" like in this case or "window"
Code used in this example:
$("#registerPetPopover").popover({
placement:"right", //Default parameter
title:"Registra un pet!", //Popover Title
html:true, //Enable HTML inside popover
trigger:"manual", //Avoid activating the popover while clicking
boundary:"viewport", //Allow the popover to go outside its parent
content:"<div class='text-right'>Clicca qui per registrare il tuo primo pet!<br><a href='#'>Non mostrare più</a><div>"
});
Add following in your CSS.
Override overflow property of slider.
.carousel-inner{
overflow:visible;
}
I hope this helps someone.
Got it from https://github.com/twbs/bootstrap/issues/6091
I resolved it by overwriting carousel-inner in my own css. Increase height to show the drop down
.carousel-inner {height: 350px; width: 100%; min-width: 650px;}
Related
I'm using Astra template with Elementor plugin.
I've set up my navbar to be fixed - to scroll alongside the webpage, but now my items are appearing under it. And i'm not talking about the z-index issue, but the first thing that comes after navbar - breadcrumbs + title are both under navbar.
.main-header-bar-wrap{
position:fixed;
top:0;
width:100%;
}
I solved the issue using --
padding-top:100px;
But i don't really think that's the best practice.
Is there any better solution?
Thank you!
There's not really one foolproof way of doing this unfortunately. Fixed elements are taken completely out of the flow of the page and how it renders so don't take up any space. https://developer.mozilla.org/en-US/docs/web/css/position#fixed
The way you've done it is one option, another is to change the padding to match the height on resizing the window (to make sure the height is always correct).
e.g. something like:
$(window).resize(function () {
$(".main").css("padding-top",$(".main-header-bar-wrap").outerHeight());
})
The other option is to create a hidden duplicate of the header, with position: relative and visibility: hidden, which will take up the required space but not be visible. Just make sure to add the aria-hidden="true" property so people with screen readers don't end up with a duplicate menu.
You could do this with js as follows:
$( ".main-header-bar-wrap" ).after(
$(".main-header-bar-wrap").clone().addClass("spacer").attr("aria-hidden","true")
);
This will duplicate the header and add the class spacer to the second version so you can style it separately with the visibility and position properties, along with the aria-hidden attribute.
I have a problem with a fluid layout, made using bootstrap and a fixed element made by the bootstrap affix plugin.
What I’d like to achieve is a compound view like on Android tablets, where you have left a list of elements and when you click on one you see the details of that element on the right hand side.
My problem is that as soon as the plugin attaches the affix class to the right side it is taken “out” of the page and the width is strange. The affix class makes the element to have position: fixed. And that makes the width to no longer be relative to the parent, but to the document.
I’ve made a pen of my simplified testcase. You have to scroll to see the effect happening.
http://codepen.io/anon/pen/zDieo
Thank you very much for your time
A quick fix would be add this to your css
.affix , .affix-top {
width: 800px;
}
Modified Code : http://codepen.io/anon/pen/gBHca
Try this - codepen
And read this - question
I can't seem to get z-index work on bootstrap popover if it's in div which has smooth div scroll on it. I've tried putting extremely high values, looked in all css's to see if there were any z-indexes higher then popover's but achieved no success.
Javascript:
$(".project").smoothDivScroll({
mousewheelScrolling: "allDirections",
hotSpotScrolling: false,
touchScrolling: true
});
$(".block").popover({
html: true,
animation: true,
placement: 'right'
});
Here's how it looks at the moment: 1, 2.
Live example: here
This is old, but for others, try adding the following attribute:
data-container="body"
The clipping you are seeing is probably not related to z-index declarations but instead related to the size of your .project div and the overflow declaration for a nested div.
div.scrollWrapper {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
The overflow:hidden; is what's creating the clips you're seeing.
I believe it has something to do with your overflow. It seems to be clipping your boxes. If you look at .scrollWrapper in smoothDivScroll.css and change overflow to visible, you will see a bit more of our box. I know this isn't your desired effect, but I think it's a start. Has to be something with your overflow.
# the mad zergling
I have an popover that pops automatically on page load and gets hidden automatically after some timeout (in the reality it gets destroyed), it is indicating a brief instruction on/about the navbar itself. I also do use scrollto.
I've tried adding
data-container="body"
no way, the behaviour is for the mobiles and depends on that mobile device and its browser.
On blackberry OS 10 it behaves as expected, popover is on top of everything and it was not needed the data-container (though it could be helpful for other devices)
On samsung/android the default browser doesn't show the popover, though also some html5 circles are displayed as squares, so looks it is neither html5 capable, also the dropdown items are not fully displayed, a total scrap.
On the same samsung/android, firefox is much more better but there, the popover is hidden by the navbar logo. Not tried chrome for android.
I expect it will be its own story for every mobile browser on each particular device.
I am trying to use Bootstrap and my own css to create a hover effect. The issue is that the parent container, the carousel, is clipping my hover effect.
The look I am going for is something like this (hover over items with long descriptions):
http://www.ebay.com/sch/Other-/26261/i.html?rt=nc&_dmd=2
This is what my attempt looks like now:
This is what I am trying to achieve:
I’ve tried overriding the parent overflow elements to no avail.
The hover effect needs to:
Be the same size for all images in the carousel
Overwrite any content below it
Here’s the fiddle: Fiddle
What am I doing wrong?
If you are using Bootstrap, why not just use a Popover?:
$('.thumb-hover').popover({
title: "This is a title",
content: "This is a test",
trigger: 'hover',
placement: 'bottom'
});
JSFiddle
It doesn't seem easy to play with the overflow since the plugin already uses it.
You can achieve some interesting result by setting both X and Y overflow to visible : demo (jsfiddle)
.carousel-container:hover {
overflow-y: visible!important;
overflow-x: visible!important;
}
However, the X overflow breaks the plugin style.
But it doesn't work at all on google chrome, so my advice would be not to use this plugin.
You would get almost the same problem with another plugin, because CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
Demo with Bootstrap Carousel (jsfiddle)
Maybe you should think about using some (homemade?) JavaScript, since the carousel requires it anyway.
I have an issue where the sub menu (dropdown) is behind the #main div. I have tried changing z-index values (ensuring div is positioned) but had no luck.
I have uploaded my progress to jsfiddle and wondered whether someone could see where I have gone wrong?
http://jsfiddle.net/indigoclothing/8aGZC/4/
Thanks
The demo is very complicated to work through and you have added the some CSS in the HTML as links and some as managed resources in jsFiddle which are loading twice, so it is very difficult to create a working fiddle. In future may I suggest that you just include the relevant parts that are not working. Constructing a Short, Self Contained, Correct (Compilable), Example often results in figuring out where the problem is yourself as well :-)
That said, removing the following from the CSS section in the fiddle and the managed resources seems to fix it for me.
#header {
z-index:2; // <-- remove this
}
The problem is that the menu and content have different stacking contexts - see Overlapping and z-index for an excellent description of this concept.
Did you try using position: inherit; on the "main" div rather than relative, and modify the position of the element accordingly?