Jump to content


From overflow: hidden to fit text height

  • Please log in to reply
2 replies to this topic

#1 Silvar

  • Members
  • PipPip
  • Member
  • 28 posts

Posted 22 January 2013 - 09:24 PM

Okay, I'm using jquery because I have a site with some items that got a + and a - When I click plus I use jquery animate(height) to open the div and when i click minus, it goes back to normal height.
I'm using the function right now where it sets the height of the container to 250px, and everything works.
But when the item expands, I want the height of the <div> to fit the text.
The parent got "overflow: hidden" and the inside div got full height underneath, but is hidden because of overflow property.

So we want this overflow:hidden; div to not hide the overflow, but fit the text.

Heres my jQuery code:
<script type='text/javascript'>
$(document).ready(function() {
var open = false;
$('#plusminus<?php echo $i; ?>').click(function() {
if (open) {

$('#item<?php echo $i; ?>').animate({height:'80px'});
$('#plusminus<?php echo $i; ?>').attr('src', './images/plus.png');
} else {

$('#item<?php echo $i; ?>').animate({height:'250px'});
$('#plusminus<?php echo $i; ?>').attr('src', './images/minus.png');
open = !open;

How do I fix this?

Edited by Silvar, 22 January 2013 - 09:24 PM.

#2 BagoZonde

  • Members
  • PipPipPip
  • Advanced Member
  • 70 posts

Posted 29 January 2013 - 09:03 AM

If you want fit whole text, just change overflow: hidden; to overflow: none; when expanded.

$('#item<?php echo $i; ?>').parent().toggleClass('not_overflow');

And add .not_overflow class in CSS:

   overflow: none;

Obviously pay attention about inheritance of .not_overflow class.
A=1-A ...from Basic...
$a=1-$a ...thru PHP...
LDA $01 EOR #1 ...to 6502 ASM :}

Does it mean I'm going low-level?! ;]

#3 Adam

  • Moderators
  • Advanced Member
  • 5,730 posts
  • LocationSheffield / UK

Posted 30 January 2013 - 03:17 PM

You don't need to specify a height here: http://jsfiddle.net/prt7b/

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users