Scale div content to fit text dynamically?

This is a continuation of my last question which got buried in the forums somewhere.

So, I have this website: WEBSITE LINK. If you scroll down to Some Nuts, Some Bolts, you’ll see a dynamically scaling 4 icon placeholders that show text when you hover over them. Pretty sweet. However, my problem is that if you’re viewing on an iPhone, (or if you simply make the browser window REALLY small,) the text won’t fit into the container.

How can I automatically make the container bigger (taller) to fit all the text without making the text microscopic?

Thanks,
Garrett.

The operative word is naturally.

There is no way for the text box to influence the height of its ancestoral container as the web page narrows because the text box is absolutely positioned. Absolutely positioned elements are removed from the flow of the page and do not influence their surroundings.

Plus a grandparent container has overflow:hidden so the overflowing / cut off text isn’t obvious unless one is reading it and realizes that it should continue… but doesn’t. You should remember that overflow:hidden fundamentally chops off text that overflows the container. Conveniently, it contains margins and clears floats.

You need to get rid of the absolute:positioning on the text box so it remains in the flow of the page and can push the content that follows down the page as needed to accommodate the text.

Does this help or do you want someone to do it for you?

Aside: are those circles supposed to represent nuts, bolts, screws, and rivets? or what?

1 Like

As Ron said the main cuplrit is the overflow:hidden which stops you seeing the text. You don’t want to make the text any smaller but what you could do is make sure that it is visible when it overlays.

I assume you want it to overlay the nuts and bolts so you should still stick with absolute positioning for the rollover but allow it to go above and below the nuts and bolts when it slides in. It might be a good idea t give it a subtle shadow so that depth is perceived so people know it is on top.

Roughly like this:

.point-of-reference{overflow:visible}
.rollover{
	opacity:0;
	box-shadow:0 0 10px rgba(0,0,0,0.3);
	bottom:auto;
	z-index:2;
	padding:10px 0;
}
.imgwrap:hover > .rollover{opacity:1}

The above rules are over-rides to your existing and should follow the original rules (or be integrated properly).

1 Like

I think I see what you’re saying although I’m not entirely sure how to implement this.

And the circle’s are just placeholders right now for icons.

I’ll try this when I get home, thanks for the response. If it doesn’t work I’ll let you know.

Hm. Close, it does expand now and stuff, but I want to keep the box covering all the symbols when the screen isn’t an iPhone or is large enough that the text will fit as is. With your code, if the screen is a normal laptop, the box floats above the bottom of the bottom two symbols. Is there a way maybe to check if they’re using an iphone and then only run the code up there if it is or something?

Alright, here’s what I got so far.

By using PaulOB’s code, I got it to show over all of them by adding

min-height:100%

as a property of .rollover

After that, however, if you slowly move your mouse on the left side of the overlay, it’ll totally glitch out, showing different screens at a rapid pace.

You could try something like this.

.point-of-reference {
	overflow:visible
}
.rollover {
	opacity:0;
	box-shadow:0 0 10px rgba(0,0,0,0.3);
	bottom:auto;
	left:-10px;
	right:-10px;
	padding:10px 0;
	min-height:100%;
}
.imgwrap:hover > .rollover {
	opacity:1;
	z-index:2;
}
.point-of-reference:hover:before {
	content:"";
	position:fixed;
	left:auto;
	width:2000px;
	margin:0 0 0 -2040px;
	top:0;
	bottom:0;
	z-index:3;
}

It shims another element to the left side to stop the hover triggering the slide in before its finished.

Thank you very much. Used that code and also extended the
left:-10px; right:-10px; padding:10px 0;

part to:

left:-40px; right:-40px; padding:10px 0;

To cover up that small spot that did it. Thanks again for all your help!

One last question, I swear. XD Is their anyway to put in special code for mobile so that it activates instead when they click on it, click off it?

You would need some javascript to do this properly and detect touchstart and touchend rather than click so that the effect is only supplied while the finger is on the element to get much the same effect as hovering.

I put up an old demo here and you can copy the code form view source as its pretty straight forward.

http://www.pmob.co.uk/temp2/touch-hover.html

If you use click then you can do much the same thing and add a class when clicked which triggers the rollover and then remove the class on a second click.Of course that may confuse users a little as they may not realise they have to click again on mobile.

This is great. I think I’m going to change this to clicks instead however, because of the annoying magnifying glass that pops up when you hold a finger down in iOS. Unless there’s any way to change that? (Or if you have any other ideas, I’d love to hear them)

Thanks for the help!

There is webkit rule that gets rid if the glass.

	-webkit-user-callout: none;/* disable magnifying glass */
	-webkit-user-select: none; /* disable magnifying glass */

Add that to the rollover element and you should be able to tocuh without the glass appearing.

Updated example:

http://www.pmob.co.uk/temp2/touch-hover.html

If you use the click method then just add a class to the element on click and use that class as would the :hover rule. (I usually name the class .hover so you know what it does.)

The click method does leave the element visible and easier to read than having your finger over the top but you may want to add ‘click to close’ for smaller devices (use a media query to only show the message to smaller devices)/

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.