For some reason, I can't seem to get the mat drawer to occupy the remaining available height on the screen. I've tried:
.drawer-container {
position: fixed;
height: 100%;
min-height: 100%;
width: 100%;
min-width: 100%;
}
But I still get an overflow for some reason even though there's only one element on screen as indicated by the scroll bar:
And when I remove the CSS rules, I end up with this:
Basically about 10% of the screen height only. I've considered using a fixed height, but I'm guessing it would look cut off if viewed on a larger or smaller monitor. I'd appreciate any help as I'm really not familiar with the full properties of angular material and how to properly manipulate them. Thanks in advance.
in case any dropped by this and had a similar problem.
i fixed this long ago by applying
.drawer-container {
position: absolute;
top:0;
width: 100%;
bottom: 0;
}
just make sure the parent has a position: relative
Percentage based width/height is not yet supported by mat-sidenav i suppose.
try height: 100vh; instead.
that should work, but will add a scrollbar if there is any toolbar in your page.
UPDATE:
HTML:
<mat-drawer-container class="parent" autosize>
<mat-drawer mode="side">
Your sidenav content
</mat-drawer>
<div class="content">
Your main content.
</div>
</mat-drawer-container>
CSS:
.parent {
width: 100%;
height: 100vh; // calc(100vh - 64px) can be used if there is navbar at the top
}
.content {
height: 100%;
}
Related
I've build an ad with an click tag. Everything works fine - the images are scaling proportionally but is there a way for the container not to fill 100% of width/height and still be scaling?
Preview:
https://craftads.de/hosting/stack_test5/
Wetransfer Code:
https://wetransfer.com/downloads/5b7b21ccd2a0f535cfcb22146ae5e41b20210823135155/edf6cd
I would like that only the visible part to be clickable.
Visual representation:
This is what I would like to achieve
Thanks for the help!
After a lot of trial and error I think I've found a solution:
html, body {
width: 100%;
height: 100vh;
margin: 0px;
max-width: 50vh;
min-width: 500px;
min-height: 1000px;}
Does that make any sense haha?
Is there a way to modify how the fullscreen functionality of a video behaves in a browser? I would like to display the video on the left side of my screen and an image (actually a PDF) on the right side.
I have tried it with css in chrome:
video:-webkit-full-screen
And that gave me some results, but not the desired one. Should I create a custom action for this? And if so, how can I let the video break out of the borders of the browsers?
You should insert the <video> tag inside a <div> with a defined height and width with the following attributes:
.video-container {
position: relative;
height: auto;
width: 60%;
}
video {
width: 100%;
max-width: 500px; // Or whatever value on your choice
height: auto;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
With a width of 100%, the video would fill the entire browser space but limit how big it can be by setting a max-width or max-height for the resolution and the responsiveness. I hope that my answer helps you!
EDIT
To fit in properly inside a div, you have to assign to the container position: relative and position: absolute to the video itself. If you want to break out from the borders, then you have to tweak the dimensions of max-height and max-widthof the video.
Check this question, since it is similar to yours.
I am trying to achieve this "stupid" thing, but I can't find a solution.
I have a certain number of images one above the other, I would try to put background-color which is aligned vertically in the middle of the first and last image.
more difficult to explain than to understand, I made an image explanatory so I think it is more easy to understand
I tried to make a codepen, but without success http://codepen.io/mp1985/pen/BoEMPN
.bg {
background: red;
top: 25%;
position: absolute;
width: 100%;
height: 100%;
bottom:0;
left: 0;
right: 0;
z-index: 100;
backgrund-position: center center;
z-index: 1;
}
do you have any advice or suggestion?
You can't set the parent's height according to an absolutely positioned element. So you have to use fixed lengths rather than percentages.
.container {
height: 900px; // img-height * 4
}
Then, for the background color to align to the center of the first image, add this:
.bg {
top: 150px; // img-height / 2
}
As for horizontally centering the imgs, use
.box-images {
left: 50%;
margin-left: -300px; // img-width / 2
}
Well, I'm not sure I've understood but how you started isn't correct: you want your images at the center of the page, right? Well, to do that they must be positionated with
position: relative;
left:50%;
Then, you created a div as a background. There you can choose: you can create a dinamic background with JS, or add only a certain number of images with a certain known height. I guess you are creating a static page, so set the div with
position: relative;
min-height: 900px; //(imgNum-1)*imgHeight
top: 150px; //imgHeight/2
and with what you have already set.
If you have width problems, min-width and max-width are useful attributes.
In my mind it works. Please comment for issues and rate positive if useful
I'm pretty fresh to web development and cannot figure this one out. Appreciate any help!
On re-size the fixed div moves out of the container instead of re-sizing. The site I'm working on has the nav as the fixed section and is inside of the main container.
Any help is appreciated. Thanks!
<div class="container">
<div class="fixed"></div>
</div>
.container {
border: 1px solid;
max-width: 600px;
width: 100%;
min-height: 1600px;
}
.fixed {
max-width: 600px;
width: 100%;
height: 50px;
border: 1px solid green;
position: fixed;
}
http://jsfiddle.net/KqvQr/
When you specify position as fixed the Element, even thought it is inside a parent container, It won't behave as a child of a parent container. It won't adjust his width according to the parent width. But I can give you a solution where when user resize the page the fixed element also get resize yet it is a position fixed
.fixed {
height: 50px;
border: 1px solid green;
position: fixed;
right:0;
left:0;
}
Don't specify widths for the container. instead of that specify left and right values. so then when page is resizing css only check for the left and right margin values. by keeping those values it will adjust its inner width always.
Here is the working fiddle http://jsfiddle.net/KqvQr/5/
I don't think you can achieve what you want if you stick with that constraints. Your width and max-width will work as expected if you change your position to relative instead of fixed..
Check out this Fiddle
I am somewhat between new and intermediate at web designing / coding...
Here goes!
if you look at this :
http://jsfiddle.net/ZPufX/
the css indicates an auto scrollbar on the y axis.
the thing is that i am having problems making it to show up only when the text (multiple "some text" in the code) shows up, and morover, it is not even scrolling as it is...
any clue?
found the answer!!
in the propreties on the css file, go something like this :
div.example
{width: 960px;
height: 430px;
position: relative;
top: 90px;
left: 296px;
overflow: hidden;}
and then :
div.example
{width: 960px;
height: 430px;
position: relative;
top: 90px;
left: 296px;
overflow: scroll;}
this will cause the scrollbar to appear only when hovering over the box !
thanks to vimalnath for his help on the subject!
I just tried to change the position of the textbox to relative from absolute
Demo here:
fiddle