Skip to main content
se añadieron 2 caracteres en el cuerpo
Origen Enlace
Rene Limon
  • 4.6k
  • 2
  • 22
  • 34

Estoy diseñando una interfaz en la que necesito hacer un sidebar para mostrar un offcanvas clásico pero estoy teniendo un problema de diseño. Cuando se muestra el sidebar se tiene que mover hacia la izquierda el contenido de main respetando el widthwidth actual (ajustándose automáticamente), pero al hacer esta animación el contenido de main se desplaza completamente generando un overflow en x

let sidebar = document.getElementById("side");
let main = document.getElementById("main");
let button = document.getElementById("mybutton");

button.addEventListener("click", function(e) {
  sidebar.classList.toggle('closed');
  main.classList.toggle('closed');
}, false);
.App {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 100vh;
  color: white;
}

main {
  background: black;
  border: 2px solid #f4c;
  flex: 1;
  transform: translateX(0px);
  transition: transform .7s;
}

main.closed {
  transform: translateX(236px);
}

aside>div {
  background-color: #000000;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 236px;
  transform: translateX(-236px);
  transition: transform .7s;
}

aside div.closed {
  transform: translateX(0px);
}
<div class="App">
  <aside>
    <div id='side'>
      sidebar
    </div>
  </aside>
  <main id='main'>
    <button id='mybutton'>
      show/hide
    </button> hola
  </main>
</div>

Aún no logro evitar ese overflow, ojalá puedan ayudarme

Estoy diseñando una interfaz en la que necesito hacer un sidebar para mostrar un offcanvas clásico pero estoy teniendo un problema de diseño. Cuando se muestra el sidebar se tiene que mover hacia la izquierda el contenido de main respetando el width actual (ajustándose automáticamente), pero al hacer esta animación el contenido de main se desplaza completamente generando un overflow en x

let sidebar = document.getElementById("side");
let main = document.getElementById("main");
let button = document.getElementById("mybutton");

button.addEventListener("click", function(e) {
  sidebar.classList.toggle('closed');
  main.classList.toggle('closed');
}, false);
.App {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 100vh;
  color: white;
}

main {
  background: black;
  border: 2px solid #f4c;
  flex: 1;
  transform: translateX(0px);
  transition: transform .7s;
}

main.closed {
  transform: translateX(236px);
}

aside>div {
  background-color: #000000;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 236px;
  transform: translateX(-236px);
  transition: transform .7s;
}

aside div.closed {
  transform: translateX(0px);
}
<div class="App">
  <aside>
    <div id='side'>
      sidebar
    </div>
  </aside>
  <main id='main'>
    <button id='mybutton'>
      show/hide
    </button> hola
  </main>
</div>

Aún no logro evitar ese overflow, ojalá puedan ayudarme

Estoy diseñando una interfaz en la que necesito hacer un sidebar para mostrar un offcanvas clásico pero estoy teniendo un problema de diseño. Cuando se muestra el sidebar se tiene que mover hacia la izquierda el contenido de main respetando el width actual (ajustándose automáticamente), pero al hacer esta animación el contenido de main se desplaza completamente generando un overflow en x

let sidebar = document.getElementById("side");
let main = document.getElementById("main");
let button = document.getElementById("mybutton");

button.addEventListener("click", function(e) {
  sidebar.classList.toggle('closed');
  main.classList.toggle('closed');
}, false);
.App {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 100vh;
  color: white;
}

main {
  background: black;
  border: 2px solid #f4c;
  flex: 1;
  transform: translateX(0px);
  transition: transform .7s;
}

main.closed {
  transform: translateX(236px);
}

aside>div {
  background-color: #000000;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 236px;
  transform: translateX(-236px);
  transition: transform .7s;
}

aside div.closed {
  transform: translateX(0px);
}
<div class="App">
  <aside>
    <div id='side'>
      sidebar
    </div>
  </aside>
  <main id='main'>
    <button id='mybutton'>
      show/hide
    </button> hola
  </main>
</div>

Aún no logro evitar ese overflow, ojalá puedan ayudarme

Origen Enlace
Rene Limon
  • 4.6k
  • 2
  • 22
  • 34

Evitar overflow cuando hago un translateX

Estoy diseñando una interfaz en la que necesito hacer un sidebar para mostrar un offcanvas clásico pero estoy teniendo un problema de diseño. Cuando se muestra el sidebar se tiene que mover hacia la izquierda el contenido de main respetando el width actual (ajustándose automáticamente), pero al hacer esta animación el contenido de main se desplaza completamente generando un overflow en x

let sidebar = document.getElementById("side");
let main = document.getElementById("main");
let button = document.getElementById("mybutton");

button.addEventListener("click", function(e) {
  sidebar.classList.toggle('closed');
  main.classList.toggle('closed');
}, false);
.App {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 100vh;
  color: white;
}

main {
  background: black;
  border: 2px solid #f4c;
  flex: 1;
  transform: translateX(0px);
  transition: transform .7s;
}

main.closed {
  transform: translateX(236px);
}

aside>div {
  background-color: #000000;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 236px;
  transform: translateX(-236px);
  transition: transform .7s;
}

aside div.closed {
  transform: translateX(0px);
}
<div class="App">
  <aside>
    <div id='side'>
      sidebar
    </div>
  </aside>
  <main id='main'>
    <button id='mybutton'>
      show/hide
    </button> hola
  </main>
</div>

Aún no logro evitar ese overflow, ojalá puedan ayudarme