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.
Related
Hi I have a responsive website. All the DIVs container depend of their parents and I use a lot width and height 100%.
I see that Arjs is setting fixed dimensions to the body.
I thought that I did something wrong but in the official example is happening the same:
My goal is to have some html elements on front of the camera but the fixed dimensions are affecting my CSS. Is there a way to control this?
I tried this configuration for tests but I did not see any change:
arjs="sourceWidth:480; sourceHeight:480; displayWidth: 480; displayHeight: 480"
You should use the "embedded" component on the tag, it will remove the automatic css fullscreen styles that A-Frame adds by default. You can find more details here in the documentation.
I have fixed it using position "fixed" in all my elements.
Making position "fixed" in all elements is helpful but not enough.
And still making custom elements acting weird or overflow from the screen.
Simply add these may help:
html {
width: 100vw;
height: 100%;
overflow: hidden;
}
I am trying to customize the default scrollbar that appears in the Side Menu, along with the scrollbar in the page itself but am unable to do so. I have already referred to This but it does not seems to be of much use for the page and have got no clues about customizing the scrollbar in the side menu as additionally i need to reduce the space between the elements in sidemenu.
I also tried to hide the scrollbar with the following code but was of no use.
.no-scroll .scroll-content{
overflow: hidden;
}
You can add the following styles in app.scss
::-webkit-scrollbar {
width:0px;
}
It will reduce the size of the scrollbar to zero.
I have an overlay which should be on top of everything. The problem is that the overlay is inside a content-wrapper that has a z-index defined. This can't be changed. The logo has a z-index defined as well. This too, can't be changed.
I've made a Fiddle which shows the issue. Can this be done with pure CSS? My other idea is to move the overlay with Javascript, but all the CSS is currently also nested, so I need to change lots of CSS if I do so.
Do something like this, when you click on 'btn' toggle some class to '.overlay', like this\
$("button").on("click", function() {
$(".overlay").toggle();
$('.content').toggleClass('z-1000');
});
in your CSS:
.content.z-1000{
z-index:1000;
}
hope this works for you. working fiddle
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;}
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.