Clever Geek Handbook

JQuery UI Resize with overflow

I have a div that resizes but now I have a problem that there is a y-scrollbar. The problem is that this scrollbar is unnecessary because all the content is visible.

Picture

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 needed?

Edit: I need a scrollbar if the user has changed it too much.

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

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

+3


source to share


3 answers


The answer to good manners

The problem might be in the hierarchy <div>

. Because when you have one <div>

inside the other, the first <div>

must be set as relative

, and the set of sequences <div>

must be set to position absolute

.

Html

The HTML will remain 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

Thus, you should have 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;
}

So it should work.

+1


source


Simple answer

You just need to change the property overflow: auto;

to overflow: hidden;

:



.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 margin.

0


source


Box size update error

For the second problem, you need to use height: auto;

in the field .panelcontent

:

.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;
}

Parameters overflow

:

overflow: visible | hidden | scroll | auto | inherit

As you can see in the description of the CSS Overflow Property:

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

I also recommend that you look at this link:

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

0


source






More articles:


All Articles