jQuery UI Resizable with overflow-y

Question

I have a div which is resizable but now I have the problem that there is a y-scrollbar. The problem is that this scrollbar isn't necessary, because all content is visible.

Image

scrollbar

HTML

<script>$( "#pc_test" ).resizable({handles: \'n, s\'});</script>
<div id="panel_test">
    <div class="panelheadbar pgrau">Test</div>
    <div id="pc_test" class="panelcontent ui-resizable" style="font-size: 14px;">
    Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>
    </div>
</div>

CSS

.panelheadbar { padding: 5px; font-weight: bold; color: #000; height: auto; }
.pgrau { background-color: #ccc; }
.panelcontent { overflow-y: auto; overflow-x: hidden;padding: 10px; background-color: #FFF; border: 1px solid #ccc; }

How can I fix this, that there is only a scrollbar when it's needed?

Edit: I want a scrollbar if the user resized it too much.

Edit 2: here there should be a scrollbar enter image description here

Edit3: The result should look like this enter image description here

Francisco Maria Calisto · Accepted Answer · 2015-07-09 17:25:31Z

1

A Good Manners Answer

The problem might be on the <div> hierarchy. Because when you have one <div> inside another, the first <div> will need to be set as relative and the sequence set of <div> need to be set to absolute position.

HTML

The HTML will stay as it is.

<script>$( "#pc_test" ).resizable({handles: \'n, s\'});</script>
<div id="panel_test">
    <div class="panelheadbar pgrau">Test</div>
    <div id="pc_test" class="panelcontent ui-resizable" style="font-size: 14px;">
    Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>Test<br>
    </div>
</div>

CSS

That way you should have on CSS:

.panelheadbar {
    position: relative;
    overflow: hidden;
    padding: 5px;
    font-weight: bold;
    color: #000;
    height: auto;
}

.pgrau {
    background-color: #ccc;
}

.panelcontent {
    position: absolute;
    overflow: hidden;
    overflow-x: hidden;
    padding: 10px;
    background-color: #FFF;
    border: 1px solid #ccc;
}

That way it should work.

edited Jul 9, 2015 at 17:25

answered Jul 9, 2015 at 17:18

Francisco Maria Calisto

3,3806 gold badges28 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Klipp Ohei Over a year ago

So <div id="panel_test"> has to be relative and the others absolute?

Klipp Ohei Over a year ago

I added a second image to my question. With your solution I get this response but in that case there should be a scrollbar.

Francisco Maria Calisto · Accepted Answer · 2015-07-09 17:27:12Z

0

A Simple Answer

You just need to change overflow: auto; to overflow: hidden; property:

.panelheadbar {
    overflow: hidden;
    padding: 5px;
    font-weight: bold;
    color: #000;
    height: auto;
}

.pgrau {
    background-color: #ccc;
}

.panelcontent {
    overflow: hidden;
    overflow-x: hidden;
    padding: 10px;
    background-color: #FFF;
    border: 1px solid #ccc;
}

The overflow property specifies what to do if the content of an element exceeds the size of the element's box.

edited Jul 9, 2015 at 17:27

answered Jul 9, 2015 at 16:48

Francisco Maria Calisto

3,3806 gold badges28 silver badges60 bronze badges

5 Comments

Klipp Ohei Over a year ago

Oh sry, at this position should stand "overflow-y; auto;", because I want to have a scrollbar when you resized it to much.

Klipp Ohei Over a year ago

Nope because I want a scrollbar, but not if it's not needed. My problem is that there is a scrollbar even if there is enough height.

Francisco Maria Calisto Over a year ago

Try it on .panelheadbar and then tell me if it works please.

Klipp Ohei Over a year ago

.panelheadbar with overflow:hidden and .panelcontent with overflow-y: auto; overflow-x: hidden; didn't work

Francisco Maria Calisto Over a year ago

So please give us more from your CSS.

Francisco Maria Calisto · Accepted Answer · 2015-07-10 11:30:18Z

0

Box Re-size Problem Answer

For the second problem you will need to use height: auto; in the .panelcontent field:

.panelheadbar {
    position: relative;
    overflow: auto;
    padding: 5px;
    font-weight: bold;
    color: #000;
    height: auto;
}

.pgrau {
    background-color: #ccc;
}

.panelcontent {
    height: auto;
    position: absolute;
    overflow: auto;
    overflow-x: auto;
    padding: 10px;
    background-color: #FFF;
    border: 1px solid #ccc;
}

The options for overflow are:

overflow: visible | hidden | scroll | auto | inherit

As you can see on the description of CSS overflow Property:

http://www.w3schools.com/cssref/pr_pos_overflow.asp

I recommend you as well to watch this link:

https://css-tricks.com/almanac/properties/o/overflow/

edited Jul 10, 2015 at 11:30

answered Jul 9, 2015 at 19:03

Francisco Maria Calisto

3,3806 gold badges28 silver badges60 bronze badges

8 Comments

Klipp Ohei Over a year ago

I added a picture how the result should look like (edit 3)

Francisco Maria Calisto Over a year ago

Try to change position: absolute; to position: relative; on the .panelcontent and see how it works please.

Klipp Ohei Over a year ago

With that solution I get no scrollbar at all.

Klipp Ohei Over a year ago

But the problem is, even if I have enough height for the text, the scrollbar is still there. And in this case the scrollbar should be hidden

Klipp Ohei Over a year ago

Isn't overflow: auto the correct choice when I want a scrollbar only if it's needed? And I think the height-variable comes from the ui-resizable.

|

Collectives™ on Stack Overflow

jQuery UI Resizable with overflow-y

3 Answers 3

A Good Manners Answer

HTML

CSS

2 Comments

A Simple Answer

5 Comments

Box Re-size Problem Answer

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

A Good Manners Answer

HTML

CSS

2 Comments

A Simple Answer

5 Comments

Box Re-size Problem Answer

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related