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">
Forgotten password
</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">
Sign in
</div>
</div>
<div class="form-row">
<div class="form-group col-6 mb-0 small-text">
Terms
</div>
<div class="form-group col-6 mb-0 text-right small-text">
Privacy policy
</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>
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">
Forgotten password
</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">
Sign in
</div>
</div>
<div class="form-row">
<div class="form-group col-6 mb-0 small-text">
Terms
</div>
<div class="form-group col-6 mb-0 text-right small-text">
Privacy policy
</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>
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">
Forgotten password
</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">
Sign in
</div>
</div>
<div class="form-row">
<div class="form-group col-6 mb-0 small-text">
Terms
</div>
<div class="form-group col-6 mb-0 text-right small-text">
Privacy policy
</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>
Related
I want to do something like this
So I did the following
.page-account-box {
width: 100%;
margin-top: 70px;
}
.page-account-box .ds-userlogin .account-box {
width: 100%;
height: auto;
padding: 0;
border: 1px solid #e2efef;
position: relative;
margin: 70px auto 30px;
display: table;
background: #fff;
border-radius: 20px;
}
.page-account-box .ds-userlogin .account-box .picture_account {
display: inline;
width: 50%;
}
.page-account-box .ds-userlogin .account-box .account-box-content {
min-height: 50%;
padding: 15px 30px;
text-align: center;
border-radius: 20px;
display: inline;
}
<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Body -->
<div class="container">
<div class="row">
<div class="page-account-box">
<div class="col-lg-8 col-md-8 col-xs-12 mx-auto">
<div class="ds-userlogin">
<div class="account-box">
<div class="picture_account"><img src="https://via.placeholder.com/200.jpg" class="imgFormat" /></div>
<div class="account-box-content">
<form method="post" class="form-account form-inline ">
<div class="form-account-title">
<input type="text" style="border:solid" id="FullName">
<label for="email-phone">Fullname</label>
</div>
<div class="form-account-title">
<input type="password" style="border:solid" id="Password">
<label for="password">Password</label>
</div>
<div class="form-row-account">
<a onclick="Registeruser()" class="btn btn-primary btn-register">Register </a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
but the result would be like this
how can I make the forms be inline with the picture?
how can I make the forms be inline with the picture?
Remove your CSS and in your HTML replace account-box:
<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Body -->
<div class="account-box row">
<div class="account-box-content col">
<form method="post" class="form-account form-inline ">
<div class="form-account-title">
<input type="text" style="border:solid" id="FullName">
<label for="email-phone">Fullname</label>
</div>
<div class="form-account-title">
<input type="password" style="border:solid" id="Password">
<label for="password">Password</label>
</div>
<div class="form-row-account">
<a onclick="Registeruser()" class="btn btn-primary btn-register">Register </a>
</div>
</form>
</div>
<div class="picture_account col">
<img src="https://via.placeholder.com/200.jpg" class="imgFormat" />
</div>
</div>
The class of row to turn the container holding your image and form into a row, and the class of col on both your form and image to put them on separate columns. Also your image is now below the form in the markup so it appears on the left visually.
You can try adding the following to your account-box-content class:
float: left;
Here's a fiddle you can see it working on: https://jsfiddle.net/gx3y8ksc/
.page-account-box {
width: 100%;
margin-top: 70px;
}
.page-account-box .ds-userlogin .account-box {
width: 100%;
height: auto;
padding: 0;
border: 1px solid #e2efef;
position: relative;
margin: 70px auto 30px;
display: table;
background: #fff;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.page-account-box .ds-userlogin .account-box .picture_account {
display: inline;
border-radius: 0 20px 20px 0;
overflow: hidden;
}
.page-account-box .ds-userlogin .account-box .account-box-content {
width: 100%;
max-width: 250px;
margin-right: auto;
padding: 15px;
text-align: center;
border-radius: 20px;
display: inline;
}
.page-account-box .ds-userlogin .account-box .account-box-content form {
width: 100%;
}
.page-account-box
.ds-userlogin
.account-box
.account-box-content
form
.form-account-title {
width: 100%;
margin: 0 0 10px 0;
}
.page-account-box
.ds-userlogin
.account-box
.account-box-content
form
.form-account-title
input {
width: 100%;
}
<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Body -->
<div class="container">
<div class="row">
<div class="page-account-box">
<div class="col-lg-8 col-md-8 col-xs-12 mx-auto">
<div class="ds-userlogin">
<div class="account-box">
<div class="account-box-content">
<form method="post" class="form-account form-inline ">
<div class="form-account-title">
<input type="text" style="border:solid" id="FullName">
<label for="email-phone">Fullname</label>
</div>
<div class="form-account-title">
<input type="password" style="border:solid" id="Password">
<label for="password">Password</label>
</div>
<div class="form-row-account d-flex justify-content-center w-100">
<a onclick="Registeruser()" class="btn btn-primary btn-register">Register </a>
</div>
</form>
</div>
<div class="picture_account"><img src="https://via.placeholder.com/200.jpg" class="imgFormat" /></div>
</div>
</div>
</div>
</div>
</div>
</div>
I had this issue fixed with text-break from bootstrap, but for some reason, something is overriding it and now my text does not wrap at all. I put a code snippet that reproduces the issue. I've tried everything and I am sure I am missing something silly. I'm only typing now because stackoverflow wants me to. You can ignore the next set of random thoughts.
.comment_input{
padding: 5px;
margin: 5px;
border-radius: 8px;
border: none;
width: 100%;
}
.profile-name{
display: flex;
align-items: center;
column-gap: 5px;
}
.profile_image{
width: 30px;
height: 30px;
border-radius: 50%;
}
.post{
margin: 10px auto;
width: 80%;
border-radius: 3px;
background: darkgray;
}
.post_padding{
margin: 5px;
}
.post_comment{
display: flex;
align-items: center;
gap: 5px;
}
.post_top{
display: flex;
justify-content: space-between;
}
.hover:hover {
cursor: pointer;
}
.like-and-comment{
display: flex;
justify-content: space-around;
border-bottom: 1px solid white;
border-top: 1px solid white;
align-items: center;
padding: 5px;
}
.view-more{
display: flex;
justify-content: space-between;
font-size: 14px;
}
.lk{
display: flex;
font-size: 14px;
gap: 5px;
}
.right{
border-left: 1px solid white;
border-bottom: 1px solid white;
border-bottom-left-radius: 30px;
width: 5%;
top: 5px;
position: absolute;
height: 120%;
left: -20px;
}
.reply {
display: flex;
gap: 10px;
}
.reply-body{
word-wrap : break-word;
overflow-wrap: break-word;
}
.user{
/* TODO fix text overflow for when no spaces added*/
background: grey;
padding: 8px;
border-radius: 20px;
/*TODO max variable based on content*/
width: max-content;
word-wrap : break-word;
overflow-wrap: break-word;
}
.like-comment, .reply_comment{
cursor: pointer;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
<link href="/static/css/style.css" rel="stylesheet">
<script src="https://js.stripe.com/v3/"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<div class="post">
<script id="counter40">1</script>
<div class="post_padding">
<div class="post_top">
<div class="profile-name">
<img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
<div>
<div id="post_top"> jon </div>
<div id="post_top2" class="location-time"><span class="time">in 3 hours</span><i class="fas fa-globe-americas"></i></div>
</div>
</div>
<div id="three-dots" style="display: block" class="hover">
<div class="dropdown">
<div href="#" data-bs-toggle="dropdown"><i class="bi bi-three-dots"></i></div>
<div class="dropdown-menu">
<div id="post_edit_modal" style="display: block" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_edit_modal(40)">
<i class="bi bi-pencil-square"> Edit</i>
</div>
<div id="post_ban_modal" style="display: block" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_ban_modal(1)">
<i class="bi bi-eye-slash"> Ban</i>
</div>
<div id="post_history_modal" style="display: none;" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_history_modal(1)">
<i class="bi bi-clock-history"> History</i>
</div>
</div>
</div>
</div>
</div>
<!--this is really the post-->
<div class="media ">
<div class="text-break" id="post_body">hi</div>
<img id="media_graphic">
</div>
<!--Finish this, need media link, media article-->
<div class="like-and-comment">
<div class="d-flex align-items-center">
<i id="upvote40" class="fas fa-arrow-up hover" style="color: gray;" onclick="vote(40,1)"></i>
<span id="upvote_count_badge40" class="badge bg-secondary">0</span>
<i id="downvote40" class="fas fa-arrow-down hover" style="color: gray;" onclick="vote(40,0)"></i>
</div>
<div id="post_award_modal" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_award_modal(40)">
<i class="fas fa-award hover"></i>
</div>
<div class="dropdown hover">
<div class="dropdown-toggle" data-bs-toggle="dropdown"><i class="fas fa-share"></i></div>
<ul class="dropdown-menu">
<p id="post_crosspost_modal" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_crosspost_modal(40)">
<i class="bi bi-signpost-2"> Cross Post</i>
</p>
<p id="copytoclipboard" class="dropdown-item" onclick="copyToClipboard('http://127.0.0.1:5000/post/40')">
<i class="bi bi-clipboard"> Copy Link</i>
</p>
<p id="save_post" class="dropdown-item" onclick="save_post(40)">
<i id="save_post_icon40" class="bi bi-save"> Save</i>
</p>
</ul>
</div>
</div>
<div class="view-more">
<div class="hover" id="load_replies40" onclick="loadReplies(40,0)"></div>
<div class="hover" id="comment_collapse"> 1 comments</div>
</div>
<div class="comment">
<div id="reply_loader40"><!--Append Replies Here-->
<div class="lk">
<script id="counter46">0</script>
<img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
<div style="width: 100%;">
<div class="user">
<div class="reply_author">jon in 6 hours </div>
<div class="reply-body">word-wrap : break-word; overflow-wrap: break-word;word-wrap : break-word; overflow-wrap: break-word;word-wrap : break-word; overflow-wrap: break-word;word-wrap : break-word; overflow-wrap: break-word;</div>
</div>
<div class="reply">
<div class="d-flex align-items-center">
<i id="upvote46" class="fas fa-arrow-up hover" style="color: gray" onclick="vote(46,1)"></i>
<span id="upvote_count_badge46" class="badge bg-secondary">0</span>
<i id="downvote46" class="fas fa-arrow-down hover" style="color: gray" onclick="vote(46,0)"></i>
</div>
<div class="reply_comment" id="reply46">Reply</div>
<div id="post_award_modal" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_award_modal(46)">
<i class="fas fa-award hover"></i>
</div>
</div>
<form id="submit_reply46" style="display: none;" autocomplete="off">
<img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
<input class="comment_input" id="comment_input46" maxlength="1024" name="body" placeholder="Write a comment3" required="" type="text" value="">
<div id="comment_input_error46" class="invalid-feedback"></div>
</form>
<div id="reply_loader46"><!--Nested Replies go here--></div>
</div>
</div>
</div>
<form id="submit_reply" autocomplete="off">
<div class="post_comment">
<img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
<input class="comment_input" id="comment_input40" maxlength="1024" name="body" placeholder="Write a comment" required="" type="text" value="">
<div id="comment_input_error40" class="invalid-feedback"></div>
</div>
</form>
</div>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js" integrity="sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE+sChH7ceMTDP0g2kn6Vxwgg7wkPP7AAtX+lmPqPdxB47A0Nz0cMQ==" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>
You used max-content for your width in your user container.
The max-content sizing keyword represents the intrinsic maximum width or height of the content. For text content this means that the content will not wrap at all even if it causes overflows. -MDN
You can change that to 100%. You can learn more on max-content here.
.comment_input {
padding: 5px;
margin: 5px;
border-radius: 8px;
border: none;
width: 100%;
}
.profile-name {
display: flex;
align-items: center;
column-gap: 5px;
}
.profile_image {
width: 30px;
height: 30px;
border-radius: 50%;
}
.post {
margin: 10px auto;
width: 80%;
border-radius: 3px;
background: darkgray;
}
.post_padding {
margin: 5px;
}
.post_comment {
display: flex;
align-items: center;
gap: 5px;
}
.post_top {
display: flex;
justify-content: space-between;
}
.hover:hover {
cursor: pointer;
}
.like-and-comment {
display: flex;
justify-content: space-around;
border-bottom: 1px solid white;
border-top: 1px solid white;
align-items: center;
padding: 5px;
}
.view-more {
display: flex;
justify-content: space-between;
font-size: 14px;
}
.lk {
display: flex;
font-size: 14px;
gap: 5px;
}
.right {
border-left: 1px solid white;
border-bottom: 1px solid white;
border-bottom-left-radius: 30px;
width: 5%;
top: 5px;
position: absolute;
height: 120%;
left: -20px;
}
.reply {
display: flex;
gap: 10px;
}
.reply-body {
word-wrap: break-word;
overflow-wrap: break-word;
}
.user {
/* TODO fix text overflow for when no spaces added*/
background: grey;
padding: 8px;
border-radius: 20px;
/*TODO max variable based on content*/
width: 100%;
word-wrap: break-word;
overflow-wrap: break-word;
}
.like-comment,
.reply_comment {
cursor: pointer;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
<link href="/static/css/style.css" rel="stylesheet">
<script src="https://js.stripe.com/v3/"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<div class="post">
<script id="counter40">
1
</script>
<div class="post_padding">
<div class="post_top">
<div class="profile-name">
<img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
<div>
<div id="post_top"> jon </div>
<div id="post_top2" class="location-time"><span class="time">in 3 hours</span><i class="fas fa-globe-americas"></i></div>
</div>
</div>
<div id="three-dots" style="display: block" class="hover">
<div class="dropdown">
<div href="#" data-bs-toggle="dropdown"><i class="bi bi-three-dots"></i></div>
<div class="dropdown-menu">
<div id="post_edit_modal" style="display: block" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_edit_modal(40)">
<i class="bi bi-pencil-square"> Edit</i>
</div>
<div id="post_ban_modal" style="display: block" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_ban_modal(1)">
<i class="bi bi-eye-slash"> Ban</i>
</div>
<div id="post_history_modal" style="display: none;" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_history_modal(1)">
<i class="bi bi-clock-history"> History</i>
</div>
</div>
</div>
</div>
</div>
<!--this is really the post-->
<div class="media ">
<div class="text-break" id="post_body">hi</div>
<img id="media_graphic">
</div>
<!--Finish this, need media link, media article-->
<div class="like-and-comment">
<div class="d-flex align-items-center">
<i id="upvote40" class="fas fa-arrow-up hover" style="color: gray;" onclick="vote(40,1)"></i>
<span id="upvote_count_badge40" class="badge bg-secondary">0</span>
<i id="downvote40" class="fas fa-arrow-down hover" style="color: gray;" onclick="vote(40,0)"></i>
</div>
<div id="post_award_modal" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_award_modal(40)">
<i class="fas fa-award hover"></i>
</div>
<div class="dropdown hover">
<div class="dropdown-toggle" data-bs-toggle="dropdown"><i class="fas fa-share"></i></div>
<ul class="dropdown-menu">
<p id="post_crosspost_modal" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_crosspost_modal(40)">
<i class="bi bi-signpost-2"> Cross Post</i>
</p>
<p id="copytoclipboard" class="dropdown-item" onclick="copyToClipboard('http://127.0.0.1:5000/post/40')">
<i class="bi bi-clipboard"> Copy Link</i>
</p>
<p id="save_post" class="dropdown-item" onclick="save_post(40)">
<i id="save_post_icon40" class="bi bi-save"> Save</i>
</p>
</ul>
</div>
</div>
<div class="view-more">
<div class="hover" id="load_replies40" onclick="loadReplies(40,0)"></div>
<div class="hover" id="comment_collapse"> 1 comments</div>
</div>
<div class="comment">
<div id="reply_loader40">
<!--Append Replies Here-->
<div class="lk">
<script id="counter46">
0
</script>
<img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
<div style="width: 100%;">
<div class="user">
<div class="reply_author">jon in 6 hours </div>
<div class="reply-body">word-wrap : break-word; overflow-wrap: break-word;word-wrap : break-word; overflow-wrap: break-word;word-wrap : break-word; overflow-wrap: break-word;word-wrap : break-word; overflow-wrap: break-word;</div>
</div>
<div class="reply">
<div class="d-flex align-items-center">
<i id="upvote46" class="fas fa-arrow-up hover" style="color: gray" onclick="vote(46,1)"></i>
<span id="upvote_count_badge46" class="badge bg-secondary">0</span>
<i id="downvote46" class="fas fa-arrow-down hover" style="color: gray" onclick="vote(46,0)"></i>
</div>
<div class="reply_comment" id="reply46">Reply</div>
<div id="post_award_modal" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_award_modal(46)">
<i class="fas fa-award hover"></i>
</div>
</div>
<form id="submit_reply46" style="display: none;" autocomplete="off">
<img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
<input class="comment_input" id="comment_input46" maxlength="1024" name="body" placeholder="Write a comment3" required="" type="text" value="">
<div id="comment_input_error46" class="invalid-feedback"></div>
</form>
<div id="reply_loader46">
<!--Nested Replies go here-->
</div>
</div>
</div>
</div>
<form id="submit_reply" autocomplete="off">
<div class="post_comment">
<img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
<input class="comment_input" id="comment_input40" maxlength="1024" name="body" placeholder="Write a comment" required="" type="text" value="">
<div id="comment_input_error40" class="invalid-feedback"></div>
</div>
</form>
</div>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js" integrity="sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE+sChH7ceMTDP0g2kn6Vxwgg7wkPP7AAtX+lmPqPdxB47A0Nz0cMQ==" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>
I'm trying to make my main container slightly overlap on top of my jumbotron, I have tried messing with "my,mb,py,pb" but it doesn't cause an overlap
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1>Jumbotron H text</h1>
<p>Text</p>
</div>
</div>
<main role="main" class="container">
<div class="d-flex align-items-center p-3 my-3 text-white-50 bg-purple rounded box-shadow">
<div class="lh-100">
<h6 class="mb-0 text-white lh-100">
<?php
if(isset($_SESSION) && isset($_SESSION['login'])){ ?>
Welcome <?php echo $username; ?>
</h6>
<small>Since <?php echo $created; ?></small>
<?php }else{ ?>
Please Sign in or Register
<?php } ?>
</div>
</div>
I want the jumbotron to be the full horizontal width and the content to be about halfway over the jumbotron on top, I just tried the position absolute on the jumbotron like someone suggested however it just caused the jumbotron to be squished
If you want that <main role="main" class="top-5 container"> overlaps <div class="jumbotron jumbotron-fluid"> slightly you could add a negative margin-top to main.
main.negative-margin {
margin-top: -3rem;
}
/* the style form <!-- Custom styles for this template --> */
html,
body {
overflow-x: hidden; /* Prevent scroll on narrow devices */
}
body {
padding-top: 56px;
}
#media (max-width: 767.98px) {
.offcanvas-collapse {
position: fixed;
top: 56px; /* Height of navbar */
bottom: 0;
width: 100%;
padding-right: 1rem;
padding-left: 1rem;
overflow-y: auto;
background-color: var(--gray-dark);
transition: -webkit-transform .3s ease-in-out;
transition: transform .3s ease-in-out;
transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.offcanvas-collapse.open {
-webkit-transform: translateX(-1rem);
transform: translateX(-1rem); /* Account for horizontal padding on navbar */
}
}
.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}
.nav-scroller .nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
color: rgba(255, 255, 255, .75);
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.nav-underline .nav-link {
padding-top: .75rem;
padding-bottom: .75rem;
font-size: .875rem;
color: var(--secondary);
}
.nav-underline .nav-link:hover {
color: var(--blue);
}
.nav-underline .active {
font-weight: 500;
color: var(--gray-dark);
}
.text-white-50 { color: rgba(255, 255, 255, .5); }
.bg-purple { background-color: var(--purple); }
.border-bottom { border-bottom: 1px solid #e5e5e5; }
.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
.lh-100 { line-height: 1; }
.lh-125 { line-height: 1.25; }
.lh-150 { line-height: 1.5; }
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1>Jumbotron H text</h1>
<p>Text</p>
</div>
</div>
<main role="main" class="top-5 container negative-margin">
<div class="d-flex align-items-center p-3 my-3 text-white-50 bg-purple rounded box-shadow">
<div class="lh-100">
<h6 class="mb-0 text-white lh-100">
Welcome
</h6>
<small>Since </small> Please Sign in or Register
</div>
</div>
<div class="content">
<div class="row">
<div class="col-12">
<div class="card card-chart">
<div class="card-header ">
<div class="row">
<div class="col-sm-6 text-left">
<h2 class="card-title">Servers</h2>
</div>
<div class="col-sm-6">
<div class="btn-group btn-group-toggle float-right" data-toggle="buttons">
<label class="btn btn-sm btn-primary btn-simple active" id="0">
<input type="radio" name="options" checked>
<span class="d-none d-sm-block d-md-block d-lg-block d-xl-block">Votes</span>
<span class="d-block d-sm-none">
<i class="tim-icons icon-single-02"></i>
</span>
</label>
<label class="btn btn-sm btn-primary btn-simple" id="1">
<input type="radio" class="d-none d-sm-none" name="options">
<span class="d-none d-sm-block d-md-block d-lg-block d-xl-block">PVP</span>
<span class="d-block d-sm-none">
<i class="tim-icons icon-gift-2"></i>
</span>
</label>
<label class="btn btn-sm btn-primary btn-simple" id="2">
<input type="radio" class="d-none" name="options">
<span class="d-none d-sm-block d-md-block d-lg-block d-xl-block">PVE</span>
<span class="d-block d-sm-none">
<i class="tim-icons icon-tap-02"></i>
</span>
</label>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="container">
<div class="container">
<div id="servers">
</div>
</div>
</div>
</div>
</div>
I am using Scss for styling the page and need to set scroll for specific parts of a HTML page.
when a user doing a scroll I need to keep the Categories(left) & Cart (Right) area to be strick in their position. But the center part needs to be scroll till the filtered items are reaching the top (bottom of the breadcrumb). If the user scroll further the filtered items will scroll underneath the filter and search bar section.
Can Anyone help me to fix it.
HTML :
<div class="container-fluid px-5">
<div class="row pt-4 pr-0">
<div class="col-sm-12 px-4 pt-2">
<app-gropcard-breadcrumb></app-gropcard-breadcrumb>
</div>
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3">
<mat-card class="col-sm-12 p-0 mat-elevation-z10" style="background-color: #0084FF;color: white;">
<mat-card-header class="d-flex justify-content-center p-2">
<mat-card-title class="mb-0">Categories</mat-card-title>
</mat-card-header>
<mat-card-content>
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="tree mt-3 pl-3 ">
<!-- This is the tree node template for leaf nodes -->
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
<li class="mat-tree-node">
<!-- use a disabled button to provide padding for tree leaf -->
<button class="TreeButton" mat-icon-button disabled></button>
<span (click)="Category(node)">{{node.name}}</span>
</li>
</mat-tree-node>
<!-- This is the tree node template for expandable nodes -->
<mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
<li>
<div class="mat-tree-node" [attr.aria-label]="'toggle ' + node.name">
<button class="TreeButton" mat-icon-button matTreeNodeToggle
[attr.aria-label]="'toggle ' + node.name">
<mat-icon class="mat-icon-rtl-mirror">
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
<span matTreeNodeToggle (click)="Category(node)">{{node.name}}</span>
</div>
<ul class="pl-2" [class.tree-invisible]="!treeControl.isExpanded(node)">
<ng-container matTreeNodeOutlet></ng-container>
</ul>
</li>
</mat-nested-tree-node>
</mat-tree>
</mat-card-content>
</mat-card>
</div>
<div class="col-sm-6 containerbackground">
<div class="col-sm-12 p-0 d-flex justify-content-center">
<img class="w-100 banner"
[src]="mListedPartyBanner">
</div>
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3">
<div class="row">
<h5 class="mt-4 mb-2">Filtered Items</h5>
</div>
</div>
<div class="col-sm-5 search pt-4" fxShow="true" fxHide.gt-sm="false">
<form class="search" >
<mat-form-field class="w-100" appearance="outline">
<input type="text" #myInput matInput placeholder="Search" maxlength="50" (input)="Search(myInput.value)" autocomplete='null' [formControl]="myControl">
<button matTooltip="Search" matSuffix mat-icon-button>
<mat-icon>
search
</mat-icon>
</button>
</mat-form-field>
</form>
</div>
<div class="col-sm-4 d-flex justify-content-end">
<div class="View mt-4 mb-2 mr-4">
<div class="row">
<button matTooltip="Filter"[matMenuTriggerFor]="menu" mat-icon-button>
<mat-icon>filter_list</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button (click)="sortBy(data?.id)" mat-menu-item *ngFor="let data of sortList" [value]="data?.id">
<span>{{data?.value}}</span>
</button>
</mat-menu>
<button [ngClass]="{'ActiveButton': displayMode === 1}" (click)="onDisplayModeChange(1)"
matTooltip="List view" mat-icon-button>
<mat-icon>view_headline</mat-icon>
</button>
<button [ngClass]="{'ActiveButton': displayMode === 2}" (click)="onDisplayModeChange(2)"
matTooltip="Grid view" mat-icon-button>
<mat-icon>view_module</mat-icon>
</button>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="col-sm-12" *ngIf='displayMode==1'>
<div class="row d-flex justify-content-center">
<div class="col-sm-6 p-2 " *ngFor="let prod of ListedPartyItems; let ind = index">
<mat-card class="py-1" matRipple>
<div class="corner-ribbon top-right sticky blue shadow" *ngIf='prod?.PROMO_PRICE'>
{{((prod?.PRODUCT_PRICE-prod?.PROMO_PRICE)/prod?.PRODUCT_PRICE)*100 | number: '1.0-0'}}% Off</div>
<div class="row">
<div class="ImageDiv">
<img class="w-100 Img p-1" [src]="prod['IMAGE_PATH_1']">
</div>
<div class="row NameDiv d-flex ProductData justify-content-center">
<div class="Name mt-2">
<span>{{prod?.ITEM_DESCRIPTION}}</span>
</div>
<div class="Price mt-2">
<span class="ProductPrice">{{prod?.PROMO_PRICE ? (prod?.PROMO_PRICE | number:'.1-2') :
(prod?.PRODUCT_PRICE | number:'.1-2')}}<span class="pl-1"
[innerHtml]="mCurrencyCode"></span></span>
<span class="PromotionPrice mt-1 pl-1" *ngIf='prod?.PROMO_PRICE'>{{prod?.PRODUCT_PRICE |
number:'.1-2'}}<span class="pl-1" [innerHtml]="mCurrencyCode"></span></span>
</div>
<div class="col-sm-12">
<div class="row">
<div class="d-flex justify-content-center mt-2 w-100">
<button type="button" (click)="Decrement( ind)" class="btnStyles">–</button>
<input type="text" readonly class="quantityBox" [(ngModel)]="prod.qty">
<button type="button" (click)="Increment(ind)" class="btnStyles">+</button>
</div>
<div class="col-sm-12 mt-2 d-flex justify-content-center">
<div class="row">
<div class="col-sm-6">
<button (click)="AddToCart(prod?.PRODUCT_CODE,prod?.UOM,prod?.qty, ind)"
class="col-sm-12 ProductButton " mat-raised-button>
<mat-icon class="iconSize Cursor">shopping_cart</mat-icon>
</button>
</div>
<div class="col-sm-6">
<button (click)="SelectedProduct(prod?.PRODUCT_CODE)" class="col-sm-12 ProductButton"
mat-raised-button>More</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</mat-card>
</div>
</div>
</div>
<div class="col-sm-12" *ngIf='displayMode==2'>
<div class="row">
<div *ngIf="IsItemFound" style="display:block;margin:auto;">
<img src="../../../../assets/oops.png" alt="">
</div>
<div class="col-sm-4 p-2" *ngFor="let prod of ListedPartyItems; let ind = index">
<mat-card matRipple class="p-0 ">
<div class="corner-ribbon top-right sticky blue shadow" *ngIf='prod?.PROMO_PRICE'>
{{((prod?.PRODUCT_PRICE-prod?.PROMO_PRICE)/prod?.PRODUCT_PRICE)*100 | number: '1.0-0'}}% Off</div>
<img class="d-block w-100 Img p-1" [src]="prod['IMAGE_PATH_1']">
<div class="w-100 d-flex ProductData justify-content-center">{{prod?.ITEM_DESCRIPTION}}</div>
<div class="col-sm-12 mt-2 d-flex justify-content-center">
<span class="ProductPrice">{{prod?.PROMO_PRICE ? (prod?.PROMO_PRICE | number:'.1-2') :
(prod?.PRODUCT_PRICE | number:'.1-2')}}<span class="pl-1"
[innerHtml]="mCurrencyCode"></span></span>
<span class="PromotionPrice mt-1 pl-1" *ngIf='prod?.PROMO_PRICE'>{{prod?.PRODUCT_PRICE |
number:'.1-2'}}<span class="pl-1" [innerHtml]="mCurrencyCode"></span></span>
</div>
<div class="d-flex justify-content-center mt-2">
<button type="button" (click)="Decrement( ind)" class="btnStyles">–</button>
<input type="text" readonly class="quantityBox" [(ngModel)]="prod.qty">
<button type="button" (click)="Increment(ind)" class="btnStyles">+</button>
</div>
<div class="w-100 mt-2">
<div class="row">
<div class="w-50 ">
<button (click)="AddToCart(prod?.PRODUCT_CODE,prod?.UOM,prod?.qty, ind)"
class="col-sm-12 ProductButton p-0" mat-raised-button>Add To Cart</button>
</div>
<div class="w-50">
<button (click)="SelectedProduct(prod?.PRODUCT_CODE)" class="col-sm-12 ProductButton p-0"
mat-raised-button>More</button>
</div>
</div>
</div>
</mat-card>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<mat-card class="col-sm-12 p-0 mat-elevation-z10 YourCartheight">
<mat-card-header class="d-flex justify-content-center p-2" style="background-color: #0084FF;color: white;">
<mat-card-title class="mb-0">Your Cart</mat-card-title>
</mat-card-header>
<mat-card-content>
<div class="col-sm-12" *ngIf="!IsMyCartHasItems">
<div class="row">
<div class="col-sm-12 d-flex justify-content-center mt-4">
<img class="d-block w-100 emptycart p-1" src="../../../../../assets/cart.png" alt="No Data">
</div>
<div class="col-sm-12 pb-4 d-flex justify-content-center">
<span>There are no items in your cart.</span>
</div>
</div>
</div>
<div class="col-sm-12 p-2" *ngIf="IsMyCartHasItems">
<div class="row" *ngFor="let prod of MyCart; let i = index">
<div class="col-sm-4 p-2">
<div class="col-sm-12 p-2">
<span style="font-size: 12px;">{{prod.ITEM_DESC}}</span>
</div>
</div>
<div class="col-sm-4 p-0 d-flex justify-content-center">
<div class="col-sm-12 p-2 mt-2">
<button type="button" (click)="Decrementsub(prod?.ITEM_CODE,prod?.ITEM_PACK_SIZE,prod?.TOTAL_QTY,i)" class="cartBtn">–</button>
<input type="text" readonly class="quantityBox1" [value]="prod.TOTAL_QTY">
<button type="button" (click)="Incrementsub(prod?.ITEM_CODE,prod?.ITEM_PACK_SIZE,prod?.TOTAL_QTY,i)" class="cartBtn">+</button>
</div>
</div>
<div class="col-sm-2 p-0 d-flex justify-content-center">
<div class="col-sm-12 p-2 mt-2">
<span>{{prod?.TOTAL_AMT | number}} <span class="pl-1 Price"
[innerHtml]="mCurrencyCode"></span></span>
</div>
</div>
<div class="col-sm-2 p-0 d-flex justify-content-center">
<div class="col-sm-12 p-1">
<button matTooltip="Remove"
(click)="RemoveCartProduct(prod?.ITEM_CODE,prod?.ITEM_PACK_SIZE)" mat-icon-button
color="warn">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
</div>
<div class="col-sm-12 p-0 d-flex justify-content-center">
<button (click)='GoToCheckout()' class="col-sm-12 p-0 checkout" color="warn" mat-raised-button>CHECK
OUT <strong *ngIf='mCartCount > 0' class="pl-4" style="font-size: 20px;">{{TotalAmount | number}}<span class="pl-1 Price"
[innerHtml]="mCurrencyCode"></span></strong></button>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
</div>
</div>
</div>
</div>
SCSS:
.Img{
height: 200px;
#include desktop{
height: 250px;
}
}
.Caption{
font-size: 1em;
font-weight: bold;
#include desktop{
font-size: 1.5em;
}
}
.ProductButton{
background-color: color(messengerBlue);
color: color(basic);
font-weight: bold;
font-size: 1em;
border-radius: 0;
margin-left: 10px;
}
.ProductData{
font-weight: lighter;
font-size: 12px !important;
white-space: normal;
word-wrap: break-word;
color: color(gray);
}
.containerbackground{
background-color:#f1f3f6;
}
.ActiveButton{
background-color: color(primary);
color: color(basic);
}
// Change text colour when inputting text
.search {
//-----Input Field Size----------
::ng-deep .mat-form-field-flex > .mat-form-field-infix {
padding: 0.4em 0px !important;
// padding-bottom: 8px !important;
}
::ng-deep .mat-form-field-label-wrapper {
top: -1.5em;
}
::ng-deep
.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float
.mat-form-field-label {
transform: translateY(-1.1em) scale(0.75);
width: 133.33333%;
}
::ng-deep .mat-form-field {
background-color: white;
::ng-deep .mat-form-field-wrapper {
padding-bottom: 0;
}
::ng-deep .mat-form-field-wrapper {
margin: 0 0;
}
::ng-deep .mat-form-field-outline-start,
.mat-form-field-outline-end {
border-radius: 0 !important;
}
// ::ng-deep .mat-form-field-underline {
// height: 0px;
// }
// ::ng-deep .mat-form-field-infix {
// padding-top: 0px;
// position: relative;
// }
.mat-form-field-underline {
background-color: transparent;
}
.mat-form-field-ripple {
background-color: transparent;
}
}
}
.tree-invisible {
display: none;
}
.tree ul,
.tree li {
margin-top: 0;
margin-bottom: 0;
list-style-type: none;
cursor: pointer;
}
.mat-tree-node {
min-height: 0px;
max-height: 30px;
.TreeButton{
outline: none;
}
}
.Title{
font-size: 1.5em;
font-weight: bold;
}
.banner{
height: 250px;
}
.ImageDiv{
width: 40%;
}
.Img{
height: 130px;
#include desktop{
height: 150px;
}
}
.NameDiv{
width: 60%;
.Name{
width: 100%;
text-align: center;
font-weight: lighter;
font-size: 12px !important;
white-space: normal;
word-wrap: break-word;
color: color(gray);
}
.Price{
width: 100%;
font-weight: bold;
font-size: 1.5em;
color: color(primary);
text-align: center;
}
}
.imgButton{
background-color: color(messengerBlue);
color: color(basic);
font-weight: bold;
font-size: 1em;
border-radius: 0;
}
.btnStyles{
width: 28px;
height: 28px;
background: linear-gradient(#fff, #f9f9f9);
display: inline-block;
border: 1px solid #c2c2c2;
cursor: pointer;
font-size: 16px;
border-radius: 50%;
padding-top: 1px;
line-height: 1;
}
.cartBtn{
width: 20px;
height: 20px;
background: linear-gradient(#fff, #f9f9f9);
display: inline-block;
border: 1px solid #c2c2c2;
cursor: pointer;
font-size: 12px;
border-radius: 50%;
padding-top: 1px;
line-height: 1;
}
.quantityBox{
display: inline-block;
padding: 3px 6px;
width: calc(100% - 60px);
height: 100%;
width: 46px;
height: 28px;
border-radius: 2px;
background-color: #fff;
border: 1px solid #c2c2c2;
margin: 0 9px;
font-weight: bold;
text-align: center
}
.quantityBox1{
display: inline-block;
padding: 3px 6px;
width: calc(100% - 60px);
height: 100%;
width: 25px;
height: 20px;
border-radius: 2px;
background-color: #fff;
border: 1px solid #c2c2c2;
margin: 0 9px;
font-weight: bold;
text-align: center
}
.iconSize {
font-size: 30px;
}
.cursor {
cursor: pointer;
}
.ItemPromotionPrice {
display: inline-block;
text-decoration: line-through;
opacity: .5;
font-size: 20px !important;
color: color(gray);
}
.ProductPrice{
font-weight: bold;
font-size: 1em;
color: color(primary);
}
::ng-deep .mat-form-field {
font-size: 12px; // example
}
.emptycart{
height: 100px !important;
width: 100px !important;
}
.YourCartheight{
min-height: 150px!important;
max-height:500px !important;
}
I have a suggestion to use html:not
It should be looked like this:
html:not([data-scroll='0']) /*class name for category section*/ {
position: fixed;
top: 0;
}
In order to make the middle container's content scroll, it must first overflow. That can be achieved by applying either a fixed or max height. Then you need to specify the overflow behaviour:
.containerbackground {
background-color:#f1f3f6;
max-height: 100vh;
overflow-y: auto;
}
I am trying to build a static web page as a part of a bigger project (the project is in Laravel).
Everything seems to work fine except for the footer that is behaving unusually.
Despite being at the bottom of the HTML tree, it tends to occupy much more space, overlapping many of the elements above it.
I have already tried changing the div (footer) to the 'footer' element and then to a 'section' element but to no avail.
My HTML file :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Medical Insurance</title>
<link rel="stylesheet" type="text/css" href="{{ asset('web/css/medicalInsuranceStyles.css') }}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container-fluid">
<!-- header -->
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-offset-1 col-md-3">
<a href="https://www.letsmd.com/">
<img id='main-logo' src="<?php echo e(asset('/web/images/logo-without-Tagline.svg')); ?>">
</a>
</div>
</div>
<!-- banner -->
<div id='banner-container'>
<div id="transparent-div"></div>
<div id='banner-text-div'>
<h1>Smart Health Insurance Cover</h1>
<h2>Starting from ₹5/day</h2>
</div>
</div>
<!-- content part one -->
<div>
<div class='col-md-12 col-sm-12 col-xs-12' id="content-div-one">
<h2>Same premium, <span id='content-div-one-span'>2x</span> the value</h2>
<button class="btn btn-default">Apply Now</button>
</div>
</div>
<!-- content part two -->
<div>
<div class='col-md-offset-1 col-md-10 col-sm-offset-1 col-sm-10 col-xs-12' id="content-div-two">
<h2><span>CARE COVER</span> PLAN</h2>
<p>Ensures affordable, comprehensive cover</p>
<ul>
<li>Coverage for family</li>
<li>Covers everything under a standard health policy</li>
<li>Sum Insured options upto 5lacs with deductibles</li>
<li>Sum Insured on family floater basis</li>
<li>Hospitalisation expenses + pre - post hospitalisation covered</li>
<li>All room/ICU/nursing/medicine/surgery etc charges covered</li>
<li>Day care procedures covered</li>
<li>Coverage available at all leading hospitals across the country</li>
<li>Deductible 50,000/100,000 options available. Deductible finances at 0% EMI</li>
<li>Tax benifits under section 80D</li>
</ul>
</div>
</div>
<!-- form -->
<div>
<div class='col-md-12 col-sm-12 col-xs-12' id="form-div">
<h2><span>GET</span> QUOTE</h2>
<form action="" method="POST">
<div id="form">
<section id="form-section-one">
<p>Enter Your Name</p>
<input type="text" name="name">
<p>Your Mobile No.</p>
<input type="number" name="number">
<p>Email-Id</p>
<input type="email" name="email">
</section>
<section id="form-section-two">
<p>Gender</p>
<input type="radio" name="gender" value='female'><span>Female</span>
<input type="radio" name="gender" value='male'><span>Male</span>
<input type="radio" name="gender" value='others'><span>Others</span>
<p>Source of Income</p>
<select name="income-source" id="">
<option value="" selected disabled>-- Select One --</option>
<option value="">alpha</option>
<option value="">beta</option>
<option value="">gamma</option>
</select>
<p>Annual Income/Salary</p>
<input type="number" name="salary">
</section>
<section id="form-section-three">
<p>Our team will get in touch with you for further processing</p>
<p>Please select the number of family members you want to get insured with you</p>
<select name="family-memers" id="">
<option value="" selected disabled>-- Select One --</option>
<option value="">alpha</option>
<option value="">beta</option>
<option value="">gamma</option>
</select>
<p id='greeting-text'>Thank You</p>
</section>
</div>
<button class="btn btn-default" id='form-btn'>Next</button>
</form>
</div>
</div>
<!-- video -->
<!-- <div>
<div class='col-md-offset-1 col-md-10 col-sm-offset-1 col-sm-10 col-xs-12' id="video-div">
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
</div> -->
<!-- media mentions -->
<div class='col-md-offset-1 col-md-10 col-sm-offset-1 col-sm-10 col-xs-12' id="media-mentions-div">
<h2><span>MEDIA</span> MENTIONS</h2>
<div class="row">
<div class="col-md-offset-2 col-md-2 col-sm-offset-2 col-sm-2 col-xs-3">
<img class="img-responsive" src="<?php echo e(asset('/web/loancard/Media/2017.10.06_09-23-18bhaskar.png')); ?>">
</div>
<div class="col-md-2 col-sm-2 col-xs-3">
<img class="img-responsive" class="img-responsive"src="<?php echo e(asset('/web/loancard/Media/vccircle.png')); ?>">
</div>
<div class="col-md-2 col-sm-2 col-xs-3">
<img class="img-responsive" src="<?php echo e(asset('/web/loancard/Media/TheHindu-Logo.png')); ?>">
</div>
<div class="col-md-2 col-sm-2 col-xs-3">
<img class="img-responsive" src="<?php echo e(asset('/web/loancard/Media/Zee-Business-CS6-1110x550.png')); ?>">
</div>
</div>
<div class="row">
<div class="col-md-offset-2 col-md-2 col-sm-offset-2 col-sm-2 col-xs-3">
<img class="img-responsive" src="<?php echo e(asset('/web/loancard/Media/dribbble_001_2x.png')); ?>">
</div>
<div class="col-md-2 col-sm-2 col-xs-3">
<img class="img-responsive" src="<?php echo e(asset('/web/loancard/Media/the-economic-times-logo-png-1.png')); ?>" >
</div>
<div class="col-md-2 col-sm-2 col-xs-3">
<img class="img-responsive" src="<?php echo e(asset('/web/loancard/Media/yahoo-logo-png-transparent-background-768x256.png')); ?>">
</div>
<div class="col-md-2 col-sm-2 col-xs-3">
<img class="img-responsive" src="<?php echo e(asset('/web/loancard/Media/yourstory.png')); ?>">
</div>
</div>
</div>
<!-- footer -->
<div class="row" id='footer'>
<div class="col-md-5 col-sm-5 col-xs-5 pull-left">
<p>Copyright © {{ date('Y') }} LetsMD. All rights reserved </p>
</div>
<div class="col-md-offset-1 col-md-6 col-sm-offset-1 col-sm-6 col-xs-6 pull-right">
<p>
Get social with us
<a href="https://www.facebook.com/LetsMDMedbay/" target="_blank">
<span class="fa-stack fa-md">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
</a>
<a href="https://www.youtube.com/channel/UC4urUJpHcA9LpeRQ1O2hdjw" target="_blank">
<span class="fa-stack fa-md">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-youtube-play fa-stack-1x fa-inverse"></i>
</span>
</a>
<a href="https://in.linkedin.com/company/letsmd" target="_blank">
<span class="fa-stack fa-md">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
</span>
</a>
</p>
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="{{ asset('web/js/medicalInsuranceScript.js') }}"></script>
</html>
My CSS file :
#main-logo {
width: 50%;
margin-top: 5%;
}
#transparent-div {
width: 70%;
margin: 0 auto;
background: black;
opacity: 0.7;
color: white;
padding: 10px 50px;
min-height: 200px;
}
#content-div-one {
color: #E97C2B;
background: #f1efef;
text-align: center;
min-height: 300px;
}
#content-div-one button {
color: white;
background-image: linear-gradient(to right, #105e7b , #44b649);
box-shadow: 3px 3px 6px black;
border: none;
font-size: 170%;
font-weight: bold;
padding: 10px 20px;
}
#content-div-one button:hover {
font-size: 175%;
transition: all 0.2s;
box-shadow: 6px 6px 6px black;
}
#content-div-one button:focus {
outline:0;
}
.container-fluid {
margin: 0 !important;
padding: 0 !important;
}
#banner-container {
background-image: url('/images/family.jpg');
background-size: cover;
min-height: 500px !important;
padding-top: 20%;
position: relative;
}
#banner-text-div {
color: white;
margin: 0 auto;
width: 70% !important;
text-align: center;
position: absolute;
left: 15%;
bottom: 14%;
}
#banner-text-div h1 {
font-size: 400%;
font-weight: bolder;
font-style: italic;
}
#banner-text-div h2 {
font-size: 340%
}
#content-div-one h2 {
font-size: 300%;
font-weight: bold;
margin-top: 5%;
}
#content-div-one-span {
font-size: 300%;
}
#content-div-two h2 {
text-align: center;
color: #59A553;
margin-top: 8%;
}
#content-div-two p {
text-align: center;
color: #306577;
font-size: 150%;
/*margin-bottom: 6%;*/
}
#content-div-two h2 span {
font-weight: bolder;
}
#content-div-two ul {
color: #306577;
font-size: 150%;
margin: 5% 10%;
line-height: 200%;
}
#form-div {
background: #f1efef;
}
#form-div h2, #media-mentions-div h2 {
text-align: center;
color: #59A553;
margin-top: 10%;
margin-bottom: 5%;
}
#form-div h2 span, #media-mentions-div h2 span {
font-weight: bolder;
}
#form {
background: white;
padding: 5%;
box-shadow: 1px 1px 10px black;
width: 50% !important;
margin: 0 auto;
}
#form section p {
font-size: 150%;
color: #306577;
margin-top: 10%;
}
#form section select, #form section input[type='text'], #form section input[type='number'], #form section input[type='email'] {
width: 100%;
border: 2px solid #306577;
background: #f1efef;
font-size: 175%;
margin-bottom: 5%
}
#form section select {
height: 45px !important;
}
#form-btn {
width: 50%;
margin: 5% 25%;
text-align: center;
color: white;
background-image: linear-gradient(to right, #105e7b , #44b649);
box-shadow: 3px 3px 6px black;
border: none;
font-size: 170% !important;
font-weight: bold;
padding: 10px 20px;
margin-bottom: 10%;
}
#form-btn:hover {
font-size: 175%;
transition: all 0.2s;
box-shadow: 6px 6px 6px black;
}
#form section input[type='radio'] {
margin: 0px 10px;
}
#form-section-two span {
margin-right: 10%;
font-size: 120%;
}
#form-section-three p:first-child {
color: #E97C2B;
}
#greeting-text {
font-style: italic;
text-align: center;
font-size: 200% !important;
}
#media-mentions-div {
margin-bottom: 8%;
}
#footer {
background: grey;
color: white;
}
My JS file :
var sectionNumber = 2;
function toggleForm() {
if (sectionNumber === 0) {
$('#form-section-one').css('display','block');
$('#form-section-two').css('display','none');
$('#form-section-three').css('display','none');
}
else if (sectionNumber === 1) {
$('#form-section-one').css('display','none');
$('#form-section-two').css('display','block');
$('#form-section-three').css('display','none');
}
else if (sectionNumber === 2) {
$('#form-section-one').css('display','none');
$('#form-section-two').css('display','none');
$('#form-section-three').css('display','block');
}
else {
}
}
toggleForm();
What I expect (as stated) is that the footer should come at the bottom of the page and not overlap the elements above it.
What I expect :
What I'm getting :
Thank You
Add a wrapper row for the content above footer section
Check this fiddle
<div class="row">
<div class='col-md-offset-1 col-md-10 col-sm-offset-1 col-sm-10 col-xs-12'
id="media-mentions-div"></div>
</div>