I am building a website to be used on a mobile phone. The css is very straight forward however I can't seem to get the text to align in the same place vertically. Some browsers the text will appear completely at the bottom of the screen, other browsers show the text slightly above my footer (3rem), others show the browser maybe 6 rem from the bottom.
Mobile.js
const Mobile = () => {
return (
<div className={style.app}>
<div className={style.mainContent}>
<div className={style.address}>128 W 2nd St, Winona, MN 55987</div>
</div>
</div>
);
};
css
html,
body {
margin: 0;
/* height: 100% */
}
.app {
height: calc(100vh - 8rem);
width: 100vw;
background-size: cover;
display: flex;
justify-content: center;
margin-top: 5rem;
margin-bottom: 3rem;
position: relative;
}
.mainContent {
color: white;
width: 100%;
/* display: flex;
align-self: flex-end; */
margin-bottom: 1.5rem;
margin-left: 1rem;
position: absolute;
bottom: 3rem;
left: 0;
}
Now I have tried a bunch of different things such as using flex-end on .mainContent, and using a larger margin-bottom. I am really not sure whats going on here because the css looks very simple to me.
Related
TL;DR: How to keep the div children proportional to the div itself?
I have a div, containing various elements like text, images, icons etc. It keeps 16:9 aspect ratio and fills as much viewport it can, while resizing the browser window, the div (with background different from the body background) changes size well, though the contents are staying the same size which is bad because I'm trying to make a presentation website which needs to look the same at various resolutions. How do I make the child elements align and resize properly inside the div?
I tried using viewport units though it didn't turn out really well.
My Code:
I tried using % units to set font size and then use em to scale other things but it didn't work. I also tried using only % units to set all properties but it did not work either
body {
background: black;
user-select: none;
margin: 0;
height: 100vh;
}
.container2 {
overflow: auto;
box-sizing: border-box;
resize: both;
overflow: auto;
max-width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
.presentation-place {
user-select: none;
background: white;
top: 50%;
transform: translate(0, -50%);
position: absolute;
align-items: center;
aspect-ratio: 16 / 9;
}
#media screen and (max-aspect-ratio: 16 / 9) {
.presentation-place {
width: 100vw;
}
}
#media screen and (min-aspect-ratio: 16 / 9) {
.presentation-place {
height: 100vh;
}
}
.slide {
font-size: 100%;
position: absolute;
top: 0;
bottom: 0;
margin: 0 auto;
width: 100%;
height: 100%;
overflow: hidden;
background: red;
background-position: center center;
}
.title1 {
margin-left: 1em;
font-size: 6em;
position: absolute;
margin-top: 2em;
}
<html>
<body>
<div class="container">
<div class="presentation-place">
<div class="slide s1">
<h1 class="title1">test</h1>
</div>
</div>
</div>
</body>
</html>
Make sure to avoid specific units like cm, px etc because those are fixed units no matter the scale of the site itself or the monitor, the use of Units like % since vh/vw didnt work. % scales relative to the size of the monitor or website, so this should help. Alternativly you could use aspect-ratio because it scales relative to the size of the parent element
Good day.
Please consider next simple code:
<div className="box-and-clock">
{isBoxShown && (
<div className="box">
{value}
</div>
)}
<img
onMouseOver={() => setIsBoxShown(true)}
onMouseOut={() => setIsBoxShown(false)}
src={clockIcon}/>
</div>
So I've got following layout (I've cut some redundant data)
When user points at the clock icon he sees some data.
The problem is when there is more data in the black box the arrow (which is done by pseudoelements) doesn't point to clock icon anymore. Something like this
I need to make that blackbox to be on certain position from the clock icon without depending on its height.
I've tried display: table to the parent div and display: table-cell to the child, but with no luck. any advices?
My css
.box {
width: 200px;
min-height: 130px;
height: auto;
background: black;
border-radius: 2px;
position: absolute;
top: 320px;
right: 228px;
}
.box-and-clock {
display: flex;
flex-direction: column;
}
you can set parent element with css position: relative; to let children identity its position, so children element can use position: absolute; to place itself relative to its parent's position.
.box {
width: 200px;
min-height: 130px;
/* height: auto; */
background: black;
border-radius: 2px;
/* top: 320px; */
/* right: 228px; */
position: absolute;
top: 0px;
transform: translateY(-100%); /* offset element */
}
.box-and-clock {
display: flex;
flex-direction: column;
position: relative; /* you need this! */
}
ps, for more detailed concept of css position, you may keyword search: css position property
I have created a horizontal scroll container with <HTML/> and CSS:
body {
background-color: #212121;
}
.scroll_container {
height: 100px;
width: 400px;
display: flex;
align-items: center;
overflow-y: hidden;
width: 100%;
height: 20%;
}
.scroll_container_sub {
height: 100px;
min-width: 230px;
float: none;
display: inline-block;
zoom: 1;
margin: 10px;
border: solid 1px transparent;
border-radius: 15px;
background-color: #fff;
}
<div class="scroll_container">
<div class="scroll_container_sub"></div>
<div class="scroll_container_sub"></div>
<div class="scroll_container_sub"></div>
</div>
What I try:
Is it possible that every time one item (scroll_container_sub) is centered in the scroll_container? Especially for mobile use, this is very good.
EXAMPLE:
After the scroll the middle item gets centered horizontally:
(image: mobile view)
That means that things like this should not exist:
Because none of the containers are centered. When I look at a scroll position like this the scroll view should center one of the containers.
For hopefully more detail: :)
In the following link, you see what I try to achieve. Look only at the few seconds in the beginning.
The cards are centered every time after the user swiped. Exactly what I try to achieve:
https://www.youtube.com/watch?v=UsXv6VRqZKs Do you need a live example? No Problem. In the Google Play Store, you find them. For example this swiper:
~filip
2022 edit: unless you need to support old browsers, scroll-margin is now the way to go.
JS implementation and theory follows:
The general formula is as following - you find your element of interest, find its middle point (x + width / 2), then subtract half of container's width from that:
window.addEventListener("load", function(e) {
var container = document.querySelector(".scroll_container");
var middle = container.children[Math.floor((container.children.length - 1) / 2)];
container.scrollLeft = middle.offsetLeft +
middle.offsetWidth / 2 - container.offsetWidth / 2;
});
body {
background-color: #212121;
}
.scroll_container {
height: 100px;
width: 400px;
display: flex;
align-items: center;
overflow-y: hidden;
position: relative;
width: 100%;
height: 20%;
}
.scroll_container_sub {
height: 100px;
min-width: 230px;
float: none;
display: inline-block;
zoom: 1;
margin: 10px;
border: solid 1px transparent;
border-radius: 15px;
background-color: #fff;
}
<div class="scroll_container">
<div class="scroll_container_sub"></div>
<div class="scroll_container_sub"></div>
<div class="scroll_container_sub"></div>
</div>
If you want to dynamically apply this effect, you would want to wait until the user is done scrolling, calculate the new scroll destination, and ease towards that over time.
Objective:
I would like the Header, Tab Section, and the Radio Button Section to be fixed in a form (see image below). Meaning that they should always be in view, and never have any overlapping elements.
The form looks like the following:
This is working fine when I simply scroll down on the form:
The Problem:
When I open the Angular Material dropdown, it overlaps over the Radio Button Section:
Here is the HTML. The highlighted sections are the elements that I want to be fixated on the form:
And here is the CSS for the 3 sections
//Header:
.module__header {
position: fixed;
top: 0px;
z-index: 1001;
display: flex;
height: 35px;
width: 100%;
background-color: #082749;
color: #FFFFFF;
font-size: 14px;
font-weight: 500;
align-items: center;
justify-content: stretch;
padding: 0;
margin-bottom: 0;
}
// Tab Section:
.mat-tab-label-container {
position: fixed;
top: 35px;
padding-top: 10px;
z-index: 1001;
width: 100%;
background: #fff;
}
// Radio Button Section:
.timaticFullTextView {
padding-top: 35px;
padding-left: 15px;
padding-bottom: 15px;
background: #fff;
z-index: 1001;
position: fixed;
width: 100%;
border-bottom: 1.5px solid gray;
}
I have tried changing the cdk-overlay-container to a z-index of <1001, but that still is overlapping the Radio Button Section.
How can I have the opened dropdown display underneath all 3 sections?
Edit: Adding screenshot to show the cdk-overlay that is giving issues. I have tried removing and lowering the z-index, but it doesn't have any effect
The problem is that mat-tab-body has z-index: 1 and this won't allow your fixed view inside to have a higher elevation. You can remove the z-index from mat-tab-body put then your content without a z-index won't be clickable anymore so you have to add a z-index and position to your not fixed content.
The code would have to look something like this:
<mat-tab>
<mat-tab-body> <!-- <-- added automatically -->
<div class="tab-header"></div>
<div class="tab-content"></div>
</mat-tab-body>
</mat-tab>
::ng-deep mat-tab-body {
z-index: unset !important;
}
.tab-header {
position: fixed;
z-index: 1001;
}
.tab-content {
position: relative;
z-index: 1;
}
You've found the right element whilst applying styles to the wrong one.
Here is how I made it work
.cdk-global-overlay-wrapper, .cdk-overlay-container {
z-index: 99999 !important;
}
Running the following code snippet will provide a framework for what I am visually hoping to accomplish, with some concessions made in the CSS that I'd like to remove:
body {
height: 100vh;
margin: 0;
}
.container>* {
height: 100%;
width: 100%;
flex: 0 0 50px;
}
.container {
width: 100%;
height: 100%;
background-color: black;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.header {
background-color: red;
}
.content {
background-color: blue;
flex: 1;
position: relative;
}
.footer {
margin-top: auto;
background-color: yellow;
}
.fixedRatio {
height: 56.25vw;
max-height: calc(100vh - 100px);
width: calc((100vh - 100px) * (1/0.5625));
;
max-width: 100vw;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
<div class="container">
<div class="header"></div>
<div class="content">
<div class="fixedRatio"></div>
</div>
<div class="footer"></div>
</div>
Included are a header and footer of arbitrary height and a fixed aspect ratio box centered vertically and horizontally between them. I'd like it to letter- and pillar-box as the page is resized, and respond to increases/decreases in header height.
As it stands, the code accomplishes many of these goals but falls short in that it requires that the heights of the header and footer be included in the CSS for the fixed aspect ratio box. This limits my ability to freely manipulate the size of the header, or let it grow arbitrarily as a function of content (at least to the extent I am not using JavaScript).
I've managed to make this work successfully for the case of letter-boxing (top and bottom black bars) by leveraging the fact that the content is full-width. As a result, I can use 100vw / 56.25vw (in the case of 16:9) for the width/height and achieve the desired result. Unfortunately, when moving the content around to pillar-box, this obviously falls apart.
I've more or less resigned myself to needing JavaScript to - at the very least - toggle a class based on the dimensions of the inner content box to determine whether letter or pillar boxing is appropriate. However, it became very clear very quickly that setting width as a function of height is not trivial.
I was fortunate to come across this post, where a solution leveraging a 1x1 pixel is used to set width as a function of height.
I was able to successfully make this work for the pillar-boxing case in both Chrome and Safari, but not Firefox (IE11 and Edge not yet tested, but coverage is desired... pray for me). I'd like to get recent versions of Chrome/Safari/Firefox covered, as well as I11/Edge if possible.
The solution for Chrome/Safari is as follows:
body {
height: 100vh;
margin: 0;
}
.header,
.footer {
height: 100%;
width: 100%;
}
.container>* {
flex: 0 0 50px;
}
.container {
width: 100%;
height: 100%;
background-color: black;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.header {
background-color: red;
}
img {
display: block;
height: 100%;
background: orange;
}
.content {
background-color: blue;
flex: 1;
position: relative;
overflow: hidden;
height: 100%;
display: inline-block;
left: 50%;
transform: translateX(-50%);
}
.footer {
margin-top: auto;
background-color: yellow;
}
.fixedRatio {
background-color: purple;
position: absolute;
left: 0;
top: 0;
right: 0;
margin: auto;
bottom: 0;
}
<div class="container">
<div class="header"></div>
<div class="content">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
<div class="fixedRatio"></div>
</div>
<div class="footer"></div>
</div>
There are a few things to consider. I am comfortable with fixing the height of the footer. This constraint may prove valuable, but I've been unable to yield anything from it yet. I am also comfortable with radical alterations to the included markup, supposing it enables the desired behavior.
The end-purpose of this would be to maintain fixed aspect ratio content between this flexible header, static footer, and overlay content upon it.
I am well aware that I could run some JavaScript and set these heights manually with great success, but I am coming at this from a position largely based in intellectual curiosity. If you, too, are curious, perhaps you can lend a hand in exploring :)
Thank you!