Geek asks and answers

Expand DIV only when content overflows?

My concept: So, I have a fixed DIV height that contains a variable amount of content. If the content overflows from the field, it is initially hidden (via CSS), but if you hover over the field, it should expand to the height necessary to display the content.

This is what I still did for this: http://jsfiddle.net/CvhkM/649/

The problem is that you can see that jquery fires in both of these DIV-like examples, where it really should fire only in the lower div (with content that goes beyond the initial div height, as defined by CSS).

It also grows to a certain height (300 pixels), is there a way to determine the exact height at which it should grow?

UPDATE: SOLUTION FOUND → IVE LEFT THIS ON JSFIDDLE: http://jsfiddle.net/hQkFH/3/

+3
source share
3 answers

Two classes can be used. One for the folded state:

div.collapsed {
    height: 50px;
    overflow: hidden;
}

Another for advanced state:

div.expanded {
    min-height: 50px;
}

If you move the mouse over the DIV, delete the collapsed class and add the extended class.

The trick is to remove the explicitly specified height and use min-height: it will expand the long text well, but will not affect the short text. Thus, you do not need to distinguish between cases with overflow and without it.

+4
source

, , Hover.

, div , Hover, , .

0

Take a look at this example and the question of whether your script is useful for editing and extending the "div" if necessary.

Example 1

Example 2

Question

0
source

More articles:


All Articles