rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Dashboard updates (#26179)

Browse Source 
* Update Dashboard example

- Replaces .sticky-top on .navbar with .fixed-top
- Adjusts padding on main content area and sidebar to account for fixed navbar
- Move to padding in sidebar instead of top: 48px; fixes Firefox rendering issue
- Adds new .shadow utility for a little extra cherry on top
- Moves sticky styles to separate feature query ruleset to avoid IE rendering issues

* Add .w-100 to chart to fix IE horizontal scroll from label that extended past viewport
This commit is contained in:
Mark Otto 2018-04-01 18:14:07 -07:00 committed by GitHub
parent a0c7473a34
commit e47fb40ff2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
docs/4.0/examples/dashboard/dashboard.css
View File

@ -18,20 +18,26 @@ body {
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 100; /* Behind the navbar */ z-index: 100; /* Behind the navbar */
padding: 0; padding: 48px 0 0; /* Height of navbar */
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1); box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
} }
.sidebar-sticky { .sidebar-sticky {
position: -webkit-sticky; position: relative;
position: sticky; top: 0;
top: 48px; /* Height of navbar */
height: calc(100vh - 48px); height: calc(100vh - 48px);
padding-top: .5rem; 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. */
} }
@supports ((position: -webkit-sticky) or (position: sticky)) {
.sidebar-sticky {
position: -webkit-sticky;
position: sticky;
}
}
.sidebar .nav-link { .sidebar .nav-link {
font-weight: 500; font-weight: 500;
color: #333; color: #333;
@ -56,6 +62,14 @@ body {
text-transform: uppercase; text-transform: uppercase;
} }
/*
* Content
*/
[role="main"] {
padding-top: 48px; /* Space for fixed navbar */
}
/* /*
* Navbar * Navbar
*/ */

8
docs/4.0/examples/dashboard/index.html
View File

@ -17,7 +17,7 @@
</head> </head>
<body> <body>
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0"> <nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Company name</a> <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Company name</a>
<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search"> <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
<ul class="navbar-nav px-3"> <ul class="navbar-nav px-3">
@ -105,8 +105,8 @@
</div> </div>
</nav> </nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4"> <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom"> <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Dashboard</h1> <h1 class="h2">Dashboard</h1>
<div class="btn-toolbar mb-2 mb-md-0"> <div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group mr-2"> <div class="btn-group mr-2">
@ -120,7 +120,7 @@
</div> </div>
</div> </div>
<canvas class="my-4" id="myChart" width="900" height="380"></canvas> <canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>
<h2>Section title</h2> <h2>Section title</h2>
<div class="table-responsive"> <div class="table-responsive">