In React Native, I have a box with an absolute position, and I'm placing another box after it. The only way that I know how to do this in CSS is by using a pseudo element like in this fiddle and this:
CSS:
#parent {
width: 500px;
height: 500px;
background-color: white;
border: 2px solid blue;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
#parent::before {
content: '';
width: 60%;
height: 60%;
}
#div1 {
background: green;
width: 30%;
height: 30%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
#div2 {
background: red;
width: 30%;
height: 30%;
}
HTML:
<div id="parent">
<div id="div1"></div>
<div id="div2"></div>
</div>
So how can I do the same thing in React Native? Can I have a pseudo element?
Related
I want to make this layout with CSS:
The <video> (its aspect ratio and size may change) should be centered vertically and horizontally in the container with the black background (the size of the container may also change). The <button> should be centered in the remaining space on the right side of the <video>. If there is no space left for the button, it should overlay the <video>.
What I currently have is this:
div {
background-color: black;
position: relative;
resize: both;
overflow: hidden;
}
video {
display: block;
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
video:focus {
outline: none;
}
button {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 16px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
border: 5px solid white;
}
<div style="height: 200px; width: 700px;">
<video src="https://static.videezy.com/system/protected/files/000/019/696/pointing_blue.mp4" autoplay muted loop></video>
<button></button>
</div>
but I don't know how to center the button
Keywords:
Add elements (.button-spacer) on both sides of the video to claim the width needed for a button.
Center and space everything evenly using flex layout.
Use absolute positioning on the button to keep it on-screen even if there isn't enough room next to the video.
.player {
display: flex;
flex-flow: row nowrap;
justify-content: space-evenly;
background-color: black;
resize: both;
overflow: hidden;
}
video {
display: block;
max-width: 100%;
max-height: 100%;
align-self: center;
}
video:focus {
outline: none;
}
.button-spacer {
flex: 1 1 auto;
max-width: 50px;
position: relative;
display: flex;
align-items: center;
background: maroon;
}
button {
position: absolute;
right: 0;
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
border: 5px solid white;
cursor: pointer;
}
<div class="player" style="height: 120px; width: 400px;">
<div class="button-spacer"></div>
<video src="https://static.videezy.com/system/protected/files/000/019/696/pointing_blue.mp4" autoplay muted loop></video>
<div class="button-spacer">
<button></button>
</div>
</div>
Flex (again) and a pseudo can help you without position :
div {
background-color: black;
position: relative;
resize: both;
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-evenly;
}
video {
display: block;
max-width: 100%;
max-height: 100%;
margin: 0 -50px;
}
video:focus {
outline: none;
}
div:before {
content: '';
width: 50px;
margin: -100px;
}
button {
box-sizing: border-box;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
border: 5px solid white;
margin: -100px;
}
<div style="height: 200px; width: 700px;">
<video src="https://static.videezy.com/system/protected/files/000/019/696/pointing_blue.mp4" autoplay muted loop></video>
<button></button>
</div>
You can fix the problem by editing it from right: 16px; to right: 9%; in the button{} line 4.
I hope it fixes your problem
<style>
div {
background-color: black;
position: relative;
resize: both;
overflow: hidden;
}
video {
display: block;
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
video:focus {
outline: none;
}
button {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 50%;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
border: 5px solid white;
}
</style>
<div style="height: 200px; width: 700px;">
<video src="https://static.videezy.com/system/protected/files/000/019/696/pointing_blue.mp4" autoplay muted loop></video>
<button></button>
</div>
For a picture preview I want to put 2 invisble divs (red/blue in the picture) in front of a picture for next/previous image functionality.
I would like to have the div ("pictureContainer"/ green bordered zone) to automatically take over the dimension of the containing picture but I can't find a PURE CSS solution without setting the width and the height manually.
.container {
position: fixed;
width: 100%;
height: 100%;
border: 3px solid black;
}
.pictureContainer {
/* I don't want to set width and hight manuyally.
The container should have the size if the contained image. */
height: 50%;
width:300px;
position: relative;
margin: auto;
border: 3px solid green;
}
.leftSide {
background-color: blue;
float: left;
height: 100%;
width: 50%;
opacity: 80%;
}
.rightSide {
background-color: red;
float: right;
height: 100%;
width: 50%;
opacity: 80%;
}
.picture {
position: absolute;
top: 0;
left: 0;
margin: auto;
z-index: -1;
}
<div class="container">
<div class="pictureContainer">
<div class="leftSide"></div>
<img class="picture" src="https://www.9skips.com/wp-content/uploads/2018/01/anger-300x300.jpg">
<div class="rightSide"></div>
</div>
</div>
Also the container should be horizontally aligned.
Note: The full screen white div with the black border is used to close the picture preview.
You should change so the divs have absolut: position, let the image have it's natural size, container should be display: inline-block;
.container {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
width: 100%;
height: 100%;
border: 3px solid black;
}
.pictureContainer {
position: relative;
display: inline-block;
margin: 0 auto;
border: 3px solid green;
}
.picture {
display: block;
}
.leftSide {
position: absolute;
top: 0;
bottom: 0;
left: 0;
background-color: blue;
width: 50%;
opacity: 80%;
z-index: 1;
}
.rightSide {
position: absolute;
top: 0;
bottom: 0;
right: 0;
background-color: red;
height: 100%;
width: 50%;
opacity: 80%;
z-index: 1;
}
<div class="container">
<div class="pictureContainer">
<div class="leftSide"></div>
<img class="picture" src="https://www.9skips.com/wp-content/uploads/2018/01/anger-300x300.jpg">
<div class="rightSide"></div>
</div>
</div>
I am trying to give one of my container divs rounded edges, using the border-radius property. However, when I do this, the textareas that are being rendered within the container div block the bottom left and right corners of the div. How can I adjust my css such that this no longer happens, and that the text areas work the way I want?
App.js
import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
class App extends React.Component {
render() {
return (
<div className="screenDiv">
<div className="topContainer">
<div className="textContainer">
<div className="textBoxes">
<div className="leftTextBox">
<textarea className="myText" />
</div>
<div className="rightTextBox">
<textarea className="myText" />
</div>
</div>
<div className="languageDisplay">
<div className="inputLanguage">
<p>English</p>
</div>
<div className="outputLanguage">
<p>Spanish</p>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default App;
App.css
.screenDiv {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
.topContainer {
height: 80%;
}
.botContainer {
height: 20%;
border-top: 1px solid black;
}
.topContainer,
.botContainer,
.textBoxes,
.languageDisplay {
width: 100%;
display: flex;
justify-content: space-between;
}
.textBoxes {
height: 50%;
position: relative;
top: 50%;
border: none;
display: flex;
}
.textContainer {
width: 80%;
height: 36%;
position: relative;
top: 30%;
left: 10%;
right: 20%;
border: 1px solid #161515;
display: flex;
justify-content: space-between;
border-radius: 3%;
}
.languageDisplay {
height: 50%;
position: absolute;
top: 0%;
bottom: 50%;
display: flex;
justify-content: space-between;
}
.inputLanguage {
width: 5%;
height: 20%;
position: relative;
top: 30%;
left: 20%;
}
.outputLanguage {
width: 5%;
height: 20%;
position: relative;
top: 30%;
right: 20%;
}
.leftTextBox,
.rightTextBox {
width: 50%;
height: 100%;
display: inline-block;
border: none;
}
.myText {
box-sizing: border-box;
width: 100%;
height: 100%;
border: none;
}
As you are adding a border-radius to your <div />, it is actually "curving in" on the space the div has which is causing the text area inside to overflow the container.
There are two ways I can see to deal with this. You could add a padding to the textContainer div:
padding: 1rem;
Or you could hide all overflow - meaning the inner text area would be hidden instead of being placed over the border of the textContainer div.:
overflow: hidden;
This should keep the border intact.
If you provide some padding to .textContainer, it will solve your problem.
You can also add border-radius to your textboxes if you do not want to give padding to .textContainer
I want the absolute positioned child touch its parent from outside like this:
.parent {
background: #aaffaa;
width: 200px;
height: 200px;
margin-left: 150px;
display: flex;
align-items: center;
position: relative;
}
.child {
background: #ffaaaa;
width: 100px; // actually unknown, here for demo purposes
height: 100px;
position: absolute;
left: 0;
transform: translate(-100%);
}
<div class="parent">
<div class="child"></div>
</div>
The problem: I can't use the transform property, because it's already in use in a keyframe animation, the element may or may not be position: absolute. Is there some elegant solution to this?
Sure there is! There is just 1 line missing in your code.
You just need to use right:100% and it will be just fine.
.parent {
background: #aaffaa;
width: 200px;
height: 200px;
margin-left: 150px;
display: flex;
align-items: center;
position: relative;
}
.child {
background: #ffaaaa;
width: 100px;
height: 100px;
position: absolute;
right: 100%;
}
<div class="parent">
<div class="child"></div>
</div>
Safari has full support for FlexBox according to caniuse.
I am simply trying to stack some differently sized div's on top of each other using flexbox. I am genuinely curious as to why this works in Chrome/Firefox but not in Safari:
<div class="container">
<div class="inner-one"></div>
<div class="inner-two"></div>
</div>
.container {
width: 15rem;
height: 15rem;
border-radius: 50%;
background-color: blue;
display: flex;
align-items: center;
justify-content: center;
}
.container div {
position: absolute;
}
.inner-one {
width: 13rem;
height: 13rem;
border-radius: 50%;
background-color: green;
}
.inner-two {
width: 11rem;
height: 11rem;
border-radius: 50%;
background-color: purple;
}
See JSFiddle here: https://jsfiddle.net/19n95exf/3/
Because position: absolute; break display: flex, use transform: translate instead
.container {
position: relative;
width: 15rem;
height: 15rem;
border-radius: 50%;
background-color: blue;
}
.container div {
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.inner-one {
width: 13rem;
height: 13rem;
background-color: green;
}
.inner-two {
width: 11rem;
height: 11rem;
background-color: purple;
}
<div class="container">
<div class="inner-one"></div>
<div class="inner-two"></div>
</div>
Or give the inner elements a left/top value
.container {
width: 15rem;
height: 15rem;
border-radius: 50%;
background-color: blue;
display: flex;
align-items: center;
justify-content: center;
}
.container div {
border-radius: 50%;
position: absolute;
}
.inner-one {
left: 1.5rem;
top: 1.5rem;
width: 13rem;
height: 13rem;
background-color: green;
}
.inner-two {
left: 2.5rem;
top: 2.5rem;
width: 11rem;
height: 11rem;
background-color: purple;
}
<div class="container">
<div class="inner-one"></div>
<div class="inner-two"></div>
</div>