1

Boa tarde. Estou criando um projeto em AspNet Core 2.1 com boostrap 4, adicionei um menu lateral esquerdo, porém ele esta ficando acima do conteudo do meu projeto como a print abaixo: menu esquerdo sobrescrevendo conteúdo do site Gostaria de ajuda para que ele ocupe a parte lateral esquerda apenas de maneira fixa, ficando assim ao lado do conteúdo. Segue os códigos: _layout.csthml

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - HelpDesk</title>

    <!--Boostrap CSS-->
    <link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.min.css" />

    <!--CSS Site-->
    <link rel="stylesheet" href="~/css/site.css" />

    <!--Fonts-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
    <!--Icones-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<body>

   <!--Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark">
  <a class="navbar-brand" href="~/Home/Menu">HelpDesk</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-555"
    aria-controls="navbarSupportedContent-555" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent-555">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="~/Home/Menu">Home
          <span class="sr-only">(current)</span>
        </a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-555" data-toggle="dropdown" aria-haspopup="true"
          aria-expanded="false">Menu
        </a>
        <div class="dropdown-menu dropdown-secondary" aria-labelledby="navbarDropdownMenuLink-555">
          <a class="dropdown-item" href="#">Chamados</a>
          <a class="dropdown-item" href="#">Relatorios</a>
          <a class="dropdown-item" href="#">Reservas</a>
        </div>
      </li>
    </ul>
    <ul class="navbar-nav ml-auto nav-flex-icons">
      <li class="nav-item avatar dropdown">
        <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-55" data-toggle="dropdown" aria-haspopup="true"
          aria-expanded="false">
          <i class="fas fa-user"></i>
        </a>
        <div class="dropdown-menu dropdown-menu-right dropdown-secondary" aria-labelledby="navbarDropdownMenuLink-55">
          <a class="dropdown-item" href="#">Perfil</a>
          <a class="dropdown-item" href="#">Configurações</a>
          <a class="dropdown-item" href="~/Home/Login">Sair</a>
        </div>
      </li>
    </ul>
  </div>
</nav>
<!-- Navbar -->

<!-- Sidebar Esquerda -->
<div id="wrapper">
        <div id="sidebar-wrapper">
            <aside id="sidebar">
                <ul id="sidemenu" class="sidebar-nav">
                    <li>
                        <a href="#">
                            <span class="sidebar-icon"><i class="fa fa-home"></i></span>
                            <span class="sidebar-title">DashBoard</span>
                        </a>
                    </li>
                    <li>
                        <a class="accordion-toggle collapsed toggle-switch" data-toggle="collapse" href="#submenu-2">
                            <span class="sidebar-icon"><i class="fa fa-users"></i></span>
                            <span class="sidebar-title">Chamados</span>
                            <b class="caret"></b>
                        </a>
                        <ul id="submenu-2" class="panel-collapse collapse panel-switch" role="menu">
                            <li><a href="#"><i class="fa fa-caret-right"></i>Abertos</a></li>
                            <li><a href="#"><i class="fa fa-caret-right"></i>Fechados</a></li>
                        </ul>
                    </li>

                    <li>
                        <a href="#">
                            <span class="sidebar-icon"><i class="fa fa-user-cog"></i></span>
                            <span class="sidebar-title">Configurações</span>
                        </a>
                    </li>

                </ul>
            </aside>            
        </div>

    </div> 

        @RenderBody()

        <hr />
        <footer>
            <p>&copy; 2019 - HelpDesk</p>
        </footer>
    </div>

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

    <!--Ajax-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

    <!--Site CS-->
    <script src="~/js/site.js"></script>

    <!--Bootstrap JS-->
    <script src="~/lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

CSS:

@media (min-width: 992px) {
    #wrapper {
        padding-left: 225px;
    }
}

@media (min-width: 992px) {
    #wrapper #sidebar-wrapper {
        width: 225px;
    }
}

#sidebar-wrapper {
    border-right: 1px solid #e7e7e7;
}

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 225px;
    width: 0;
    height: 100%;
    margin-left: -225px;
    overflow-y: auto;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}

#sidebar-wrapper .sidebar-nav {
    position: absolute;
    top: 0;
    width: 225px;
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#sidebar-wrapper .sidebar-nav li {
    text-indent: 0;
    line-height: 45px;
}

#sidebar-wrapper .sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #428bca;
}

.sidebar-nav li:first-child a {
    background: #92bce0 !important;
    color: #fff !important;
}

#sidebar-wrapper .sidebar-nav li a .sidebar-icon {
    width: 45px;
    height: 45px;
    font-size: 14px;
    padding: 0 2px;
    display: inline-block;
    text-indent: 7px;
    margin-right: 10px;
    color: #fff;
    float: left;
}

#sidebar-wrapper .sidebar-nav li a .caret {
  position: absolute;
  right: 23px;
  top: auto;
  margin-top: 20px;
}

#sidebar-wrapper .sidebar-nav li ul.panel-collapse {
    list-style: none;
    -moz-padding-start: 0;
    -webkit-padding-start: 0;
    -khtml-padding-start: 0;
    -o-padding-start: 0;
    padding: 0;
}

#sidebar-wrapper .sidebar-nav li ul.panel-collapse li i {
    margin-right: 10px;
}

#sidebar-wrapper .sidebar-nav li ul.panel-collapse li {
    text-indent: 15px;
}

@media (max-width: 992px) {
    #wrapper #sidebar-wrapper {
        width: 45px;
    }
    #wrapper #sidebar-wrapper #sidebar #sidemenu li ul {
        position: fixed;
        left: 45px;
        margin-top: -45px;
        z-index: 1000;
        width: 200px;
        height: 0;
    }
}

.sidebar-nav li:first-child a {
    background: #92bce0 !important;
    color: #fff !important;
}

.sidebar-nav li:nth-child(2) a {
    background: #6aa3d5 !important;
    color: #fff !important;
}

.sidebar-nav li:nth-child(3) a {
    background: #428bca !important;
    color: #fff !important;
}

.sidebar-nav li:nth-child(4) a {
    background: #3071a9 !important;
    color: #fff !important;
}

.sidebar-nav li:nth-child(5) a {
    background: #245682 !important;
    color: #fff !important;
}

Conteúdo:

@{
    ViewData["Title"] = "Login";
}
<table class="table">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Solicitante</th>
      <th scope="col">Titulo</th>
      <th scope="col">Opções</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>João</td>
      <td>Erro impressora</td>
      <td></td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Maria</td>
      <td>Computador Travo</td>
      <td></td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>José</td>
      <td>Acesso</td>
      <td></td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Luiz</td>
      <td>Sem Internet</td>
      <td></td>
    </tr>
  </tbody>
</table>
5
  • 1
    Quando vc usa position fixed, o elemento fica relativo ao body e não ocupa espaço no layout, e o espaço que ele ocupava fica livre, e o elemento que vier depois irá ocupar o espaço livre deixado.
    – Sam
    Commented 10/02/2019 às 17:16
  • Qual seria uma forma de corrigir, tentei colocar como absolute ou relative e continue tento erros.
    – Ivar
    Commented 10/02/2019 às 17:23
  • 1
    Vc tem que posicionar a tabela pra direita na mesma largura do sidebar pra não ficar por baixo.
    – Sam
    Commented 10/02/2019 às 17:28
  • 1
    Eh para essa sidebar com o menu ficar visível o tempo todo? Se o conteúdo da tabela for muito grande e a pagina tiver barra de rolagem e para essa sidebar continuar no lugar fixa mesmo quando o usuário rodar a tela?
    – hugocsl
    Commented 10/02/2019 às 19:04
  • @hugocsl sim, o objetivo e que ela sempre fixa do lado esquerdo, ficando a siderar esquerda e do lado o conteúdo (no caso dessa pagina o tabela).
    – Ivar
    Commented 10/02/2019 às 19:07

1 Resposta 1

1

Pelo que vi sua side bar tem duas larguras 225px para telas maiores que 992px, e 45px para telas menores que 992px

Dessa forma basta vc fazer no CSS um calc() para descontar essas larguras da largura total da tabela, e esse valor descontado de 225px ou 45px vc coloca no margin-left da table

Seria algo como isso:

max-width: calc(100% - 225px);
margin-left: 225px;

inserir a descrição da imagem aqui

OBS: Vi que vc ainda vai precisar tratar outras coisas nesse layout, como o Footer e fixar a navbar tb. Se tiver outro problema basta abrir outra pergunta como o caso em particular.

Segue o código da imagem acima, dexei no final do CSS o código que fiz:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - HelpDesk</title>

    <!--Boostrap CSS-->
    <link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

    <!--CSS Site-->
    <link rel="stylesheet" href="~/css/site.css" />

    <!--Fonts-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
    <!--Icones-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

    <style>
    @media (min-width: 992px) {
    #wrapper {
        padding-left: 225px;
    }
}

@media (min-width: 992px) {
    #wrapper #sidebar-wrapper {
        width: 225px;
    }
}

#sidebar-wrapper {
    border-right: 1px solid #e7e7e7;
}

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 225px;
    width: 0;
    height: 100%;
    margin-left: -225px;
    overflow-y: auto;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}

#sidebar-wrapper .sidebar-nav {
    position: absolute;
    top: 0;
    width: 225px;
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#sidebar-wrapper .sidebar-nav li {
    text-indent: 0;
    line-height: 45px;
}

#sidebar-wrapper .sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #428bca;
}

.sidebar-nav li:first-child a {
    background: #92bce0 !important;
    color: #fff !important;
}

#sidebar-wrapper .sidebar-nav li a .sidebar-icon {
    width: 45px;
    height: 45px;
    font-size: 14px;
    padding: 0 2px;
    display: inline-block;
    text-indent: 7px;
    margin-right: 10px;
    color: #fff;
    float: left;
}

#sidebar-wrapper .sidebar-nav li a .caret {
  position: absolute;
  right: 23px;
  top: auto;
  margin-top: 20px;
}

#sidebar-wrapper .sidebar-nav li ul.panel-collapse {
    list-style: none;
    -moz-padding-start: 0;
    -webkit-padding-start: 0;
    -khtml-padding-start: 0;
    -o-padding-start: 0;
    padding: 0;
}

#sidebar-wrapper .sidebar-nav li ul.panel-collapse li i {
    margin-right: 10px;
}

#sidebar-wrapper .sidebar-nav li ul.panel-collapse li {
    text-indent: 15px;
}

@media (max-width: 992px) {
    #wrapper #sidebar-wrapper {
        width: 45px;
    }
    #wrapper #sidebar-wrapper #sidebar #sidemenu li ul {
        position: fixed;
        left: 45px;
        margin-top: -45px;
        z-index: 1000;
        width: 200px;
        height: 0;
    }
}

.sidebar-nav li:first-child a {
    background: #92bce0 !important;
    color: #fff !important;
}

.sidebar-nav li:nth-child(2) a {
    background: #6aa3d5 !important;
    color: #fff !important;
}

.sidebar-nav li:nth-child(3) a {
    background: #428bca !important;
    color: #fff !important;
}

.sidebar-nav li:nth-child(4) a {
    background: #3071a9 !important;
    color: #fff !important;
}

.sidebar-nav li:nth-child(5) a {
    background: #245682 !important;
    color: #fff !important;
}

/* esse é o custom CSS que eu fiz */
body {
  background-color: #333;
}
table,
footer {
  color:#ddd;
}
.table {
  width: calc(100% - 225px);
  max-width: calc(100% - 225px);
  margin-left: 225px;
  transition: all .5s ease;
}
@media (max-width: 992px) {
  .table {
    width: calc(100% - 45px);
    max-width: calc(100% - 45px);
    margin-left: 45px;
  }
}

    </style>
</head>
<body>

   <!--Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark">
  <a class="navbar-brand" href="~/Home/Menu">HelpDesk</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-555"
    aria-controls="navbarSupportedContent-555" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent-555">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="~/Home/Menu">Home
          <span class="sr-only">(current)</span>
        </a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-555" data-toggle="dropdown" aria-haspopup="true"
          aria-expanded="false">Menu
        </a>
        <div class="dropdown-menu dropdown-secondary" aria-labelledby="navbarDropdownMenuLink-555">
          <a class="dropdown-item" href="#">Chamados</a>
          <a class="dropdown-item" href="#">Relatorios</a>
          <a class="dropdown-item" href="#">Reservas</a>
        </div>
      </li>
    </ul>
    <ul class="navbar-nav ml-auto nav-flex-icons">
      <li class="nav-item avatar dropdown">
        <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-55" data-toggle="dropdown" aria-haspopup="true"
          aria-expanded="false">
          <i class="fas fa-user"></i>
        </a>
        <div class="dropdown-menu dropdown-menu-right dropdown-secondary" aria-labelledby="navbarDropdownMenuLink-55">
          <a class="dropdown-item" href="#">Perfil</a>
          <a class="dropdown-item" href="#">Configurações</a>
          <a class="dropdown-item" href="~/Home/Login">Sair</a>
        </div>
      </li>
    </ul>
  </div>
</nav>
<!-- Navbar -->

<!-- Sidebar Esquerda -->
<div id="wrapper">
        <div id="sidebar-wrapper">
            <aside id="sidebar">
                <ul id="sidemenu" class="sidebar-nav">
                    <li>
                        <a href="#">
                            <span class="sidebar-icon"><i class="fa fa-home"></i></span>
                            <span class="sidebar-title">DashBoard</span>
                        </a>
                    </li>
                    <li>
                        <a class="accordion-toggle collapsed toggle-switch" data-toggle="collapse" href="#submenu-2">
                            <span class="sidebar-icon"><i class="fa fa-users"></i></span>
                            <span class="sidebar-title">Chamados</span>
                            <b class="caret"></b>
                        </a>
                        <ul id="submenu-2" class="panel-collapse collapse panel-switch" role="menu">
                            <li><a href="#"><i class="fa fa-caret-right"></i>Abertos</a></li>
                            <li><a href="#"><i class="fa fa-caret-right"></i>Fechados</a></li>
                        </ul>
                    </li>

                    <li>
                        <a href="#">
                            <span class="sidebar-icon"><i class="fa fa-user-cog"></i></span>
                            <span class="sidebar-title">Configurações</span>
                        </a>
                    </li>

                </ul>
            </aside>            
        </div>

    </div> 

        <!-- @RenderBody() -->

        <table class="table">
          <thead>
            <tr>
              <th scope="col">ID</th>
              <th scope="col">Solicitante</th>
              <th scope="col">Titulo</th>
              <th scope="col">Opções</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">1</th>
              <td>João</td>
              <td>Erro impressora</td>
              <td></td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td>Maria</td>
              <td>Computador Travo</td>
              <td></td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>José</td>
              <td>Acesso</td>
              <td></td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Luiz</td>
              <td>Sem Internet</td>
              <td></td>
            </tr>
          </tbody>
        </table>

        <hr />
        <footer>
            <p>&copy; 2019 - HelpDesk</p>
        </footer>
    
    

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

    <!--Ajax-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

    <!--Site CS-->
    <script src="~/js/site.js"></script>

    <!--Bootstrap JS-->
    <script src="~/lib/bootstrap/js/bootstrap.min.js"></script>

</body>
</html>

2
  • Excelente, muito obrigado @hugocsl pela ajuda.
    – Ivar
    Commented 10/02/2019 às 22:30
  • Sem problemas @João qq outro problema eh só dar o toque, boa sorte ai
    – hugocsl
    Commented 10/02/2019 às 22:34

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 .