CODEWITHSUNDEEP
javascriptjqueryhtmlcssangularjs
amenoire
amenoire

Reputation: 1892

Resize HTML container element does not correctly resize child elements

I have a simple AngularJS, JS, JQ, HTML5, CSS3 web app. I am facing the following problem: when I try to resize the part of web interface - child elements get smaller, but they cross the border line. All content is grabbed into a <div id="resizable"> which is just jquery-ui resizable element:

<script> $(function() { $( "#resizable" ).resizable(); }); </script>

It looks like this:

1:

enter image description here

And what I want is that it \'d be like this:

2:

enter image description here

No content should be below the border line. What CSS rules have to be applied for child elements so they change their size according to their container element? I tried already all of available positioning, but it just don't work - elements behave identicaly.

Can anyone provide a working plunker, which would be capable of resizing child elements correctly? Every useful answer is highly appreciated and evaluated.

Thank you.

Upvotes: 0

Views: 463

Answers (1)

Kelderic
Kelderic

Reputation: 6687

Have you tried setting all your heights and widths in %? I threw together an example in a JSFiddle, of a 3x3 grid. They are all set to a 1/3 width and height, and so resize automatically when a user resizes the outer wrap.

Example Fiddle

HTML

<div class="resizable">
    <div class="row">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
    ...Two more rows...
</div>

CSS

.row {
    height:33%;
    width:100%;
}
.cell {
    width:33%;
    height:100%;
    float:left;
}

JS

$('.resizable').resizable();

Obviously this is an example to demonstrate the concept and not code that will work directly for your site. If you could post some of your code, I can try to adapt it.

Upvotes: 1

Related Questions