https://jsfiddle.net/rafaelfndev/h63r4mye/
Is it possible to show a tooltip over a container with overflow set to hidden?
I know that is possible using position: fixed (green container has property overflow: hidden).
I made 2 examples, the problem is when scrolling...first the button scrolls together with the frame, and second, the tooltip scrolls together with the frame.
I need put these boxes inside the container with overflow: hidden and show the tooltip when hovering (however, the tooltips are hidden by the overflow: hidden of the container).
Is it possible do this using only CSS?
The way to do that is to set it's parent position="absolute" not relative. so the tooltip won't be positioned relative to it's parent and can exceed the container.
But for your case it will take your design down so i suggest you to do one of these:
easily add a padding-top: 40px; to the container so the tooltip can show up at top. and it's better to set a padding-bottom: 40px; as well to make it asymmetric.
OR don't put the tooltip above the items, put them next to them at left which i also recommend you.
Related
When I use the following:
body {
overflow: hidden;
}
The element that is overflowing is clipped, when I do the following:
body {
overflow: auto;
}
It's not clipped but now there's a scrollbar where it's going over.
I'd like to make the element not clip but also to not show the scrollbar or be scrollable
So basically, you don't want to control overflow, since you don't want the element to overflow. You want its parent container to adapt to whatever the size of the element.
It can be done in multiple ways. One of the best being, not doing anything since most HTML elements won't clip whatever's inside them.
Except for window, which is the boundaries of your browser. And it can't be skinned anyway.
I don't have much informations, but a wild guess would be to believe that you are trying to have an iframe behave like a regular HTML element.
I created a contact form with a banner at the top of it. I created the entire thing and was planning on moving it to the right, off the screen, so that it will slide onto the screen when it is hovered over. I intended to just wrap a div around all of it and then relatively position it and move it however far I needed it to go to the right to be off the screen. However, when I tried to do this, it made the banner and the contact form box, as well as everything inside of those two elements, show up in a bunch of different random spots around the screen. I figured this was because it applied the relative positioning, as well as the left:100px value I set with it, to every element within the div and that, mixed with the other positioning I had set for each object, caused the weird displacements? Does anyone know how I can move the form and the banner so that they stay attached to each other and everything inside stays where it is?
Here's the JSFiddle where I set up the contact form box and banner: LINK
Thanks for any help
i'm not sure about all your absolute and relative positioning insde of your form - if you dont want to place the elements at very specific points you wouldnt need this.
here's a jsfiddle for what i think you want to have:
https://jsfiddle.net/spmhxteu/
basically you will need to set this for your email wrap
position: absolute;
right: -200px;
and you should set this for your body or whatever is wrapped around
overflow: hidden;
width: 800px; // example
all elements INSIDE your absolute positioned div do not have to be relative or absolute again.
UPDATE: As requested here an absolute positioning inside the element:
https://jsfiddle.net/spmhxteu/1/
Note: Ofcourse your padding etc. of the parent div will not apply on absolute positioning
I have been searching for the answer to this question for a while now but here is my issue.
I am trying to create a div that hugs the left side of the browser window and when it is hovered over, it will expand and hold more divs/text.
My question is, how do I make it so when the expanding div covers text, it does not move it, also how to make it so the text within the expanding div shrinks/grows with the div.
I have tried
position: relative
position: absolute
and all
text-align
possibilities
Here is my JSFiddle
Any help would be greatly appreciated! (Sorry if this question has been posted/answered in the past)
Updated fiddle: http://jsfiddle.net/nqm9ksv8/
Moving text below
Try absolute positioning for your .grow:
position: absolute;
That way, it'll not get into the way of other elements, instead be drawn on top of them.
Shrinking text inside
To keep the text inside from shrinking, add another div inside, which has already the desired, fixed width. Add overflow: hidden; to the .grow container. That way, the contents will be layouted, but what does not fit the container is not being displayed.
Just use min-width to prevent div from resizing.
.Site-Content-Container{min-width: 960px;}
Edited: or maybe not. position: absolute; is an option. To be honest, it is not clear which text is not meant to resize.
change your "float:left;" in .grow to "position:absolute;"
is that what you are aiming for?
I am attempting to make a thumnail viewer whereby when you roll your mouse over the thumbnail, you get a thumbnail sized view of a larger email. As you move around the thumbnail youll see various parts of the larger pictures.
You can see this here by rolling over the last (green) image.
When you roll over I swap images between the low res thumbnail and a higher res version. For some reason this larger image is no longer bound by the overflow: hidden property of the parent. What do I have to do to get this to work?
Update
The position: relative property is currently set on the parent above the .artwork container that currently provides the overflow: hidden. Adding overflow: hidden to the top level container works correctly but seems to negate the rounded border effect...
use position:relative on your parent block.
This is because our child div is absolute positioned. But when you use absolute position, it refers to the first positionned parent. The first positionned parent is the first one to have a position: relative (or absolute) property
for the border radius problem, this is a firefox and chrome bug you can fix by using hacks. See it here :
CSS3 border-radius clipping issues
EDIT : To summarize :
add position: relative to the div artwork. then add your border radius to the "a" parent tag
i have a that contains a HORIZONTAL menu. the menu consists of an unordered list.
i would like the div to get a horizontal scroller whenever the menu exceeds the width of the <div>.
i tried using these CSS definitions for my <div>:
position: absolute;
width: 380px;
overflow: auto;
overflow-y: hidden;
height: 30px;
but than realized that since the menu is LIST, the different list items break the line whenever they reach the width of the <div> and move on to the next line, thus the browser doesnt see the need for a horizontal scroller (it doesnt display a vertical one as well because of the overflow-y: hidden; line)
any ideas how i can create a 1 line horizontal menu which will scroll horizontally only?
thank you all so much.
You might be able to use the white-space property to prevent wrapping. It's hard to know if it's applicable in your case without more code.
For your div, try:
white-space: nowrap;
As far as I know, there's no CSS-based workaround for this. However, you can use Jquery to solve it.
I made a little test for you to see:
http://sotkra.com/stackoverflow/cssdilemma/cssdilemma.html
The first example has 6 or so li's which exceed the width of the container div which means you DON'T need a scrollbar.
The second example has 8-9 li's which DO exceed the width of the container div which means you DO NEED a scrollbar.
Basically, you use Jquery to count the number of li's inside your div using size(). If they exceed X number, in my example's case 6 (the limit before scroll is needed), then a class is added to the ul to extend its width (.longer) so that there's no line break and the horizontal scrollbar appears.
It also adds another class (.taller) that increases the height to accomodate the scrollbar itself.
Cheers
G.Campos
You need to put one massive horizontal div inside the parent div with overflow: auto;
This will allow the to float left without wrapping to the next line, and it will only scroll when the boundary of the parent div is crossed.