0

Fiz uma barra lateral no meu site, e o width dela é alterado pelo javascript quando aperta um botão, e tudo funciona bem, mas se eu diminuir o tamanho da tela até um certo ponto o width para de funcionar, mesmo que eu altere o valor no inspecionar elemento.

OBS: O botão que ativa a função existe, mas não está nesse código.

<div id="sidebar_base">
        <div id="sidebar">
        </div>
</div> 
div#sidebar {
    width: 50px;
    height: 100%;

    position: fixed;

    background-color: rgba(79, 79, 79, 1);

    transition: width 0.4s;
}

span#sidebar_base {
    width: 50px;
    height: 100%;
    min-width: 50px;

    background-color: rgba(79, 79, 79, 1);

    transition: width 0.4s;
}
        function sidebarAnimation() {
            var sidebar = document.getElementById("sidebar");
            var sidebar_base = document.getElementById("sidebar_base");

            if(order) {
                sidebar.style.width="150px";
                sidebar_base.style.width="150px";
                
                order = false;
            } else {
                sidebar.style.width="50px";
                sidebar_base.style.width="50px";

                order = true;
            }
        }
1
  • Cara edita a pergunta e coloca o mínimo de código ai que de para simular o seu problema
    – hugocsl
    Commented 26/11/2020 às 15:22

1 Resposta 1

0

Você pode tentar fazer isso de uma maneira diferente: Pode criar uma nova classe com a largura de 150px e ao clicar no botão, adicionar ela ao elemento.

CSS:

   .large {
      width: 150px;
   }

JS:

   function sidebarAnimation() {
        var sidebar = document.getElementById("sidebar");
        var sidebar_base = document.getElementById("sidebar_base");

        if(order) {
            sidebar.classList.add("large");
            sidebar_base.classList.add("large");
            
            order = false;
        } else {
            sidebar.classList.remove("large");
            sidebar_base.classList.remove("large");

            order = true;
        }
    }

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .