0

Tengo un Loader en la sección derecha y quiero que siempre se ajuste al ancho de la sección. En el componente principal hay una imagen de fondo (Instruccion background-image) que rompe el ancho (width) del loader, o sea sobresale de la seccion derecha y necesitaria que se mantenga adentro. Me di cuenta que es por la instruccion background-image por que al sacarla, funciona el comportamiento esperado. ¿Saben cómo puedo solucionarlo?

Este es el código completo:

DEMO

.principal {
  margin: 0;
  display: flex;
    flex-direction: row;
    min-height: 100%;
    top: 0;
    height: 480px;
    background-image: url(https://media.istockphoto.com/photos/blue-background-picture-id996078816?k=6&m=996078816&s=612x612&w=0&h=frpQG7R-F3NK0rktec6xJvoKekFv8oaYd04VJ-Am6QE=); /* Break Loader width */ 
}

.left-section{
      flex: 2;
    display: flex;
    justify-content: center;
}

.right-section {
   display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
    background-color: #1b252e;
   
}

.loader-content {
          height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    position: fixed;
    z-index: 101;
    top:0;
    background-color: rgba(256,256,256,0.6);
    
}

.loader {
          border: 2.5px solid transparent;
          border-radius: 80%;
          border-top: 2.5px solid red;
          border-bottom: 2.5px solid red;
          border-left: 2.5px solid red;
          width: 30px;
          height: 30px;
          -webkit-animation: gktJjP 0.8s linear infinite;
          -webkit-animation: gktJjP 0.8s linear infinite;
          animation: gktJjP 0.8s linear infinite;
  }
<div class="principal">
  <div class="left-section">
    left section
  </div>
  <div class="right-section">
    right section
    <div class="loader-content">
    <div class="loader"></div>
  </div>
  </div>
</div>

4
  • creo que necesitas explicar mejorte mejor: que tienes; que sale y que esperas que salga...
    – user46896
    Commented el 18 dic. 2020 a las 16:11
  • El comportamiento que espero es que el Loader se mantenga dentro de la seccion derecha, o sea que su ancho sea el mismo que el de la seccion derecha. El comportamiento que obtengo es que sobresale de la seccion y es por el agregado de la instruccion background-image. Commented el 18 dic. 2020 a las 17:12
  • La imagen "sobresale" de la sección de la derecha porque en realidad se la estás asignando a la sección principal. Si querés que la imagen de fondo esté sólo en la sección de la derecha deberías mover el background-image de .principal a .right-section
    – favcau
    Commented el 18 dic. 2020 a las 18:15
  • @favcau no funciona. ¨Pasa lo mismo Commented el 20 dic. 2020 a las 15:03

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.