I got the following structure:
<header></header>
<main>
<card />
</main>
<footer></footer>
header {
height: 70px;
top: 0;
left: auto;
right: 0;
position: sticky;
width: 100%;
display: flex;
z-index: 1100;
box-sizing: border-box;
flex-shrink: 0;
flex-direction: column;
}
main {
height: calc(100vh - 130px);
display: grid;
place-items: center;
max-width: 600px;
padding-left: 24px;
padding-right: 24px;
width: 100%;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
}
card {
width: 100%;
padding: 40px 25px;
}
footer {
top: auto;
width: 100%;
bottom: 0;
height: 60px;
display: flex;
position: fixed;
justify-content: center;
}
The card actually is a login form with two inputs and has to be in the center of the screen. I used the main to wrap and center it. But now the problem is that on horizontal orientation and when the height is reduced to some pxs it is not possible to see the whole card. Part of it is covered by the footer. Any idea how I can center it and scrolling to be possible.
Here is my sandbox: https://codesandbox.io/s/recursing-meitner-ocgz9
add this to you'r body maybe youre problem solve
body {
min-height:100vh;
}
if you place it to a code pen, would be easier to help you.
I can only assume that if you change main to the below it might help:
main {
height: calc(100vh - 130px);
display: flex;
place-items: center;
max-width: 600px;
padding-left: 24px;
padding-right: 24px;
width: 100%;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
background: red;
}
Also check you have body { margin: 0 }. As browsers adds margin automatically, so your 100% layout does have extra height.
from the main container remove the height and add margin-bottom equals to the height of the footer.
paperContainer: {
display: "grid",
placeItems: "center",
marginBottom:'60px'
}
And to avoid some styling issues regarding height, add min-height if required.
Codesandbox demo
Got a very simple solution!!
paper: {
width: "100%",
borderRadius: "8px",
padding: "40px 25px",
paddingBottom: "100px"
},
just give the paddingBottom to the paper, you can also use it conditionally if the user is using mobile and the width of the view > height of the view. It looks fine without that too.
Check this out!!
sandbox link
let me know if you still have an issue.
Related
The code that appears below creates the following layout:
The important part is that the content, although centered on the screen when not overflowing, never overlaps the navbar and has its own scrollbar:
The problem is that this layout is achieved with the help of padding (marked by a comment in the code below), which results in the additional scrollbar on the right of the screen.
How can I design the same layout that would have only one scrollbar - the one in the content?
Please note that the solution should not break the following details:
The rounded corners and the shadow.
The title in the content block not participating in scrolling.
The image covering the whole scrollable content, so it scrolls together with the content.
In addition, it would be great if this can be achieved without as many nested div's as I have right now.
Edit: I am ready to go with the suggestion of #JHeth in the comments section. However, I would still be interested if someone can come up with an alternative design that does not rely on padding for centering.
Here is the code (CodePen):
* {
padding: 0;
margin: 0;
}
html {
font-size: 62.5%;
}
:root {
--navbar-height: 3rem;
}
.navbar {
width: 100%;
text-align: center;
font-size: 2rem;
line-height: var(--navbar-height);
background-color: lightgreen;
}
.centering {
position: absolute;
inset: var(--navbar-height) 0 0 0;
display: flex;
flex-direction: column;
align-items: center;
& .auto-margin {
margin: auto;
// For scrollable content
display: flex;
max-height: 100%;
padding-bottom: calc(var(--navbar-height)); // Causes scrolling
}
}
.content-block {
display: flex;
flex-direction: column;
.title {
font-size: 2rem;
position: sticky;
}
.content-outer-container {
display: flex;
flex-direction: column;
overflow-y: auto;
border-radius: 1em;
box-shadow: 0 1em 2em rgba(black, 0.4);
.content-container {
width: 300px;
overflow-y: auto;
.content {
position: relative;
padding: 1em;
&:before {
content: "";
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
background-position: center;
background-image:
url(http://www.freegreatpicture.com/files/147/18380-hd-color-background-wallpaper.jpg);
}
}
}
}
}
<div class="navbar">An Amazing Navbar</div>
<div class="centering">
<div class="auto-margin">
<div class="content-block">
<div class="title">My Title</div>
<div class="content-outer-container">
<div class="content-container">
<div class="content">
<h1>Line1</h1>
<h1>Line2</h1>
<h1>Line3</h1>
<h1>Line4</h1>
<h1>Line5</h1>
</div>
</div>
</div>
</div>
</div>
</div>
simply remove max-height:100%; to .centering .auto-margin and it'll works!
.centering .auto-margin {
margin: auto;
display: flex;
/* max-height: 100%; */
padding-bottom: calc(var(--navbar-height));
}
I know there are a LOT of examples of this, and I have tried all of them to no avail. I am trying to create a carousel component that resizes images according to its boundary. I am using it in a myriad of places, in a myriad of different ways, so it MUST be responsive. I also need the images to be clickable as normal images for a11y and customers (managing expectations).
Here is my fiddle so far: https://codepen.io/skamansam/pen/NWvroeY?editors=1100
I can get all of the elements to resize accordingly (using max-width/height). when I use an image that is wider than taller, all works well. When I use an image that is taller than wider and exceeds the height of the box, the image overflows instead of respecting the max-width/height properties.
The most common answer involves wrapping the image in an html element and setting the width/height there, which I have done, but it doesn't solve the problem. Another common answer involves using combinations of position values, which didn't give any better results than I already have. Using the inspector, you can clearly see that all the elements EXCEPT the image are correctly sized, and the image overflows the container.
Is there any other way to get the img tag to respect height: 100% in the same way it respects width: 100%?
you are using image with a very high resolution (500x800) , you have use little lower resolution otherwise you have to use overflow:hidden; on your wrapping div.Using max-width:100%; the image is already resizing itself but cannot resize further more, inspect the element to get a better understanding.
I made three changes:
Your slide needs width: auto; and height: 100%;
Your image needs width: 100%; and height: 100%;
Your image needs object-fit: contain; (not cover)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.jumbotron {
display: block;
width: 100%;
margin: 0;
padding: 0;
background-color: #aaa;
/* overflow: hidden; */
height: 150px;
}
.jumbotron .container {
width: 100%;
height: 100%;
}
.my-carousel {
background-color: #77f;
max-height: 100%;
max-width: 100%;
height: 100%;
width: 100%;
display: flex;
flex-direction: row;
// overflow: hidden;
}
.my-carousel .previous-btn, .my-carousel .next-btn {
font-size: 200%;
padding: 0px 10px;
display: flex;
flex-direction: column;
justify-content: center;
}
.my-carousel .content {
max-height: 100%;
max-width: 100%;
align-self: center;
flex-grow: 1;
position: relative;
width: 100%;
height: 100%;
}
.my-carousel .content .slide {
height: 100%;
//max-width: 100%;
display: none;
position: relative;
// width: 100%;
vertical-align: middle;
padding: 0px;
margin: 0px;
overflow: visible;
}
.my-carousel .content .slide.active {
display: block;
}
.my-carousel .content .slide img {
//position: relative;
// margin: 0px auto;
// box-sizing: border-box;
// vertical-align: middle;
height: 100%;
width: 100%;
// max-width: 100%;
// max-height: 100%;
object-fit: contain;
object-position: center;
overflow: hidden;
}
.my-carousel .content .slide .caption {
position: absolute;
background-color: rgba(0,0,0,.4);
text-shadow: 2px 2px 4px #fff, -2px -2px 4px #fff;
stroke: 2px #fff;
padding: 10px;
bottom: 0px;
width: 100%;
font-size: 150%;
// color: #000;
// -webkit-text-stroke-width: 1px;
// -webkit-text-stroke-color: #fff;
}
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#6.3.95/css/materialdesignicons.min.css" rel="stylesheet"/>
<main role="main">
<section class="jumbotron text-center">
<div class="container">
<div class="my-carousel">
<div class="previous-btn">
<span class="mdi mdi-transfer-left"></span>
</div>
<div class="content">
<div class="slide active">
<img src="https://picsum.photos/500/800?random=1" />
<div class="caption">This is only a WIP to figure out how to style this carousel properly.</div>
</div>
<div class="slide">
<img src="https://picsum.photos/1000/400?random=1" />
</div>
</div>
<div class="next-btn">
<span class="mdi mdi-transfer-right" />
</div>
</div>
</div>
</section>
</main>
luckily, the answer is inside "picksum" itself, it allows you to choose the resolution of the image you want, you chose (500x800) that is way too large, you can use the following reduced resolutions >(50x80), (100x160), (180x288), (190x304), (200x320). I am sure you will get your desired result by using (180x288) or (190x304)
for example:<img src="https://picsum.photos/190/304?random=1" />
Use max-width and max-height
Like this
.slide {
width: 100px;
height: 100px;
max-width: 100%;
max-height: 100%;
overflow: hidden;
}
.slide .img {
max-width: 100%;
max-height: 100%;
}
I have a weird problem, I am pretty bad with CSS therefor I come up with this exercise where I want to build a image slider, which is inside a div called slider-div with width of 1000px, from a array, 10 images are loaded into the div and only 5 are visible so the user have to scroll.
To learn more I added two buttons which should scroll 100px (left or right),
I have a problem with those buttons, they stick to the parent slider-div / Background. I hoped they would always stay on the top and don't move. User can decide to scroll to the end or hit the buttons.
I am using display: flex; flex-direction: row; to get the images into a row.
How can I fix button to the visible edge of a div?
Only solution I worked out is:
position: fixed;
right: 33.6%;
but it is very unprofessional :( also bad when I changing the layout somewhere else.
Can you please look over and tell me where the mistake is what is missing?
Here is the link to codepen:
https://codepen.io/miomate/pen/pBQBya
Code:
.div-1 {
max-width: 1000px;
height: 200px;
overflow-x: scroll;
overflow-y: hidden;
position: absolute;
}
button{
/* position: absolute; */
top:35%;
}
.images {
display: flex;
flex-direction: row;
list-style: none;
margin: 0;
padding: 0;
}
.x {
position: absolute;
top: 30%;
}
.div-2-1{
}
.div-2-2{
right: 0;
}
The images aren't loaded but the result ist the same.
Thank you very much.
This is my solution using the "bottom" property of css.
body {margin: 0 0 0 0;}
.div-1 {
max-width: 1000px;
height: 300px;
overflow-x: scroll;
overflow-y: hidden;
position: relative;
}
.images {
display: flex;
flex-direction: row;
list-style: none;
margin: 0;
padding: 0;
}
.x {
position: absolute;
bottom: 0;
}
.div-2-1{
left:0;
}
.div-2-2{
right: 0;
}
I built a modal page that acts like a custom alert. I needed to add an image to the alert so I followed this to make the custom alert window: How to make customized alert in ionic 2?
The problem is that the modal is stretched to fit screen height. Is there a way to make it always fit its own content height? So the height is the minimum it has to be?
this is the scss for the page:
modal-alert.scss
page-modal-alert {
background-color: rgba(0, 0, 0, 0.5);
ion-content.content{
top: 10%;
left: 10%;
width: 80%;
height: 375px; // <-- fixed
//height: 75%; // <-- will stretch to screen size
border-radius: 10px;
.scroll-content {
border-radius: 20px;
}
}
}
Page template:
modal-alert.html
<ion-content padding>
<img src="assets/img/20pointsBox.png">
<div>
<p>{{ text }}</p>
<ion-buttons>
<button full ion-button color="secondary" (click)="dismiss()">
OK
</button>
</ion-buttons>
</div>
</ion-content>
Edit:
When the class from above is set the modal, it looks like this (but with an image, text and one button):
Text and image contents are dynamic, I change them in run-time so sometimes the fixed height of this modal does not match the actual height of its content.
Is there a way to make the modal height fit to the total height of its contents?
Just add 'auto-height' cssClass and add this css to your global.scss:
ion-modal.auto-height {
&.bottom {
align-items: flex-end;
}
--height: auto;
.ion-page {
position: relative;
display: block;
contain: content;
.inner-content {
max-height: 80vh;
overflow: auto;
padding: 10px;
}
}
}
Change <ion-content></ion-content> to <div class="inner-content"></div>
For example your Profile Page has the Update Profile Modal.
Let's add custom class to your modal when you are creating it as
const modal = this.modalCtrl.create(UpdateProfilePage, {}, {
cssClass: 'update-profile-modal'
}
Now this model is not inserted in the dom as child of Profile Page.
So below code in profile.scss will not work
profile-page{
.update-profile-modal .modal-wrapper{
min-height: 400px;
height: auto;
}
}
So one way to solve it to add the same code the **app.scss **
.update-profile-modal .modal-wrapper{
min-height: 400px;
height: auto;
}
My personal favorite way to do this si to use a card and then set your Modal component's <ion-content> background to transparent.
After a lot of trouble, I did this, you can custom your own variant but it basically perfectly works (IN IONIC 3, please someone check and update for ionic 4 too):
ion-modal {
#media (min-height: 500px) {
ion-backdrop {
visibility: visible;
}
}
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: $z-index-overlay;
display: flex;
align-items: center;
justify-content: center;
contain: strict;
.modal-wrapper {
&,
.ion-page,
.ion-page .content,
.ion-page .content .scroll-content {
contain: content;
position: relative;
top: auto;
left: auto;
padding: 1px;
}
z-index: $z-index-overlay-wrapper;
display: flex;
overflow: hidden;
flex-direction: column;
min-width: $alert-min-width;
max-height: $alert-max-height;
opacity: 0;
height: auto;
/*
max-width: $alert-md-max-width;
*/
max-width:600px;
border-radius: $alert-md-border-radius;
background-color: $alert-md-background-color;
box-shadow: $alert-md-box-shadow;
border-radius: 5px;
padding: 5px;
.ion-page .content {
background-color: color($colors, light);
}
.ion-page{
overflow-y: auto;
}
}
}
Page is here
I am using a sticky footer, which works fine everywhere but my portfolio page. The gallery is relatively positioned, and is overflowing from it's parent div. The footer is sticking to the bottom of the parent, rather than the page.
Help? Preferably in a way where I don't have to rewrite all my code?
Please try this one i hope it will helpful to you.
html, body {
height: 100%;
}
header {
background: #fff;
position: relative;
z-index: 100;
}
.content2 {
clear: both;
margin: 0 auto;
padding: 0;
text-align: center;
width: 70%;
}
.gallery {
display: table;
height: 100%;
margin-left: auto;
margin-right: auto;
margin-top: auto;
position: relative;
width: 100%;
}
#footer-block {
bottom: 0;
position: fixed;
width: 100%;
}
Thanks
Fixed it by coding body and html to 110% height, footer wrapper to 100% height, and adding page wrapper with 100% height.