Fix dashboard example so that the sticky sidebar has scrollable content (#36608)

This commit is contained in:
Tech Vanity 2022-06-29 21:33:23 +05:00 committed by GitHub
parent 7f70fcab0f
commit d4aee02458
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 2 additions and 8 deletions

View File

@ -28,7 +28,7 @@ extra_js:
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse"> <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="position-sticky pt-3"> <div class="position-sticky pt-3 sidebar-sticky">
<ul class="nav flex-column"> <ul class="nav flex-column">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" aria-current="page" href="#"> <a class="nav-link active" aria-current="page" href="#">

View File

@ -32,10 +32,7 @@ body {
} }
.sidebar-sticky { .sidebar-sticky {
position: relative;
top: 0;
height: calc(100vh - 48px); height: calc(100vh - 48px);
padding-top: .5rem;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
} }

View File

@ -28,10 +28,7 @@ body {
} }
.sidebar-sticky { .sidebar-sticky {
position: relative;
top: 0;
height: calc(100vh - 48px); height: calc(100vh - 48px);
padding-top: .5rem;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
} }

View File

@ -27,7 +27,7 @@ extra_js:
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse"> <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="position-sticky pt-3"> <div class="position-sticky pt-3 sidebar-sticky">
<ul class="nav flex-column"> <ul class="nav flex-column">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" aria-current="page" href="#"> <a class="nav-link active" aria-current="page" href="#">