Resize HTML container element does not correctly resize child elements

Question

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.

Kelderic · Accepted Answer · 2014-04-09 13:13:05Z

1

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.

answered Apr 9, 2014 at 13:13

Kelderic

6,7269 gold badges49 silver badges90 bronze badges

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

Collectives™ on Stack Overflow

Resize HTML container element does not correctly resize child elements

1 Answer 1

HTML

CSS

JS

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

HTML

CSS

JS

Comments

Your Answer

Sign up or log in

Post as a guest

Related