CODEWITHSUNDEEP
jqueryhtmlcssscrollbaroverflow
Klipp Ohei
Klipp Ohei

Reputation: 385

jQuery UI Resizable with overflow-y

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

Upvotes: 3

Views: 738

Answers (3)

Francisco Maria Calisto
Francisco Maria Calisto

Reputation: 3250

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/

Upvotes: 0

Francisco Maria Calisto
Francisco Maria Calisto

Reputation: 3250

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.

Upvotes: 0

Francisco Maria Calisto
Francisco Maria Calisto

Reputation: 3250

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.

Upvotes: 1

Related Questions