Question 237442 in Html Question posted in
Some basic documentation can be found here.

Html – How can I make a div slide offscreen, and have another div expand to fill the space?

I’m currently messing with an information column on the left side of the screen. What I would like is for the column to smoothly slide off the left edge of the screen, and for the remaining content to smoothly fill up the space. I can use transform: translateX(-100%); to make the column slide off the screen, but the content in the center of the page stays where it is and doesn’t fill the space.

<div class="left-column">
Left column content
</div>

<div class="center-content">
Center content
</div>

.left-column {
  flex: 0 0 auto;
  transition: all 0.5s;
  width: 16.67%;
}

.left-column.collapsed {
  transform: translateX(-100%);
}

.center-content {
  flex: 1 0 0%;
  width: 100%;
}

How can I get the center content to fill the empty space as the left column slides offscreen?

Tags:

3

Answers


  1. 0

    It sounds like you’re working with a layout where you have a column on the left side of the screen and center content that should smoothly expand to fill the space when the column slides off the screen. To achieve this effect, you’ll need to adjust the layout properties in a way that allows the center content to dynamically take up the available space as the column slides away.

    Login or Signup to reply.
  2. 0

    It looks like there is no display for the container of these two elements, although I think I’ve solved this sliding problem using heigth property, by setting it to 0px at (.collapsed) class and it transition it in .left-column class, it worked 🙂

    let collapsed = false

function collapse(){
collapsed = !collapsed
document.querySelector(".left-column").classList.toggle("collapsed", collapsed)
}

document.querySelector("button").onclick = collapse
        .left-column {
      flex: 0 0 auto;
      transition: all 0.5s;
      width: 16.67%;
      border:1px solid blue;
    }

    .left-column.collapsed {
      transform: translateX(-100%);
      height:0px;
    }

    .center-content {
      flex: 1 0 0%;
      width: 100%;
      border:1px solid red;
    }
    <div class="left-column">
Left column content
</div>

<div class="center-content">
Center content
</div>

<button>collapse</button>
    Login or Signup to reply.
  3. 0

    To achieve the effect you’re looking for, you can adjust the flex properties and use the transition property for both the .left-column and .center-content elements.

    .left-column {
  flex: 1 0 16.67%; /* Adjust flex basis to match the original width */
  transition: flex 0.5s, transform 0.5s; /* Add flex transition */
  width: 16.67%;
 }

.left-column.collapsed {
   flex: 0; /* Make the left column completely collapse */
   transform: translateX(-100%);
 }

.center-content {
   flex: 1; /* Let the center content take up remaining space */
   transition: flex 0.5s; /* Add flex transition */
 }

    explanation:

    For the .left-column:
    Adjust the flex property to flex: 1 0 16.67%; to allow the column to take up its original width and smoothly collapse.
    Add a transition for the flex property along with the transform property.

    For the .left-column.collapsed:
    Set flex to flex: 0; to make the left column completely collapse.
    Apply the transform to slide the column offscreen.

    For the .center-content:
    Set flex to flex: 1; to allow the center content to fill the available space.
    Add a transition for the flex property.

    This way, as the .left-column collapses and slides off the screen, the .center-content will smoothly expand to fill the available space.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search