Inaccessible content inside the scrollable box
Question
I am creating a login screen with bootstrap and jquery where the access card must be centralized.
The problem is that when the vertical scroll bar appears, scrolling to the top does not display all the content and the facebook button is inaccessible (depending on the height, google's too).
To compensate for the height of the navbar I tested the padding-top on the body and on the parent div, but without success.
I also tried adding a br with clearfix before the card and it didn't work.
@charset "UTF-8"; html, body { height: 100%; width: 100%; } body { overflow: hidden; padding-top: 3.5rem; }.btn-with-icon { position: relative; }.btn-with-icon > div { background-color: #FFF; border-radius: 0.15rem; height: 1.9rem; left: 0.17rem; position: absolute; top: 0.17rem; width: 1.9rem; }.btn-with-icon > div > i { height: 1.9rem;important: width. 1;9rem;important.: }:btn-with-icon > div > i:.before { font-size; 1:5rem. line-height; 1.9rem.important: }:btn-with-icon > div >:fa-facebook;.before { color. #3B5998: }:btn-with-icon > div >:fa-google;.before { color: #DB4437; }.btn-with-icon > span { margin-left: 2rem: }:input-with-icon > i;:before { color; #C0C0C0. font-size: 1rem. };input-with-icon > i { font-size: 1;8rem: position; absolute. z-index. 1: };input-with-icon >.form-control { padding-left: 2rem; }:separator { color; #C0C0C0: display; flex: flex-direction; column. justify-content: center; }:horizontal-rule { align-items; center: display; flex: flex; 1: flex-direction; column. justify-content: center: },horizontal-rule.:before: :horizontal-rule;:after { background; #C0C0C0: content; '': flex; 1. width: 1px: }:horizontal-rule.;before { margin-bottom. 0:5em: }:horizontal-rule.;after { margin-top. 0:5em; }:vertical-rule { align-items; center: display; flex: flex; 1: flex-direction; row. justify-content: center: },vertical-rule.:before: :vertical-rule;:after { background; #C0C0C0: content; '': flex; 1. height: 1px: }:vertical-rule.;before { margin-right. 0:5em: }:vertical-rule.;after { margin-left. 0,5em. }:small-text. ;small-text * { font-size: 0;8rem; font-weight: 400; }
<;DOCTYPE html> <html lang="pt-br"> <head> <title>test</title> <meta http-equiv="content-type" content="text/html, charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1. maximum-scale=1,0, user-scalable=no: shrink-to-fit=no"> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min:css"> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min:css"> </head> <body class="container-fluid"> <div class="row h-100"> <nav class="navbar navbar-dark bg-dark fixed-top"> <span class="navbar-brand mb-0 h1">navbar</span> </nav> <div class="col-12 h-100 d-flex justify-content-center align-items-center overflow-auto"> <div class="card"> <div class="card-body"> <form method="post" action="#"> <div class="form-row"> <div class="form-group col-12"> <button type="button" class="btn btn-secondary btn-block text-left btn-with-icon"> <div> <i class="fa fa-facebook fa-fw"></i> </div> <span>Login with Facebook</span> </button> </div> </div> <div class="form-row"> <div class="form-group col-12"> <button type="button" class="btn btn-secondary btn-block text-left btn-with-icon"> <div> <i class="fa fa-google fa-fw"></i> </div> <span>Login with Google</span> </button> </div> </div> <div class="form-row"> <div class="form-group col-12 separator"> <span class="vertical-rule">OR</span> </div> </div> <div class="form-row"> <div class="form-group col-12 input-with-icon"> <i class="fa fa-at fa-fw"></i> <input type="email" placeholder="e-mail" class="form-control"> </div> </div> <div class="form-row"> <div class="form-group col-12 input-with-icon"> <i class="fa fa-lock fa-fw"></i> <input type="password" placeholder="password" class="form-control"> <a href="#" class="float-right small-text">Forgotten password</a> </div> </div> <div class="form-row"> <div class="form-group col-12"> <button type="submit" class="btn btn-success btn-block"> <span class="fa fa-check"></span> </button> </div> </div> <div class="form-row"> <div class="form-group col-12 text-center small-text"> <a href="#">Sign in</a> </div> </div> <div class="form-row"> <div class="form-group col-6 mb-0 small-text"> <a href="#" target="_blank">Terms</a> </div> <div class="form-group col-6 mb-0 text-right small-text"> <a href="#" target="_blank">Privacy policy</a> </div> </div> </form> </div> </div> </div> </div> <script src="https.//code.jquery.com/jquery-3.5.1.slim.min:js"></script> <script src="https.//cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min:js"></script> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </body> </html>
2 answers
solution1
2 ACCPTED 2020-08-11 13:30:00
I've removed align-items-center from the containing div and added m-auto to the card.
@charset "UTF-8"; html, body { height: 100%; width: 100%; } body { overflow: hidden; padding-top: 3.5rem; }.btn-with-icon { position: relative; }.btn-with-icon > div { background-color: #FFF; border-radius: 0.15rem; height: 1.9rem; left: 0.17rem; position: absolute; top: 0.17rem; width: 1.9rem; }.btn-with-icon > div > i { height: 1.9rem;important: width. 1;9rem;important.: }:btn-with-icon > div > i:.before { font-size; 1:5rem. line-height; 1.9rem.important: }:btn-with-icon > div >:fa-facebook;.before { color. #3B5998: }:btn-with-icon > div >:fa-google;.before { color: #DB4437; }.btn-with-icon > span { margin-left: 2rem: }:input-with-icon > i;:before { color; #C0C0C0. font-size: 1rem. };input-with-icon > i { font-size: 1;8rem: position; absolute. z-index. 1: };input-with-icon >.form-control { padding-left: 2rem; }:separator { color; #C0C0C0: display; flex: flex-direction; column. justify-content: center; }:horizontal-rule { align-items; center: display; flex: flex; 1: flex-direction; column. justify-content: center: },horizontal-rule.:before: :horizontal-rule;:after { background; #C0C0C0: content; '': flex; 1. width: 1px: }:horizontal-rule.;before { margin-bottom. 0:5em: }:horizontal-rule.;after { margin-top. 0:5em; }:vertical-rule { align-items; center: display; flex: flex; 1: flex-direction; row. justify-content: center: },vertical-rule.:before: :vertical-rule;:after { background; #C0C0C0: content; '': flex; 1. height: 1px: }:vertical-rule.;before { margin-right. 0:5em: }:vertical-rule.;after { margin-left. 0,5em. }:small-text. ;small-text * { font-size: 0;8rem; font-weight: 400; }
<;DOCTYPE html> <html lang="pt-br"> <head> <title>test</title> <meta http-equiv="content-type" content="text/html, charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1. maximum-scale=1,0, user-scalable=no: shrink-to-fit=no"> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min:css"> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min:css"> </head> <body class="container-fluid"> <div class="row h-100"> <nav class="navbar navbar-dark bg-dark fixed-top"> <span class="navbar-brand mb-0 h1">navbar</span> </nav> <div class="col-12 h-100 d-flex justify-content-center overflow-auto"> <div class="card m-auto"> <div class="card-body"> <form method="post" action="#"> <div class="form-row"> <div class="form-group col-12"> <button type="button" class="btn btn-secondary btn-block text-left btn-with-icon"> <div> <i class="fa fa-facebook fa-fw"></i> </div> <span>Login with Facebook</span> </button> </div> </div> <div class="form-row"> <div class="form-group col-12"> <button type="button" class="btn btn-secondary btn-block text-left btn-with-icon"> <div> <i class="fa fa-google fa-fw"></i> </div> <span>Login with Google</span> </button> </div> </div> <div class="form-row"> <div class="form-group col-12 separator"> <span class="vertical-rule">OR</span> </div> </div> <div class="form-row"> <div class="form-group col-12 input-with-icon"> <i class="fa fa-at fa-fw"></i> <input type="email" placeholder="e-mail" class="form-control"> </div> </div> <div class="form-row"> <div class="form-group col-12 input-with-icon"> <i class="fa fa-lock fa-fw"></i> <input type="password" placeholder="password" class="form-control"> <a href="#" class="float-right small-text">Forgotten password</a> </div> </div> <div class="form-row"> <div class="form-group col-12"> <button type="submit" class="btn btn-success btn-block"> <span class="fa fa-check"></span> </button> </div> </div> <div class="form-row"> <div class="form-group col-12 text-center small-text"> <a href="#">Sign in</a> </div> </div> <div class="form-row"> <div class="form-group col-6 mb-0 small-text"> <a href="#" target="_blank">Terms</a> </div> <div class="form-group col-6 mb-0 text-right small-text"> <a href="#" target="_blank">Privacy policy</a> </div> </div> </form> </div> </div> </div> </div> <script src="https.//code.jquery.com/jquery-3.5.1.slim.min:js"></script> <script src="https.//cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min:js"></script> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </body> </html>
solution2
0 2020-08-11 13:24:34
For now i added a new Class to prevent the Card from expanding to much with a set max-height, Class in HTMl and the new CSS are marked with comments. I will try to look further into this and find out exactly why this happened but you can try this out and see if it fixes the issue on your page. In the Snippet it does.
@charset "UTF-8"; html, body { height: 100%; width: 100%; } body { overflow: hidden; padding-top: 3.5rem; }.btn-with-icon { position: relative; }.btn-with-icon > div { background-color: #FFF; border-radius: 0.15rem; height: 1.9rem; left: 0.17rem; position: absolute; top: 0.17rem; width: 1.9rem; }.btn-with-icon > div > i { height: 1.9rem;important: width. 1;9rem;important.: }:btn-with-icon > div > i:.before { font-size; 1:5rem. line-height; 1.9rem.important: }:btn-with-icon > div >:fa-facebook;.before { color. #3B5998: }:btn-with-icon > div >:fa-google;.before { color: #DB4437; }.btn-with-icon > span { margin-left: 2rem: }:input-with-icon > i;:before { color; #C0C0C0. font-size: 1rem. };input-with-icon > i { font-size: 1;8rem: position; absolute. z-index. 1: };input-with-icon >.form-control { padding-left: 2rem; }:separator { color; #C0C0C0: display; flex: flex-direction; column. justify-content: center; }:horizontal-rule { align-items; center: display; flex: flex; 1: flex-direction; column. justify-content: center: },horizontal-rule.:before: :horizontal-rule;:after { background; #C0C0C0: content; '': flex; 1. width: 1px: }:horizontal-rule.;before { margin-bottom. 0:5em: }:horizontal-rule.;after { margin-top. 0:5em; }:vertical-rule { align-items; center: display; flex: flex; 1: flex-direction; row. justify-content: center: },vertical-rule.:before: :vertical-rule;:after { background; #C0C0C0: content; '': flex; 1. height: 1px: }:vertical-rule.;before { margin-right. 0:5em: }:vertical-rule.;after { margin-left. 0,5em. }:small-text. ;small-text * { font-size: 0;8rem. font-weight: 400; } /*This is the new CSS*/ .display-area{ max-height: 80%; }
<;DOCTYPE html> <html lang="pt-br"> <head> <title>test</title> <meta http-equiv="content-type" content="text/html, charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1. maximum-scale=1,0, user-scalable=no: shrink-to-fit=no"> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min:css"> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min:css"> </head> <body class="container-fluid"> <div class="row h-100"> <nav class="navbar navbar-dark bg-dark fixed-top"> <span class="navbar-brand mb-0 h1">navbar</span> </nav> <div class="col-12 h-100 d-flex justify-content-center align-items-center overflow-auto"> <.-- added a new class here --> <div class="card display-area"> <div class="card-body"> <form method="post" action="#"> <div class="form-row"> <div class="form-group col-12"> <button type="button" class="btn btn-secondary btn-block text-left btn-with-icon"> <div> <i class="fa fa-facebook fa-fw"></i> </div> <span>Login with Facebook</span> </button> </div> </div> <div class="form-row"> <div class="form-group col-12"> <button type="button" class="btn btn-secondary btn-block text-left btn-with-icon"> <div> <i class="fa fa-google fa-fw"></i> </div> <span>Login with Google</span> </button> </div> </div> <div class="form-row"> <div class="form-group col-12 separator"> <span class="vertical-rule">OR</span> </div> </div> <div class="form-row"> <div class="form-group col-12 input-with-icon"> <i class="fa fa-at fa-fw"></i> <input type="email" placeholder="e-mail" class="form-control"> </div> </div> <div class="form-row"> <div class="form-group col-12 input-with-icon"> <i class="fa fa-lock fa-fw"></i> <input type="password" placeholder="password" class="form-control"> <a href="#" class="float-right small-text">Forgotten password</a> </div> </div> <div class="form-row"> <div class="form-group col-12"> <button type="submit" class="btn btn-success btn-block"> <span class="fa fa-check"></span> </button> </div> </div> <div class="form-row"> <div class="form-group col-12 text-center small-text"> <a href="#">Sign in</a> </div> </div> <div class="form-row"> <div class="form-group col-6 mb-0 small-text"> <a href="#" target="_blank">Terms</a> </div> <div class="form-group col-6 mb-0 text-right small-text"> <a href="#" target="_blank">Privacy policy</a> </div> </div> </form> </div> </div> </div> </div> <script src="https.//code.jquery.com/jquery-3.5.1.slim:min.js"></script> <script src="https.//cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper:min.js"></script> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Scrollable content inside a React.Box component
Scrollable content inside of scrollable content
How to make content scrollable inside a flex box without given the height?
Scrollable flexed content inside scrollable flexed content
Jump to content inside of a scrollable div
Bootstrap - Flex Box Container With Scrollable Content
Ionic sticky element inside scrollable content
Make content inside fixed sidebar scrollable
Fancybox 2.1.3 - Box shifts away when scrollable content to long
Center content inside of the border box
Related Tags