A dynamic 3-column layout featuring a fluid design, with the middle div expanding based on the

Question

A dynamic 3-column layout featuring a fluid design, with the middle div expanding based on the

Sorry for the vague title, I'm struggling to explain my issue clearly, so let me elaborate.

I am using flexbox to create a 3-column layout and want the middle column to expand when either or both of the side panels are collapsed. Here is a screenshot showing the problem:

Currently, all three columns fill the screen width when the panels are open. However, when one of the side panels collapses, the center column does not expand to fill the space as needed.

I suspect that using translateX to toggle the panel visibility may be causing this issue. It seems like the center column doesn't recognize the shift in position of the side panels, hence fails to expand into the available space.

Code snippets:

CSS:

<style>
    body {
        background-color: lightslategrey;
    }
    .red {
        background-color: lightcoral;
    }

    .green {
        background-color: lightgreen;
    }

    .grey {
        background-color: lightslategray;
    }

    * {
        box-sizing: border-box;
    }

    .ls-toggle, .rs-toggle {
        //position: fixed;
        z-index: 1;
        cursor: pointer;
        transition: 0.5s;
    }

    #left-sidebar, #right-sidebar {
        width: 250px;
        height: 100vh;
        transition: 0.5s;
    }

    #left-sidebar.is-closed {
        transform: translateX(-80%);
    }

    #right-sidebar.is-closed {
        transform: translateX(80%);
    }

    .ls-top, .rs-top {
        display: flex;
        width:100%;
        height:35px;
        align-items: center;
        justify-content: flex-end;
        background-color: lightslategrey;
    }

    .rs-top {
        justify-content: flex-start;
    }

    #mw-content {
        width: 100%;
        height: 100vh;
    }
</style>

HTML:

<div class="d-flex">
    <div id="left-sidebar" class="col- red">
        <div class='ls-top grey'>
            <button class="ls-toggle"><i class="fas fa-angle-left fa-2x"></i></button>
        </div>
    </div>

    <div id="mw-content" class="col green">
        <h3> Main Window Content.</h3>
    </div>

    <div id="right-sidebar" class="col- red">
        <div class='rs-top grey'>
            <button class="rs-toggle"><i class="fas fa-angle-right fa-2x"></i></button>
        </div>
    </div>
</div>

JS:

$(document).ready(function () {
        var lsToggleBtn = document.querySelector('.ls-toggle');
        var lsSidebar = document.querySelector('#left-sidebar');
        var rsToggleBtn = document.querySelector('.rs-toggle');
        var rsSidebar = document.querySelector('#right-sidebar');

        lsToggleBtn.addEventListener('click', function () {
            lsToggleBtn.classList.toggle('is-closed');
            lsSidebar.classList.toggle('is-closed');
        });

        rsToggleBtn.addEventListener('click', function () {
            rsToggleBtn.classList.toggle('is-closed');
            rsSidebar.classList.toggle('is-closed');
        });
    });

Attempts made:

Added flex: 1 1 auto to main content container (mw-content).
Set flex: 0 to l/r sidebar containers & flex: 1 1 auto to main content container
Applied width: 100% on main content container
Experimented with using translateX on main content container & adjusting width on left sidebar click

I've tried these solutions without success. I admit I struggle with flexbox, so any advice would be greatly appreciated. Thank you! :)

javascript css flexbox css-transforms

Answer 1

Answer №1

To achieve the desired layout, you must utilize the "position: absolute" property and integrate two additional classList.toggle functions.

$(document).ready(function () {
  var mwContent = document.querySelector('#mw-content');          // !!
  var lsToggleBtn = document.querySelector('.ls-toggle');
  var lsSidebar = document.querySelector('#left-sidebar');
  var rsToggleBtn = document.querySelector('.rs-toggle');
  var rsSidebar = document.querySelector('#right-sidebar');

  lsToggleBtn.addEventListener('click', function () {
    lsToggleBtn.classList.toggle('is-closed');
    lsSidebar.classList.toggle('is-closed');
    mwContent.classList.toggle('ls-pos');         // here
  });

  rsToggleBtn.addEventListener('click', function () {
    rsToggleBtn.classList.toggle('is-closed');
    rsSidebar.classList.toggle('is-closed');
    mwContent.classList.toggle('rs-pos');         // here
  });
});

body {
  background-color: lightslategrey;
  margin: 0;
  overflow: hidden;
}

.red {
  background-color: lightcoral;
}

.green {
  background-color: lightgreen;
}

.grey {
  background-color: lightslategray;
}

* {
  box-sizing: border-box;
}

.d-flex {
  display: flex;
  position: relative;
}

.ls-toggle,
.rs-toggle {
  cursor: pointer;
  transition: 0.5s;
}

#left-sidebar {
  position: absolute;
  left: 0;
  width: 250px;
  height: 100vh;
  transition: 0.5s;
}

#right-sidebar {
  position: absolute;
  right: 0;
  width: 250px;
  height: 100vh;
  transition: 0.5s;
}

#left-sidebar.is-closed {
  transform: translateX(-80%);
}

#right-sidebar.is-closed {
  transform: translateX(80%);
}

.ls-top,
.rs-top {
  display: flex;
  width: 100%;
  height: 35px;
  align-items: center;
  justify-content: flex-end;
  background-color: lightslategrey;
}

.rs-top {
  justify-content: flex-start;
}

#mw-content {
  position: absolute;
  right: 250px;
  left: 250px;
  height: 100vh;
  transition: 0.5s;
}

.ls-pos {
  left: 50px !important;
  transition: 0.5s;
}

.rs-pos {
  right: 50px !important;
  transition: 0.5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


  <div class="d-flex">
    <div id="left-sidebar" class="col red">
      <div class='ls-top grey'>
        <button class="ls-toggle"><i class="fas fa-angle-left fa-2x"></i></button>
      </div>
    </div>

    <div id="mw-content" class="col green">
      <h3> Main Window Content.</h3>
    </div>

    <div id="right-sidebar" class="col red">
      <div class='rs-top grey'>
        <button class="rs-toggle"><i class="fas fa-angle-right fa-2x"></i></button>
      </div>
    </div>
  </div>

Answer 2

To achieve the desired layout, you must utilize the "position: absolute" property and integrate two additional classList.toggle functions.

$(document).ready(function () {
  var mwContent = document.querySelector('#mw-content');          // !!
  var lsToggleBtn = document.querySelector('.ls-toggle');
  var lsSidebar = document.querySelector('#left-sidebar');
  var rsToggleBtn = document.querySelector('.rs-toggle');
  var rsSidebar = document.querySelector('#right-sidebar');

  lsToggleBtn.addEventListener('click', function () {
    lsToggleBtn.classList.toggle('is-closed');
    lsSidebar.classList.toggle('is-closed');
    mwContent.classList.toggle('ls-pos');         // here
  });

  rsToggleBtn.addEventListener('click', function () {
    rsToggleBtn.classList.toggle('is-closed');
    rsSidebar.classList.toggle('is-closed');
    mwContent.classList.toggle('rs-pos');         // here
  });
});

body {
  background-color: lightslategrey;
  margin: 0;
  overflow: hidden;
}

.red {
  background-color: lightcoral;
}

.green {
  background-color: lightgreen;
}

.grey {
  background-color: lightslategray;
}

* {
  box-sizing: border-box;
}

.d-flex {
  display: flex;
  position: relative;
}

.ls-toggle,
.rs-toggle {
  cursor: pointer;
  transition: 0.5s;
}

#left-sidebar {
  position: absolute;
  left: 0;
  width: 250px;
  height: 100vh;
  transition: 0.5s;
}

#right-sidebar {
  position: absolute;
  right: 0;
  width: 250px;
  height: 100vh;
  transition: 0.5s;
}

#left-sidebar.is-closed {
  transform: translateX(-80%);
}

#right-sidebar.is-closed {
  transform: translateX(80%);
}

.ls-top,
.rs-top {
  display: flex;
  width: 100%;
  height: 35px;
  align-items: center;
  justify-content: flex-end;
  background-color: lightslategrey;
}

.rs-top {
  justify-content: flex-start;
}

#mw-content {
  position: absolute;
  right: 250px;
  left: 250px;
  height: 100vh;
  transition: 0.5s;
}

.ls-pos {
  left: 50px !important;
  transition: 0.5s;
}

.rs-pos {
  right: 50px !important;
  transition: 0.5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


  <div class="d-flex">
    <div id="left-sidebar" class="col red">
      <div class='ls-top grey'>
        <button class="ls-toggle"><i class="fas fa-angle-left fa-2x"></i></button>
      </div>
    </div>

    <div id="mw-content" class="col green">
      <h3> Main Window Content.</h3>
    </div>

    <div id="right-sidebar" class="col red">
      <div class='rs-top grey'>
        <button class="rs-toggle"><i class="fas fa-angle-right fa-2x"></i></button>
      </div>
    </div>
  </div>

Answer 3

Answer №2

Here is an illustration demonstrating how vanilla JavaScript can be utilized to achieve this functionality.

The process involves two distinct functions - one designed to monitor the collapsing of section elements and resize the central section accordingly. This function keeps track of clicks, adding the IDs of clicked sections to an array. By checking this array conditionally, if it includes the IDs of the two outer sections, we adjust the size of the middle section using style.transform => scale(). The second function serves to reset the collapsible elements.

For more detailed information, please refer to the code snippet provided below.

let clicked = [];
const middle = document.querySelector('#sect2')

let section = document.querySelectorAll('.sect')
let reset = document.querySelector('#reset')

// Resize function on Collapse
const resizeOnCollapse = (elements) => {
  // iterating over the three sections
  elements.forEach(sec => {
    // Ensuring that the middle section cannot collapse
    if (sec.id !== 'sect2') {
      // Event listener to detect clicks on the outer sections
        sec.addEventListener('click', (event) => {
          // Appending the clicked elements to the array
          clicked.push(event.target.id)
          event.target.style.width = '0px'; // Set width to 0 for collapsing effect
          // Conditional statement to check if both outer sections are included in the array
          if (clicked.includes('sect1') && clicked.includes('sect3')) {
            // Resizing the middle section using transform: scale()
            middle.style.transform = 'scale(1.2)'
            middle.style.transition = 'transform .5s ease-out' // Adding transition animation
         }
       })
     }
   })
}

// Function to reset elements and the array 
const resetElements = (element, sections) => {
    element.addEventListener('input', () => {
      clicked = []; // Resetting the array
      sections.forEach((section) => {
        section.style.width = '30vw'; // Resetting width to undo collapse
        section.style.transform = 'scale(1)'; // Resetting transform rule to scale(1)
      })
    })
}

// Invoking the functions
resetElements(reset, section)
resizeOnCollapse(section)

#main {
  display: flex;
  justify-content: space-around;
}

.sect {
  width: 30vw;
  height: 80vh;
}

#sect1 {
  background-color: red;
}

#sect2 {
  background-color: blue;
}

#sect3 {
  background-color: green;
}

<button id="reset">reset</button>
<div id="main">
  <div id="sect1" class="sect">
  </div>
  <div id="sect2" class="sect">
  </div>
  <div id="sect3" class="sect">
  </div>
</div>

Answer 4

Here is an illustration demonstrating how vanilla JavaScript can be utilized to achieve this functionality.

The process involves two distinct functions - one designed to monitor the collapsing of section elements and resize the central section accordingly. This function keeps track of clicks, adding the IDs of clicked sections to an array. By checking this array conditionally, if it includes the IDs of the two outer sections, we adjust the size of the middle section using style.transform => scale(). The second function serves to reset the collapsible elements.

For more detailed information, please refer to the code snippet provided below.

let clicked = [];
const middle = document.querySelector('#sect2')

let section = document.querySelectorAll('.sect')
let reset = document.querySelector('#reset')

// Resize function on Collapse
const resizeOnCollapse = (elements) => {
  // iterating over the three sections
  elements.forEach(sec => {
    // Ensuring that the middle section cannot collapse
    if (sec.id !== 'sect2') {
      // Event listener to detect clicks on the outer sections
        sec.addEventListener('click', (event) => {
          // Appending the clicked elements to the array
          clicked.push(event.target.id)
          event.target.style.width = '0px'; // Set width to 0 for collapsing effect
          // Conditional statement to check if both outer sections are included in the array
          if (clicked.includes('sect1') && clicked.includes('sect3')) {
            // Resizing the middle section using transform: scale()
            middle.style.transform = 'scale(1.2)'
            middle.style.transition = 'transform .5s ease-out' // Adding transition animation
         }
       })
     }
   })
}

// Function to reset elements and the array 
const resetElements = (element, sections) => {
    element.addEventListener('input', () => {
      clicked = []; // Resetting the array
      sections.forEach((section) => {
        section.style.width = '30vw'; // Resetting width to undo collapse
        section.style.transform = 'scale(1)'; // Resetting transform rule to scale(1)
      })
    })
}

// Invoking the functions
resetElements(reset, section)
resizeOnCollapse(section)

#main {
  display: flex;
  justify-content: space-around;
}

.sect {
  width: 30vw;
  height: 80vh;
}

#sect1 {
  background-color: red;
}

#sect2 {
  background-color: blue;
}

#sect3 {
  background-color: green;
}

<button id="reset">reset</button>
<div id="main">
  <div id="sect1" class="sect">
  </div>
  <div id="sect2" class="sect">
  </div>
  <div id="sect3" class="sect">
  </div>
</div>

A dynamic 3-column layout featuring a fluid design, with the middle div expanding based on the

Answer №1

Answer №2

Similar questions

Effortlessly transforming a massive JSON into an Array using ReactJS

`Inconsistencies in state management across components`

Tips and tricks for manipulating base64 images in Node.js

Tips for triggering an error using promise.all in the absence of any returned data?

Javascript Parameter

Avoid loading external scripts from third-party sources such as JavaScript libraries, Bing Maps API, and Lighthouse performance tool

Having difficulty displaying a partial view within a view while making an AJAX call

Using jQuery to handle nested div elements and triggering a click event only once when the inner div is clicked

Please do not exceed two words in the input field

unable to retrieve access-token and uid from the response headers

How can I create a Material ui Card with a border-less design?

How to efficiently calculate totals in an HTML table using JavaScript/jQuery

Tips for making a central CSS gradient

Toggle checkbox feature in Bootstrap not functioning properly when placed within ng-view

Animating with CSS3 triggered by JavaScript

Updating the object does not result in the interpolation value being updated as well

IE compatibility mode causing ckeditor dropdown to be hidden

Rearrange the elements in an array containing objects

Is there a way to save a Morris.js chart as a PDF file

What could be causing the lack of updates to my component in this todo list?