Example JSFiddle: https://jsfiddle.net/eqf8wwxe/
I'm trying to use the Semantic UI sidebar with a footer. However, the height of the page is not greater than the view-port by the height of the footer.
How can I go about correcting this? What is causing this in this situation?
$('.ui.sidebar').sidebar({
context: $('#main-sidebar-segment')
})
* {
border-radius: 0!important;
}
body {
background: #f1f1f1;
//background: #8b8b8b;
//display: flex;
//flex-flow: column;
height: 100%;
}
#main-sidebar-segment {
//display: flex;
//flex-flow: column;
}
.ui.main.container {
//flex: 1 1 auto;
}
.ui.inverted.footer.segment {
//flex: 0 1 40px;
margin: 0;
z-index: 1000;
}
.ui.grid {
//margin: 1rem;
}
.ui.inverted.green.dashboard.segment {
background-color: #2fb34e!important;
color: #FFF!important;
}
.ui.inverted.orange.dashboard.segment {
background-color: #f26b1c!important;
}
.ui.stat.header.segment {
padding: 0.5em;
}
.ui.inverted.dark.blue.segment {
border: 2px solid #2185D0;
background-color: #4c4f52!important;
}
.ui.ordered.large.list .list>.item:before,
.ui.ordered.large.list > .item::before {
font-size: 1.3em;
content: counters(ordered, " ") ". ";
}
.ui.ordered.large.list .content {
margin-left: 0.3em;
}
.ui.secondary.blue.filled.segment {
background: linear-gradient(rgba(255, 255, 255, .2) 0, rgba(255, 255, 255, .2) 100%) #4c4f52;
background-color: #2185D0!important;
}
.black.header {
color: black;
}
h3.compact.header {
margin: 0 !important;
}
.ui.inverted.sidebar {
background: #37393a;
//margin-top: 40px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>
<body >
<div id="main-sidebar-segment" style="margin-bottom: 0; border: none;" class="ui bottom attached segment pushable">
<div class="ui left visible inline vertical inverted thin sidebar labeled menu">
<a class="item">
<i class="home icon"></i> Home
</a>
<a class="item">
<i class="bar chart icon"></i>Reports
</a>
<a class="item">
<i class="ordered list icon"></i>Leaderboards
</a>
<a class="item">
<i class="configure icon"></i>Tools
</a>
</div>
<div class="ui inverted fluid fixed menu">
<div class="ui container">
<a class="active item"><i class="home icon"></i>Home</a>
<div class="compact right menu">
<div class="ui dropdown item">
<div class="default text">Select World</div>
<input type="hidden" value="">
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="1">World 1</div>
<div class="item" data-value="2">World 2</div>
<div class="item" data-value="3">World 3</div>
</div>
</div>
<a class="icon item"><i class="options icon"></i></a>
<a class="item"><i class="orange sign out icon"></i>Logout</a>
</div>
</div>
</div>
<div class="pusher">
</div>
<div class="ui inverted footer segment">
<div class="ui center aligned container">
<div class="ui horizontal inverted small divided link list">
<a class="item" href="#">Report An Issue</a>
<a class="item" href="#">Chat</a>
<a class="item" href="#">Contact</a>
</div>
<div>
Created and maintained by
<a class="teal link" href="#">
<h5 style="display:inline;" class="ui teal header">
Douglas Gaskell
</h5>
</a>
</div>
</div>
</div>
</div>
</body>
The .pusher has a min-height: 100% which is the culprit pushing your footer out of the viewport.
I would just override that style (or if you are using the .pusher class elsewhere make a new css class for it.)
#main-sidebar-segment .pusher {
min-height: calc(100vh - 80px);
}
I do 80px because that is the height of your footer.
https://jsfiddle.net/8yobm8u3/
Related
I arranged my angular material tabs vertically using CSS. Unfortunately, the pagination to navigate to the invisible tabs is not displayed
My container has a fixed height (max-height: 177px) so that only a certain number of tabs are visible. The pagination should appear when this fixed height is exceeded.
Here is my CSS / SCSS for the vertical tabs:
:host ::ng-deep {
.mat-tab-group {
flex-direction: row-reverse;
.mat-tab-nav-bar,
.mat-tab-header {
border: 0;
}
.mat-tab-header {
display: flex;
align-items: flex-end;
max-height: 177px;
right: 50px;
bottom: 50px;
z-index: 2147483647;
.mat-tab-labels {
flex-direction: column;
background: gray;
.mat-tab-label {
margin: 0;
padding: 20px;
cursor: pointer;
&:not(:last-child) {
border-bottom: 1px solid white;
}
&.mat-tab-label-active {
background-color: white !important;
width: 100%;
}
}
}
}
.mat-tab-body-wrapper {
width: 100%;
height: 100%;
display: table;
}
}
}
My template is structured like this:
<content>
<div class="main-wrapper i-wrapper">
<div class="header">
<div class="title">
<h4>Title</h4>
</div>
</div>
<mat-tab-group mat-align-tabs="end">
<div *ngFor="let item of items; let i = index">
<mat-tab label="{{i}}">
<div class="device-map-container">
<div class="device-map">
<img id="img_equipment" [src]="apiUrl + '/path/to/svg/' + asset | sanitize">
<a *ngFor="let data of SVGdata"
title="{{ data.title }}"
class="device-link">
</a>
<div class="wrapper">
<!-- another angular component -->
</div>
</div>
</div>
</mat-tab>
</div>
</mat-tab-group>
</div>
</content>
In dev tools the templates looks like this:
<mat-tab-group _ngcontent-nnd-c412="" mat-align-tabs="end" animationduration="0ms" class="mat-tab-group mat-primary" ng-reflect-animation-duration="0ms">
<mat-tab-header class="mat-tab-header" ng-reflect-selected-index="0" ng-reflect-disable-ripple="false" ng-reflect-disable-pagination="false">
<div aria-hidden="true" mat-ripple="" class="mat-ripple mat-tab-header-pagination mat-tab-header-pagination-before mat-elevation-z4 mat-tab-header-pagination-disabled" ng-reflect-disabled="true">
<div class="mat-tab-header-pagination-chevron"></div>
</div>
<div class="mat-tab-label-container">
<div role="tablist" class="mat-tab-list" style="transform: translateX(0px);">
<div class="mat-tab-labels">
<div role="tab" mattablabelwrapper="" mat-ripple="" cdkmonitorelementfocus="" class="mat-ripple mat-tab-label mat-focus-indicator mat-tab-label-active ng-star-inserted" id="mat-tab-label-0-0" ng-reflect-disabled="false" tabindex="0" aria-posinset="1" aria-setsize="2" aria-controls="mat-tab-content-0-0" aria-selected="true" aria-disabled="false">
<div class="mat-tab-label-content">
</div>
</div>
<div role="tab" mattablabelwrapper="" mat-ripple="" cdkmonitorelementfocus="" class="mat-ripple mat-tab-label mat-focus-indicator ng-star-inserted" id="mat-tab-label-0-1" ng-reflect-disabled="false" tabindex="-1" aria-posinset="2" aria-setsize="2" aria-controls="mat-tab-content-0-1" aria-selected="false" aria-disabled="false">
<div class="mat-tab-label-content">
</div>
</div>
</div>
<mat-ink-bar class="mat-ink-bar" style="visibility: visible; left: 0px; width: 50px;"></mat-ink-bar>
</div>
</div>
<div aria-hidden="true" mat-ripple="" class="mat-ripple mat-tab-header-pagination mat-tab-header-pagination-after mat-elevation-z4 mat-tab-header-pagination-disabled" ng-reflect-disabled="true">
<div class="mat-tab-header-pagination-chevron"></div>
</div>
</mat-tab-header>
<div class="mat-tab-body-wrapper">
<mat-tab-body role="tabpanel" class="mat-tab-body ng-tns-c380-10 mat-tab-body-active ng-star-inserted" id="mat-tab-content-0-0" ng-reflect-_content="[object Object]" ng-reflect-position="0" ng-reflect-origin="1" ng-reflect-animation-duration="0ms" aria-labelledby="mat-tab-label-0-0">
<div class="mat-tab-body-content ng-tns-c380-10 ng-trigger ng-trigger-translateTab" style="transform: none;">
<div _ngcontent-nnd-c412="" class="device-map-container ng-star-inserted" style="">
<div _ngcontent-nnd-c412="" class="device-map">
<img _ngcontent-nnd-c412="" id="img_equipment" alt="" src="data:image/svg+xml;base64,...">
</div>
</div>
</div>
</mat-tab-body>
<mat-tab-body role="tabpanel" class="mat-tab-body ng-tns-c380-11 ng-star-inserted" id="mat-tab-content-0-1" ng-reflect-_content="[object Object]" ng-reflect-position="1" ng-reflect-animation-duration="0ms" aria-labelledby="mat-tab-label-0-1">
<div class="mat-tab-body-content ng-tns-c380-11 ng-trigger ng-trigger-translateTab" style="transform: translate3d(100%, 0px, 0px); min-height: 1px;">
<!--container-->
</div>
</mat-tab-body>
</div>
</mat-tab-group>
Currently it looks like this (6 elements are visible. But there are more than 6 tabs in the container):
I'm working on my first web dev portfolio and am trying to incorporate the Bootstrap Grid system to the project links. I've searched through Bootstrap's documentation (v4.5), Stack Overflow, and just googling various searches to death. I've tried every solution I've found and am still getting nowhere. The closest I've come to a result is changing all three col-lg-4 to col-lg33. That did create the space, but then the padding looked super weird and it was more space than I needed. Any help would be super appreciated. I'm a but of a noob still.
<section id="projects">
<h2>My Work</h2>
<div class="container">
<div class="row justify-content-around">
<div class="col-lg-4 col-md-6 projects-grid">
<a href="https://briafly27.github.io/TechnicalDocumentAssignment/" target="_blank">
<img class="project-image" src="Images/TechnicalDoc.png" alt="project"/>
<p class="project-title">CSS Technical Document</p>
</a>
</div>
<div class="col-lg-4 col-md-6 projects-grid">
<a href="https://briafly27.github.io/Javascript30DrumKit/" target="_blank">
<img class="project-image" src="Images/JavascriptDrumkit.png" alt="project"/>
<p class="project-title">Javascript Drumkit</p>
</a>
</div>
<div class="col-lg-4 col-md-6 projects-grid">
<a href="https://briafly27.github.io/FirstPersonalSite/" target="_blank">
<img class="project-image" src="Images/FirstPersonalSite.png" alt="project"/>
<p class="project-title">First Personal Site</p>
</a>
</div>
</div>
</div>
</section>
#projects {
background: #3F3F44;
color: #f7f7f7;
font-family: 'Raleway', sans-serif;
height: 100vh;
}
#projects h2 {
text-shadow: 1px 1px #fdcb9e;
text-align: center;
padding: 60px;
}
.projects-grid {
background-color: #fdcb9e;
box-shadow: 5px 8px black;
border-radius: 10px;
padding: 1% 0;
}
.projects-grid:hover {
background-color: #cceabb;
box-shadow: 7px 10px black;
}
.projects-grid a {
text-decoration: none;
color: #3f3f44;
text-shadow: 1px 1px #cceabb;
}
.project-image {
height: 100%;
max-height: 170px;
width: 100%;
max-width: 300px;
border-radius: 10px;
border: 2px solid #cceabb;
display: flex;
margin: 0 auto;
}
.project-image:hover {
border: 2px solid #fdcb9e;
}
.project-title {
font-size: 1.5rem;
font-weight: 700;
padding-top: 8px;
padding-bottom: 4px;
margin: 0;
text-align: center;
}
Bootstrap is adding the column guttering as a 15px padding, by styling the layout there, you are also styling the padding that is the guttering, hence the project grid 'cards' are touching.
For this, to keep the guttering and to ensure nice even columns, I would style a nested div instead.
<div class="col-md-4">
<div class="projects-grid">
<a href="https://briafly27.github.io/TechnicalDocumentAssignment/" target="_blank">
<img class="project-image" src="Images/TechnicalDoc.png" alt="project" />
<p class="project-title">CSS Technical Document</p>
</a>
</div>
</div>
If the guttering is too large, you can change the sass variable (it's set to 30px by default) or you can use .no-gutters to remove all the guttering and add the padding manually to the nested divs.
<div class="row no-gutters">
<div class="col-md-4 p-2">
<div class="projects-grid">
<a href="https://briafly27.github.io/TechnicalDocumentAssignment/" target="_blank">
<img class="project-image" src="Images/TechnicalDoc.png" alt="project" />
<p class="project-title">CSS Technical Document</p>
</a>
</div>
</div>
</div>
I've created this link on Codepen to try understanding better the problem so that we can help you better:
https://codepen.io/maricaldas/pen/ExPKNzM
<section id="projects">
<h2>My Work</h2>
<div class="container">
<div class="row justify-content-around">
<div class="col-lg-3 col-md-6 projects-grid">
<a href="https://briafly27.github.io/TechnicalDocumentAssignment/" target="_blank">
<img class="project-image" src="Images/TechnicalDoc.png" alt="project" />
<p class="project-title">CSS Technical Document</p>
</a>
</div>
<div class="col-lg-3 col-md-6 projects-grid">
<a href="https://briafly27.github.io/Javascript30DrumKit/" target="_blank">
<img class="project-image" src="Images/JavascriptDrumkit.png" alt="project" />
<p class="project-title">Javascript Drumkit</p>
</a>
</div>
<div class="col-lg-3 col-md-6 projects-grid">
<a href="https://briafly27.github.io/FirstPersonalSite/" target="_blank">
<img class="project-image" src="Images/FirstPersonalSite.png" alt="project" />
<p class="project-title">First Personal Site</p>
</a>
</div>
</div>
</div>
</section>
Do you mean you want a space separating the project-grid columns?
If so, the first thing we need to consider is that when we use 3 columns taking 4 spaces each, we're using the full grid, which is 12, and that's why we can't see spaces around those col-lg-4 columns.
Can you please elaborate a little bit more on the result you want to achieve?
Maybe a way to add that space among the columns while using col-lg-4 is to overwrite the bootstrap pre-set width, which is 33.33%.
#media (min-width: 992px) {
.col-lg-4 {
-ms-flex: 0 0 32%;
flex: 0 0 32%;
max-width: 32%;
}
}
I have created a table of divs with CSS that is made up of parent rows and child rows, but I want the child rows to make them visible or to hide with the help of vuejs. My problem is not how to make them visible / hidden, how to properly align parents with children.
In my example the child row should fit between parent row two and three, but the child row is displayed above the parent row with the number three.
In the example below the irregularities can be seen much better in full screen mode.
Thanks!
.div-table {
display: table;
width: 100%;
table-layout: auto;
font-size: 12px;
color: black;
}
.div-table-head {
display: table-header-group;
background: #e5e5e5;
vertical-align: middle;
}
.div-table-body {
display: table-row-group;
vertical-align: middle;
}
.div-table-tr {
display: table-row;
}
.div-table-th {
display: table-cell;
font-weight: 700;
text-transform: uppercase;
border-bottom: 3px solid #666;
}
.div-table-td {
display: table-cell;
border-bottom: 1px solid #e5e5e5;
}
.div-table-th, .div-table-td {
padding: 6px;
}
.div-table-tr:nth-of-type(odd) {
background: #f8f8f8;
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
}
.div-table-tr:hover {
background: #ffd;
}
.my-material-icons {
font-size: 13px;
color: gray;
cursor: pointer;
}
.col-span {
position: absolute;
padding: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.3.1/css/uikit.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet"/>
<div class='div-table'>
<div class='div-table-head'>
<div class='div-table-th' style="width: 3%">#</div>
<div class='div-table-th' >th2</div>
<div class='div-table-th' >th3</div>
</div>
<div class='div-table-body'>
<!-- parent -->
<div class='div-table-tr'>
<div class='div-table-td'>1 <i title="title" class="material-icons my-material-icons">arrow_drop_down_circle</i></div>
<div class='div-table-td'>td12</div>
<div class='div-table-td'>td13</div>
</div>
<!-- parent -->
<div class='div-table-tr'>
<div class='div-table-td'>2 <i title="title" class="material-icons my-material-icons">arrow_drop_down_circle</i></div>
<div class='div-table-td'>td22</div>
<div class='div-table-td'>td23</div>
</div>
<!-- child -->
<div class='div-table-tr'>
<div class='div-table-td col-span'>
<div class='div-table'>
<div class='div-table-head'>
<div class='div-table-th' style="width: 4%">#</div>
<div class='div-table-th' >th2</div>
<div class='div-table-th' >th3</div>
</div>
<div class='div-table-body'>
<div class='div-table-tr'>
<div class='div-table-td'>1 <i title="title" class="material-icons my-material-icons">arrow_drop_down_circle</i></div>
<div class='div-table-td'>td12</div>
<div class='div-table-td'>td13</div>
</div>
<div class='div-table-tr'>
<div class='div-table-td'>2 <i title="title" class="material-icons my-material-icons">arrow_drop_down_circle</i></div>
<div class='div-table-td'>td22</div>
<div class='div-table-td'>td23</div>
</div>
</div>
</div>
</div>
</div>
<!-- parent -->
<div class='div-table-tr'>
<div class='div-table-td'>3 <i title="title" class="material-icons my-material-icons">arrow_drop_down_circle</i></div>
<div class='div-table-td'>td32</div>
<div class='div-table-td'>td33</div>
</div>
</div>
</div>
Firts of all instead of use div labels to build a table you should use the vuejs markup https://v2.vuejs.org/v2/examples/grid-component.html
I have problem with my footer. I am using ASP.NET Core 2 MVC, with Razor View.
Right now I tryed everything from this, including comments:
https://css-tricks.com/couple-takes-sticky-footer/ & https://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
Note, that I do not want fixed footer. I know that there is several similar topics in SO, but I tryed already everything I found. I belive that I am missig something obvoius. I work on this whole day already and it just stops me.
Every time my footer is rendered just below Edit, Delete buttons, or somewhere in the middle of page. I am guessing that it might be something with my _Layout architecutre or for in Index file is causing ot somehow.
My _Layout.cshtml looks like this:
<div class="wrapper">
<div class="header">
<!--HEADER-->
</div>
<div class="content">
<!--BODY-->
#RenderBody()
</div>
<div class="footer">
<!--FOOTER-->
<footer>
<div></div>
</footer>
</div>
</div>
My Index.cshtml looks like (for most of the cases footer was rendered below Edit/Delete form:
<div>
#if (Context.User.Identity.IsAuthenticated)
{
<a asp-action="Create" class="btn btn-sm btn-primary adminBtn">Add new project</a>
}
<div>
#foreach (var item in Model)
{
<div class="projectContainer col-lg-6">
#if (Context.User.Identity.IsAuthenticated)
{
<form asp-action="Delete" method="post">
<a asp-action="Edit" class="btn btn-sm btn-warning"
asp-route-projectID="#item.ProjectID">
Edit
</a>
<input type="hidden" name="ProjectID" value="#item.ProjectID" />
<button type="submit" class="btn btn-danger btn-sm">
Delete
</button>
</form>
}
<div class="innerContainer" style="background-color: #item.BackColor">
<div class="projectHeader col-xs-12">
#item.Name
</div>
<div class="hyperButton col-xs-12">
<a asp-action="Details" asp-route-projectID="#item.ProjectID">See more ></a>
</div>
<div class="projectPictures col-xs-12">
<a asp-action="Details" asp-route-projectID="#item.ProjectID"><img src="#item.PictureUrl" asp-append-version="true" /></a>
</div>
</div>
</div>
}
</div>
</div>
My site.css looks like that right now:
html, body {
height: 100%;
overflow-x: hidden;
}
body {
min-height: 100%;
position: relative;
}
.footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
background-image: url(/src/img/footBG.png);
background-repeat: repeat;
border-top: 3px solid #557DA8;
height: 75px;
text-align: center;
}
.footText {
font-size: 20px;
position: relative;
top: 20px;
}
UPDATE with source code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<link href="/src/lib/fontawesome/css/all.css" rel="stylesheet" />
<link rel="stylesheet" href="/src/lib/bootstrap/css/bootstrap.min.css">
<script src="/src/lib/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/dist/site.css" />
<style>
.input-validation-error {
border-color: red;
background-color: #fee;
}
</style>
<title>
Przemyslaw Bak - My projects
</title>
</head>
<body>
<div class="wrapper">
<div class="header">
<!--HEADER-->
<div class="mainHeader">
<div class="helloTextContainer col-12">
<div class="helloTxtWrapper">Hi! I am</div>
</div>
<div class="mainTextContainer col-sm-9 col-xs-12">
<div class="mainTxtWrapper">Przemyslaw Bak {developer}</div>
</div>
<div class="socialContainer col-sm-3 hidden-sm-down">
<!--VIEW COMPONENT-->
<i class="fab fa-facebook-square"></i>
<i class="fab fa-linkedin"></i>
<i class="fab fa-github-square"></i>
</div>
</div>
<div class="mainNavbar">
<div><a class="mainButton projects" href="/">my projects</a></div>
<div><a class="mainButton technologies" href="/MyTechnologies">technologies</a></div>
<div><a class="mainButton about" href="/Literature">literature</a></div>
<div><a class="mainButton contact" href="/ContactMe">about and contact</a></div>
</div>
<div class="stickyNavbar">
<div><a class="mainButton projects" href="/">my projects</a></div>
<div><a class="mainButton technologies" href="/MyTechnologies">technologies</a></div>
<div><a class="mainButton about" href="/Literature">literature</a></div>
<div><a class="mainButton contact" href="/ContactMe">about and contact</a></div>
</div>
<!--HERE TRIGGERS APP.JS-->
<div class="emptySpace" id="app"></div>
</div>
<!--BODY-->
<div class="content">
<!--button-->
<style>
.projects {
color: gray !important;
}
</style>
<div>
<div>
<div class="projectContainer col-lg-6">
<div class="innerContainer" style="background-color: #E8E8E8">
<div class="projectHeader col-xs-12">
Name of the project
</div>
<div class="hyperButton col-xs-12">
See more >
</div>
<div class="projectPictures col-xs-12">
<img src="#" />
</div>
</div>
</div>
<div class="projectContainer col-lg-6">
<div class="innerContainer" style="background-color: #fafafa">
<div class="projectHeader col-xs-12">
Name of the project
</div>
<div class="hyperButton col-xs-12">
See more >
</div>
<div class="projectPictures col-xs-12">
<img src="/src/img/website1.png?v=pdiYJ15drelz9-8uTNfrtUab7HjRkk9REgc4EOUOLHU" />
</div>
</div>
</div>
<div class="projectContainer col-lg-6">
<div class="innerContainer" style="background-color: #f9fbf8">
<div class="projectHeader col-xs-12">
Best project ever
</div>
<div class="hyperButton col-xs-12">
See more >
</div>
<div class="projectPictures col-xs-12">
<img src="/src/img/website1.png?v=pdiYJ15drelz9-8uTNfrtUab7HjRkk9REgc4EOUOLHU" />
</div>
</div>
</div>
</div>
</div>
</div>
<!--FOOTER-->
<div class="footer">
<footer>
<div class="footText">© 2018 - Przemyslaw Bak</div>
</footer>
</div>
</div>
<!--SCRIPTS-->
<script src="/dist/bundle.js"></script>
<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>
</body>
</html>
Currently after scrolling down my footer looks like this (2018 - Przemyslaw Bak):
UPDATE2:
I am using Bootstrap 4, maybe it changes something
Take out that position: absolute; in the footer CSS
.footer {
left: 0;
right: 0;
bottom: 0;
width: 100%;
background-image: url(/src/img/footBG.png);
background-repeat: repeat;
border-top: 3px solid #557DA8;
height: 75px;
text-align: center;
}
html, body {
height: 100%;
overflow-x: hidden;
}
body {
min-height: 100%;
position: relative;
}
.footer {
left: 0;
right: 0;
bottom: 0;
width: 100%;
background-image: url(/src/img/footBG.png);
background-repeat: repeat;
border-top: 3px solid #557DA8;
height: 75px;
text-align: center;
}
.footText {
font-size: 20px;
position: relative;
top: 20px;
}
<div class="wrapper">
<div class="header">
<!--HEADER-->
</div>
<div class="content">
<!--BODY-->
<p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p>
</div>
<div class="footer">
<!--FOOTER-->
<footer>
<div>Div inside footer</div>
</footer>
</div>
</div>
if you using bootstrap 4 there good solition for you,
https://getbootstrap.com/docs/4.0/utilities/flex/#align-self
you need self item end if you wanna use to bootstrap I think you should be use this.
After Viktor`s comments I stripped out my HTML code and started to suspect, that my Bootstrap (previously 4.0.6) is messing up something.
So I started to Google "flush footer bootstrap" and I found this:
Flush footer to the bottom of the page in bootstrap 4
After installation Bootstrap 4.1.X files, I changed my site.css and _Layout.cshtml as follows:
body, wrapper {
min-height: 100vh;
}
footer {
width: 100%;
background-image: url(/src/img/footBG.png);
background-repeat: repeat;
border-top: 3px solid #557DA8;
height: 75px;
text-align: center;
}
.footText {
font-size: 20px;
position: relative;
top: 20px;
}
_Layout.cshtml:
<body>
<wrapper class="d-flex flex-column">
//nav bar
//render body
<main class="container-fluid py-3 flex-fill">
#RenderBody()
</main>
//footer
<footer>
<div class="footText">© #DateTime.Now.Year - Przemyslaw Bak</div>
</footer>
</wrapper>
//scripts
</body>
And it works!
I am trying to scroll through a list of items, but scroll is working only for some of the items, not all. After a certain item, the scroll stops and does not go the last item.
Here is the Stackblitz link.
https://angular-cym8q4.stackblitz.io/
This is for a chatlist overlay which contains list of profiles. Please refer to the following screenshot:
In the above screenshot, I am not able to scroll through all the profiles. Scroll if happening for only some of the profiles, it is not going to the very end of the list.
Here is my code:
app.component.html
<div class="container-fluid">
<div class="row">
<div class="col-3 d-none d-lg-block col-offset-5 red coloverlay bg-custom">
<app-chatlist></app-chatlist>
</div>
</div>
</div>
app.component.css
.coloverlay {
background-color: rgba(233, 33, 33, 0.4);
margin: 0;
padding: 0;
position: fixed;
top: 150px;
z-index: 1;
bottom: 0;
right: 0;
margin: 0;
}
.bg-custom {
background: #2c3e50;
}
chatlist.component.html
<div class="container-fluid p-0">
<div class="row m-0 ">
<div class="col p-0">
<div class="d-flex flex-row chatlistbox ">
<div class="m-2">
Chat
</div>
<div class="ml-auto mt-1 pr-2">
<i class="fa fa-window-minimize " aria-hidden="true"></i>
</div>
<div class="m-2">
<i class="fa fa-cog" aria-hidden="true"></i>
</div>
</div>
<div class="customList">
<ul class="list-group overflow-auto" id="contact-list">
<app-chatlist-item class="list-group-item p-0 border-0" *ngFor="let el of elList" [element]="el">
</app-chatlist-item>
</ul>
</div>
</div>
</div>
</div>
chatlist.component.css
.overflow-auto {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
}
.customList {
height: 93%;
}
.chatlistbox {
background: aquamarine;
height: 2%;
}
chatlist-item.component.html
<div class="d-flex flex-row bg-custom item">
<div class="p-2">
<img src="{{element.imagePath}}" alt="" />
</div>
<div class="p-2">
<div class="d-flex flex-column flex-wrap name">
<h6 class="m-0">
{{element.firstName}} {{element.lastName}}
</h6>
<span class="details">
{{element.details}}
</span>
</div>
</div>
</div>
chatlist-item.component.css
img {
width: 80px;
height: 80px;
border-radius: 40px;
padding: 3px;
float: left;
cursor: pointer;
}
.bg-custom {
background: #2c3e50;
}
* {
color: #e3dcdc;
}
.item:hover {
background: #32465a;
}
I am not sure what is the problem. Any help would be highly apprecitated.
The issue is that the container is taller than the page, so the scroll bar goes off the page.
To fix it, you need to set the height on some of the elements, like so:
.container-fluid.p-0,
.row.m-0,
.col.p-0 {
height: 100%;
}
Finally, you will need to change the height of customList. I would recommend using calc instead of a fixed percentage, which may not be what you want.
.customList {
height: calc(100% - 15px);
}
Here is a fork of the stackblitz with the CSS fixed:
https://stackblitz.com/edit/angular-7c7dmk?file=src/app/chatlist/chatlist.component.css