CODEWITHSUNDEEP
javascriptjquerycss
user483040
user483040

Reputation:

javascript/css: scrollbars w/in a containing div when the nested div gets too long

I've got this html (simplified)

<div class="outer" style="float:left">
  <div class="inner" style="float:left">
    <div class="contained" style="clear:both">...</div>
    <div class="contained" style="clear:both">...</div>
    <div class="contained" style="clear:both">...</div>
  </div>
  <div class="inner" style="float:left">
    <div class="contained" style="clear:both">...</div>
    <div class="contained" style="clear:both">...</div>
    <div class="contained" style="clear:both">...</div>
  </div>
</div>

the "inner" divs are resizable vis jQuery:

$(".contained").resizable({
    maxHeight: "27px"
  });

The behavior I'm looking for is to have the "outer" div sprout horizontal scrollbars when one or more of the "inner" divs is resized. Here are the classes on inner and outer in my .css file:

.outer {
  width: 1000px;
  height: auto;
}

.inner {
  display: block;
  width: auto;
  margin: 2px;
  z-index: 2;
}

Some of those css values are "sacrificing the chicken" things--meaning I was getting desperate and throwing darts at it.

If you need any further details, please let me know.

thanks!

Upvotes: 2

Views: 334

Answers (2)

BCDeWitt
BCDeWitt

Reputation: 4773

Is this what you want?

.outer {
    overflow:auto;
}

Upvotes: 0

Anupam
Anupam

Reputation: 8016

I guess you want this behaviour

I used overflow:scroll property on inner div

Upvotes: 1

Related Questions