Design a web page with a responsive grid layout that features three resizable areas

Question

Design a web page with a responsive grid layout that features three resizable areas

Seeking assistance in creating a webpage with 3 resizable divs inside a container. The left and right divs should be resizable by the user while the center div adjusts accordingly. Similar to coding sections in platforms like plunker or jsfiddle, the layout must remain horizontal without shifting to the next line. This challenge has been perplexing me for almost a week now, any guidance or suggestions are welcome.

Note: Utilizing AngularJs for this project, so solutions incorporating Angular approaches are preferred, although other methods are also acceptable.

Update:

To clarify, the divs should be resizable by the user, rather than just resizing based on browser window changes. For example, clicking on the border of an area should expand it and adjust the size of the center area accordingly. Currently, my implementation is not responsive and exhibits bugs when resizing after both left and right areas are minimized. A smoother behavior similar to JSFiddle's interactive resizing feature is desired, where adjusting one area impacts the others smoothly.

For reference, here is a link to my plunker. Any insights would be greatly appreciated.
Thank you in advance.

html css layout grid angularjs

Answer 1

Answer №1

My apologies for misunderstanding the question initially. The request was actually for a resizable grid, not equal height columns.

Below is a simple example demonstrating how vertical resizing can be implemented on a container using jQuery:

Here are the sources in this jsFiddle

Basic Javascript code snippet:

var diff = {x: resizeStart.x - e.clientX,y: resizeStart.y - e.clientY}; //Get the difference
resizeStart = {x: e.clientX, y: e.clientY}; // set new starting point

$('.left').width($('.left').width() - diff.x); // Set width of left container
$('.center').css('margin-left', parseInt($('.center').css('margin-left')) - diff.x); //Set margin of center container

This script saves the initial mouse drag position and calculates the difference with the current mouse pointer location. It then adjusts the width of the left container and the margin of the center container accordingly.

I hope this clarifies the solution for you.

Answer 2

My apologies for misunderstanding the question initially. The request was actually for a resizable grid, not equal height columns.

Below is a simple example demonstrating how vertical resizing can be implemented on a container using jQuery:

Here are the sources in this jsFiddle

Basic Javascript code snippet:

var diff = {x: resizeStart.x - e.clientX,y: resizeStart.y - e.clientY}; //Get the difference
resizeStart = {x: e.clientX, y: e.clientY}; // set new starting point

$('.left').width($('.left').width() - diff.x); // Set width of left container
$('.center').css('margin-left', parseInt($('.center').css('margin-left')) - diff.x); //Set margin of center container

This script saves the initial mouse drag position and calculates the difference with the current mouse pointer location. It then adjusts the width of the left container and the margin of the center container accordingly.

I hope this clarifies the solution for you.

Answer 3

Answer №2

When floating containers to the right or left, they often fall out of the layout causing issues. Unfortunately, there is no default solution to this problem.

One workaround is to calculate the height of both the left and right containers after the page loads, and then set the minimum height of the center container to match. An example using jQuery can be found in this jsFiddle.

Here is an HTML example:

<div class="left">
    <div class="left-content">
        Left Column <br/><br/><br/>more rows please...<br/><br/><br/>more rows please...
    </div>
</div>
<div class="right">
    <div class="right-content">
        Right Column <br/><br/><br/>more rows please...
    </div>
</div>
<div class="center">
    <div class="content">
        Center Column
    </div>
</div>

And the corresponding CSS:

.left {
    float: left;
    width: 200px;
    background: red;
}
.right {
    float: right;
    width: 200px;
    background: green;
}
.center {
    margin: 0 200px;
    background: yellow;
}

For the JavaScript part:

$(document).ready(function() {
    var max_height = 0;
    $('.left, .right, .center').each(function() {
        if($(this).outerHeight() > max_height) max_height = $(this).outerHeight();
    }).css('min-height', max_height);   
});

There are alternative CSS tricks available, although some may be complex or not entirely valid. Search for "equal height boxes" for more options.

Answer 4

When floating containers to the right or left, they often fall out of the layout causing issues. Unfortunately, there is no default solution to this problem.

One workaround is to calculate the height of both the left and right containers after the page loads, and then set the minimum height of the center container to match. An example using jQuery can be found in this jsFiddle.

Here is an HTML example:

<div class="left">
    <div class="left-content">
        Left Column <br/><br/><br/>more rows please...<br/><br/><br/>more rows please...
    </div>
</div>
<div class="right">
    <div class="right-content">
        Right Column <br/><br/><br/>more rows please...
    </div>
</div>
<div class="center">
    <div class="content">
        Center Column
    </div>
</div>

And the corresponding CSS:

.left {
    float: left;
    width: 200px;
    background: red;
}
.right {
    float: right;
    width: 200px;
    background: green;
}
.center {
    margin: 0 200px;
    background: yellow;
}

For the JavaScript part:

$(document).ready(function() {
    var max_height = 0;
    $('.left, .right, .center').each(function() {
        if($(this).outerHeight() > max_height) max_height = $(this).outerHeight();
    }).css('min-height', max_height);   
});

There are alternative CSS tricks available, although some may be complex or not entirely valid. Search for "equal height boxes" for more options.

Design a web page with a responsive grid layout that features three resizable areas

Update:

Answer №1

Answer №2

Similar questions

Tips for handling external CSS dependencies in a Create React App project

Incorporating CSS into React.js applications

Is there a way to detect when a CSS background image has finished loading? Does an event trigger upon completion?

Leveraging $this in conjunction with a jQuery plugin

Combining blend-mode and filter in CSS: A comprehensive guide

Symbol adjacent to button with multiple lines

Loading CSS files in Next.js can sometimes require additional time for the styles to

Prevent inspection of elements in Angular 2

Radio buttons failing to transfer any data

Utilize jQuery to wrap text within <b> tags and separate them with <br> tags

Tips for manipulating fixed elements while navigating through the window's content

Establish a background image that can be scrolled

Creating a navigation bar in React using react-scroll

Library of Angular components - utilizing images in templates

Can you tell me the equivalent of this Curl command in Angular JS?

Issue with DIV height in Internet Explorer occurs only when application is accessed using server name

When using ngOptions, remember that ngModel can be set to an entire object, not just its value

Begin with a Bootstrap non-fluid container and follow with a fluid container

How can you selectively send only the values of chosen checkboxes when dealing with hidden inputs that share the same name?

WordPress: Struggling to Show Sub-Menu on Hover Feature Not Functioning