I need to create a sort of overlay to display forms that need more space in the mobile version of my webapp.
I'm trying to use ngx-bootstrap modal for that but even after using the means they offer to customize this component, I still cannot get the result I want.
This is how I applied a custom class for the modal:
ngx-bootstrap.component.ts
goToReportOne() {
// ...
this.bsModalRef.setClass('full-screen-modal');
// ...
}
The problem is more obvious when I rotate the device (landscape mode). To make the issue clearer I assigned a different color to each section.
The blue one(the custom style applied to the modal) can be found in
styles.css
.full-screen-modal {
height: 100vh !important;
width: 100vw !important;
position: fixed;
top: 0;
left: 0;
margin: 0;
background-color: blue;
}
The other two colors, green and orange are applied to the component I display in the modal and host container respectively
modal-one.component.scss
:host {
width: 90vw;
height: 90vh;
background-color: orangered;
}
.report-one {
background-color: green;
width: 20rem;
height: 20rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
I know I can easily set the width and height to 100 in the :host selector but I want to know:
1) Why doesn't the modal (in blue) occupy whole screen
2) Why is it that for the orange section applying 100% for its height and width doesn't work. Only 100vh and 100vw would make it occupy the entire screen
Here's a demo in stackblitz
Thanks
Related
I'm trying to replicate the way these images change on this website when you shrink the screen https://sweetbasilvail.com/
I went ahead and added the css I saw from their site, but it still is just shrinking my image on mobile instead of doing of this site is doing
.hero {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #211f1f;
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-size: cover;
background-position: center;
}
So I have this image that I want to be the background for my entire home screen, but if I use this code below and shrink it to mobile, it basically squishes the image.
img {
width: 100vw;
height: 100vw;
}
And on mobile it ends up looking like this
If I use the regular responsive css, it shrinks the image and ends up leaving a huge white space below
img {
width: 100%;
height: auto;
}
So I'm not sure how to display an image as the entire background without sacrificing the quality of the image or distorting the way it looks. Is it normal to just have the image shrink on mobile? or is there a proper way when using a full image background?
Note the 2nd image with the giant white space is what the original image is supposed to look like at 100% width;
Use background-size: cover
#bgimg{
height: 100vh;
width: 100vw;
background-image: url(https://placekitten.com/1000/500);
background-size:cover;
background-position: center;
}
<div id='bgimg'></div>
You want to keep the proportions, so you use width: 100% on a div and change its background image. This is much easier to manipulate than an HTML img tag.
Quick code snippet on CodePen (https://codepen.io/ma-henderson/pen/eYzGwJe?editors=1100)
<div class="container">
<header class="header">
<nav class="header__nav-item">Our Menu</nav>
<nav class="header__nav-item">Our Concept</nav>
<nav class="header__nav-item">Locations</nav>
</header>
<div class="hero"></div>
<footer class="footer">
<nav class="footer__nav-item">Gallery</nav>
<nav class="footer__nav-item">Special Events</nav>
<nav class="footer__nav-item">Catering</nav>
</footer>
</div>
.container {
posiiton: relative;
}
.header{
position: absolute;
top: 0;
left: 0;
width: 100vw;
padding: 1rem 0;
z-index: 3;
color: white;
background: rgba(0,0,0,.3);
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.hero{
background-image: url("https://images.unsplash.com/photo-1572116469696-31de0f17cc34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1934&q=80");
/* I've added the below line to keep it always centered regardless of viewport width, change it to your liking, you can google "background-position w3 schools" for more info */
background-position: 50% 50%;
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.footer{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 1rem 0;
z-index: 3;
color: white;
background: rgba(0,0,0,.3);
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
You have two options, depending on exactly what your use case is.
If you'd like the img to fill the entire screen but without distortion you can use object-fit: cover. Of course, with this if the image is very wide compared to height you will get some bits cropped from the left and right in portrait mode, and conversely top and bottom in landscape mode - but in either case the screen will be covered.
If it's important that the user sees the whole of your image regardless of its aspect ratio in relation to the viewport aspect ratio then use object-fit: contain. This will result in some space either to the sides or the top and bottom of the image depending on how its aspect ratio compares to the viewport's.
object-fit is quite widely available on browsers, but not on any version of IE.
Note: for background-image as opposed to img use background-size: cover or contain.
Doing that is not really ruining the quality, it's stretching it because that is what you are telling it to. The second option is normal, you just want to probably fill it up with content below so that its not white space. But that doesn't fill up the entire screen.
You probably want to use a media query so that the browser detects when the user is on mobile, then you can crop the sides of your image to make it fit without stretching it, either manually using something like Photoshop, or with CSS, which is answered here on how to do it: How to automatically crop and center an image
want to show 1 static page contain everything without a scroll
tried to make boddy padding 0 and overflow: hidden but nothing work
also tried the below page-header and background-image code also not work
display: flex!important;
flex-direction: column!important;
min-height: 1vh!important;
}```
```.background-image {flex-grow: 1!important;}
1 page with cover image and footer info, dont know what i am missing to fix that
If you set the body to have an overflow-y of hidden in css it will not allow the user to scroll down the page.
body {
overflow-y: hidden;
}
Go for the root html element, you can style it to:
html {
height: 100%;
width: 100%;
overflow: hidden;
}
The browser will interpret this as the html would use 100% of the usable device width space and hide the rest.
You probably don't want to avoid scrolling but instead make the page elements fit on the screen so there is no scrollbar and still everything is visible.
As a start, you could make the .main class (which only contains your footer) absolutely positioned at the bottom and take it from there
.main {
position: absolute;
bottom: 0;
width: 100%;
}
or, what I'd prefer, set the wrapper to be a flexbox:
UPDATED
body.home {
height: 100%;
overflow: hidden;
}
body.home .wrapper {
display: flex;
flex-direction: column;
}
/* Not needed anymore */
body.home .carousel {
}
body.home .main {
}
How can I get all elements to fit in a container element that is fixed to the size of the window?
I have a container element that is fixed position and flexbox, it does not stay within window. The menu is 50px and I want the main element to fill the remainder of the window height.
I have a container my-app and inside it, 2 vertically stacked elements (flex-direction = column). It works as expected in Chrome but not Edge or Firefox.
my-app {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
app-menu {
border-bottom: 2px solid black;
width: 100%;
height: 50px;
background: lightcoral;
box-sizing: border-box;
}
app-my-view {
display: flex;
flex: 1;
width: 100%;
background: lightgreen;
}
https://stackblitz.com/edit/2-column-scroll-v2
I've got it working by using a fixed position menu sticking to the top and using padding to offset menu height in the main content area. However I thought it would be better to use approach with 2 stacked elements without using fixed menu .
See here: https://stackblitz.com/edit/2-column-scroll-v1
This is yet another question about centering vertically in a div, but I've tried lots of the solutions discussed in other answers to no avail.
Here's an example of the code to play with: https://codesandbox.io/s/z2qzxwk99x
The arrow-icon is centering vertically in the viewport, instead of the viewer-wrapper div. As such, it drops off of the image completely, instead of staying centered vertically, if you make the page very narrow.
.viewer-wrapper {
background-color: #1b8dbb;
position: relative;
}
.arrow-wrap {
position: absolute;
max-height: 100%;
line-height: 95vh;
background-color: #4cae4c;
margin: auto;
opacity: .9;
left: 0px
}
.arrow-icon {
background-color: orangered;
}
.comic-page {
object-fit: contain;
max-height: 95vh;
width: 100%;
}
<div className="viewer-wrapper">
<div className="arrow-wrap">
<LeftArrow className="arrow-icon" size={75} />
</div>
<img className="comic-page"
src="http://assets-production.rovio.com/s3fs-public/hatchlings_0.jpg"
about="This is an image"
/>
</div>
The magic here is Flexbox (and Grids, but Flexbox has way better browser support). Keeping the same HTML layout, you could use somerthig like:
.viewer-wrapper {
background-color: #1b8dbb;
display: flex;
align-items: flex-start;
}
.arrow-wrap {
background-color: #4cae4c;
margin: auto;
opacity: .9;
}
.arrow-icon {
background-color: orangered;
}
.comic-page {
object-fit:contain;
min-height: 100%;
max-width: 100%;
}
Depending on how much support you need of IE, there are different ways to accomplish vertical alignment.
If you don't have any need to support IE, you could use the flex display property:
.viewer-wrapper{
display: flex;
align-items: center;
}
or, continue with what it looks like you're trying to do. What your missing to do so is the top: property. Since you've already correctly made the parent element position: relative, setting top: 50% will set your arrow to begin halfway down the viewer-wrapper element. From here you need to set a negative margin to correct for the arrow's height. Since it looks like you specify a size of 75(px?), you can achieve this like:
.arrow-wrap {
position: absolute;
background-color: #4cae4c;
margin-top: -37.5px;
left: 0px;
}
You shouldn't have to set any other margins.
A great resource for this, and what I used to help answer you, is howtocenterincss.com.
I'm trying to make a chat layout. So i have 3 divs, activeUSer - top, messages middle (has to fill the space between 1 and 3), actions - bottom
Now, I've put flex-direction row. and it works fine. I needed the bottom div to grow if the input grows (if you have 2 or more lines of writing)
It worked ok untill I added display:flex to the Actions div (bottom). I needed another flex layout for input and buttons. Now it does not care for the padding i've set on the last div
Here is my codepen https://codepen.io/capraruioan/pen/XKWxrV
#content {
height: 300px;
display: flex;
flex-direction: column;
}
.activeUser {
height: 66px;
background-color: yellow;
}
.Messages {
flex: 1 1 100%;
}
.Actions {
flex-grow: 1;
display: flex;
padding-top: 2px;
padding-bottom: 20px;
}
.aa { //the inputbox
border: 1px solid black;
min-height: 10px
}
fixed it by letting display default on the 3rd div and placing a div with display flex inside