Yesterday I faced a CSS issue which seems to be related to mat-drawer and Angulars router-outlet. I have got a fullpage flexbox with two children. A mat-toolbar at the top and a custom component app-sidenav at the bottom. This works fine and the app-sidenav fills the rest of the page since the flexbox is stretchy. Have a look at this simplified setting before continue:
<div class="flex">
<mat-toolbar></mat-toolbar>
<app-sidenav></app-sidenav>
</div>
The related css is
.flex { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: stretch; }
mat-toolbar { flex: 0 0 auto; }
app-sidenav { flex: 1 1 0; }
In the app-sidenav component I now have the following template
<mat-drawer-container>
<mat-drawer></mat-drawer>
<mat-drawer-content>
<main><router-outlet></router-outlet></main>
</mat-drawer-content>
</mat-drawer-container>
And the related styles are
mat-drawer-container, mat-drawer-content { display: block; height: 100%; }
main { height: 100%; overflow-y: auto; }
This works fine and the height is appropriate unless there is no content larger than the app-sidenav height. The scrollbar appears at the outer flexbox component and not at the main-tag. I also tested !important at the heights and also 100vh but with no success. So how can I get the overflow-y at the main tag working?
I'm pretty sure that there is a simply trick, but I can't get it for know. Thanks for your help.
Cheers!
Edit:
I made a stackblitz for this issue. When you navigate to the ciao component you see that the scrollbar appears at the document root and not in the main tag.
In addition to #Sakkeer's working solution I found another way without hacking the position attribute but with usage of flex. Just add (not replace) the following css rules to the existing styles.
app-sidenav { display: flex; }
mat-drawer-container { flex: 1 1 auto; }
Try this for main css class
main {
position: absolute;
right: 0px;
left: 0px;
bottom: 0px;
top: 0px;
}
This worked for me!add it to style.scss:
.mat-drawer-inner-container{ overflow: hidden !important; }
if it doesn't work for you, try below in style.scss:
*{ overflow: hidden !important; }
<mat-drawer-container autosize style="position: absolute;right: 0px;left: 0px;bottom: 0px;top: 0px;">
<mat-drawer #drawer mode="side" class="toolbar">
<app-sidenav></app-sidenav>
</mat-drawer>
<router-outlet></router-outlet>
</mat-drawer-container>
Above code just worked for me, when I put style directly and use autosize so that mat-drawer-container will not overlap on the router page.
It will add two scrollbar. One for main page scroll and another scrollbar is for the mat-draw which slide from left. The mat-draw will have its own scroll bar. Just like the screenshot.
.mat-drawer.mat-drawer-end {
position: fixed;
overflow: auto;
}
Beside having long page i can see the mat-draw on the top with its own scroll. I hope this helps with minimal code require to achieved what we want.
Related
I'm trying to move the caption outside the coursel towards the left side but the problem it's not working. Whenever it moves outside its parent container it stops showing. Can somebody please help me out. Here is a JS bin link --> JSBin
It would be great if anyone could help me out. Thanks
OS: Mac
Browser: Chrome 74.0
Bootstrap version: 4.1.1
Set the caption relative to the image:
.carousel-inner img {
width: 100%;
height: 100%;
position: absoloute;
}
.carousel-caption {
color: #000;
position: relative;
float: left;
left: 0;
margin-left: 30px;
margin-top: 30px;
}
The element with the class carousel-inner has the following declaration set by Bootstrap: overflow: hidden. It prevents any of its children elements placed outside its padding-box to be visible.
To prevent that behaviour, you need to override that declaration with: overflow: visible. Then, to prevent the slides from being shown when moving, you need to wrap the carousel inside another element, add some padding at the bottom of that element to allow the caption to be visible (60px for instance), and set its overflow property to hidden.
So you need to add the following code to your CSS:
.carousel-container {
padding: 0 0 60px 0;
overflow: hidden;
}
.carousel-inner {
overflow: visible;
}
<div class="carousel-container">
<div class="carousel">
<!-- The code of the carousel -->
</div>
</div>
I am trying to build a two column design with an Angular 2 app. I created a plunker to reproduce my problem: https://plnkr.co/3Evxm9?p=info
I want the scrollable area to be the red div (.overflow), not the .page. Without the .page { overflow: auto } the page won't scroll at all, though I would expect .overflow to do so since it has a defined height of 100%. The padding is there to offset from the .top div. I initially though using margin instead, but without the overflow: auto on .page, the margin goes outsides the bounds of .container (which shrinks to fit the height (padding included, margin excluded) of .overflow.
I seem to misunderstand the behaviour of the flexbox.
I made some adjustment to your css to make the red area scrollable only.
css:
.page {
width: 100%; height: 100vh;
background: red;
flex: 1;
overflow: hidden;
}
.overflow {
font-size: 30px;
padding-top: 64px;
height: 93vh;
overflow: scroll;
}
Thanks for providing a plunker. It helped a lot to find a solution for you. Here's the link to the edited plunker.
Hope this helps!
When rendered in Chrome/Android the website shows as intended but in IE/Firefox some vertical scrollbars appear. Simplified code:
CSS
html, body {
overflow: hidden;
position: relative;
}
.menu, .slide, .ico {
overflow-x: hidden;
overflow-y: scroll;
position: fixed;
height: 100%;
width: 100%;
}
.menu::-webkit-scrollbar, .slide::-webkit-scrollbar, .ico::-webkit-scrollbar {
display: none;
}
.container {
display: table;
height: 100%;
position: absolute;
overflow: hidden;
width: 100%;
}
.links {
height: 100%;
display: table-cell;
vertical-align: middle;
}
HTML structure
<html>
<body>
<div class="menu">
<div class="container">
<div class="links">
I hope I copied the sufficient code to show the issue. If needed I can link the website.
The idea is having the links div be scroll-able vertically but without showing the scrolling bar.
Edit: here is the full code: http://www.jcml.pt
Edit2: I was able to fix it (but created another problem as can be seen on my answer).
well...
overflow-y: scroll;
Means if content overflows in y axis (vertical), show a scroll bar. It sounds like this is what your seeing. And that this code worked! (lol)
Try adjusting the height: of the element (or parent element) where this is occurring it may need a few more pixels of space in IE or Firefox to show all of the content in vertical space; as browsers render / read slightly differently (especially if defined as 100% or auto).
Then remove overflow-y: scroll; leave it blank or declare overflow-y: auto; or if your still having an issue trying define your height in pixels or declare a max-height: with the 100% if your still having issues please try to update your question so we can fully understand and provide a JSfiddle demo and / or screenshot.
Since it was working on Chrome I thought I was going on the right direction and searched even more things and found this scheme:
http://blogs.msdn.com/b/kurlak/archive/2013/11/03/hiding-vertical-scrollbars-with-pure-css-in-chrome-ie-6-firefox-opera-and-safari.aspx
I was able to fix it the problem by creating two containers instead of one (but now it doesn't scroll at all - something I'll have to work on later). Code can be seen here: http://www.jcml.pt/3
I am relatively new to front-end dev so a bit lost as to how i can go about this. I created a container that contains a slider and some images. My supervisor has a huge screen so obviously there will be empty space at the bottom of the screen. So he doesn't want that. Instead he wants the container to be centered horizontally and vertically based on the size of the user's screen.
How can I do this properly with as minimal code as possible? I believe there is jQuery plugin but wanted to see if there is a better way or if doing this makes sense at all or not?
Due to the flow-based nature of CSS, without Javascript this can only be done if the vertical size of the centered element is fixed, by applying a position:absolute' andtop:50%` within a fixed container, and then use negative margin to offset the container. Click here for JSFiddle Sample.
Alternatively the same effect can be reached by using display:table-cell, but that's kind of messy and loses you a lot of flexibility. Sample already supplied in the other answer here so I'll save myself the effort :)
You can do it easily using a vertical-align property.
Since vertical-align works the desired way way only in a table cell, this trick with display property can give you the desired effect.
#yourDiv {
// give it a size
width: 100px;
height: 100px;
margin: 0 auto;
}
html, body {
height: 100%;
width: 100%;
padding: 0; margin: 0;
}
html {
display: table;
}
body {
display: table-cell;
vertical-align: middle;
}
See a fiddle with demo.
Try this:
HTML:
<div class="center"></div>
CSS:
.center {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
background-color: red;
}
Demo: http://jsfiddle.net/WDth4/
Exactly Center an Image/Div Horizontally and Vertically:
http://css-tricks.com/snippets/css/exactly-center-an-imagediv-horizontally-and-vertically/
http://www.michaelhoffmandesign.com
So I and pretty new to coding and have been coding this website from the ground up for professional use. The problem is, when users click the Resume section, the whole navbar moves over to the left. I have tried to correct this by adding a left:x px. But it doesn't seem to work. Any help?
The scrollbar causes the slight difference. You can enable scrollbar on all the pages with:
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
This makes the scrollbar always visible and only active when needed.
Or another solution would be:
html {height: 101%;}
use margin: 0 auto for nav to align center
Try this:
nav {
position: relative;
width: 800px;
height: 17px;
margin: 0 auto;
text-decoration: none;
}
header nav ul {
width: 800px;
margin: 0 auto;
}
In the html for resume.html, check this line :
< nav style="right:10px;">
Remove that style attribute and give it a try.