CODEWITHSUNDEEP
javascriptjqueryhtmlcssangularjs
HermanTheGermanHesse
HermanTheGermanHesse

Reputation: 581

CSS: Div resizing depending on original size

I have time blocks whose size is calculated programmatically.

The objective is:

-If the content is bigger than its container, when you hover over the element it expands to show all of it.

-If the content is smaller than its container, nothing happens.

Here is a fiddle.

Note:

-Red means it is how it currently is.

-Green is my objective.

I'm using Angular, so a javascript solution would be accepted.

Fiddle HTML:

.current {
  width: 200px;
  background-color: red;
  margin-right: 10px;
  float: left;
  overflow: hidden;
}
.current:hover {
  height: auto !important;
}
.supposed {
  width: 200px;
  background-color: lightgreen;
  margin-right: 10px;
  float: left;
  overflow: hidden;
}
.supposed.small:hover {
  height: auto !important;
}
.small {
  height: 50px;
}
.big {
  height: 100px;
}
.content {
  height: 75px;
  background-color: rgba(0,0,0,0.5);
}
<body>
    <div class="current small">
       <div class=" content">

       </div>
    </div>
    <div class="current big">
        <div class="content">

        </div>
    </div>
    <div class="supposed small">
        <div class="content">

        </div>
    </div>
    <div class="supposed big">
        <div class="content">

        </div>
    </div>
</body>

Upvotes: 2

Views: 77

Answers (3)

HermanTheGermanHesse
HermanTheGermanHesse

Reputation: 581

CSS:

.content {
    height: 100%;
}
.current:hover {
    height: auto !important;
}
.content:hover {
    min-height: inherit;
}

HTML with Angular:

<div class="current" ng-style="{height: calculateHeight()+'em',min-height: calculateHeight()+'em',}">
</div>

The setting of the content height to 100% ensures that hovering over .current equals to hovering over .content.

The setting of "height: calculateHeight()+'em'" gives the desired effect of making .current bigger if .content should bigger than .current.

The setting of "min-height: inherit" ensures that .content is allways at least as big as it was before.

@elveti: thanks for the inspiration with max-height.

Upvotes: 2

elveti
elveti

Reputation: 2386

If think you could do this by using max-height instead of height on the parents and setting the height on the .content child.

.small .content {
  height: 75px;
}
.big .content {
  height: 500px;
}
.small,
.big {
  transition: max-height 0.4s; /* Animates the max-height */
}
.small {
  max-height: 100px;
}
.big {
  max-height: 150px;
}
.current:hover {
  max-height: 3000px !important; /* Will be animated to height:auto and then it stops */
}
.content {
  background-color: #369;
}

https://jsfiddle.net/c4jhvd8m/

Upvotes: 1

Alvaro
Alvaro

Reputation: 9682

Using just CSS, instead of setting the height of the container to auto when hovering the div, you can set the overflow to visible.

This way the "hidden" inner will be seen when hovering while the container will remain the same if the inner is smaller.

.current:hover {
  //height: auto !important;
  overflow:visible;
}

https://jsfiddle.net/kkw22eby/4/

Upvotes: 1

Related Questions