I am trying to layer two containers on top of one another, but instead it is being placed in a column
I have looked into z-index and layering, but it does not seem to be working.
My code:
class App extends Component {
render() {
let bigContainer = {
height: '30vh',
}
let containerOne = {
height:'100%',
zIndex:1,
position: 'relative'
}
let containerTwo = {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
zIndex: 100,
height: '100%',
position: 'relative'
}
let innerStyleOne = {
backgroundColor: 'black',
height: '15vh',
position: 'relative',
order: '2',
width: '100%'
}
let innerStyleTwo = {
backgroundColor: 'blue',
height: '15vh',
position: 'relative',
order: '2',
width: '100%'
}
let innerStyleLayer = {
backgroundColor: 'green',
position: 'relative',
height: '25px',
width: '25px'
}
return (
<div className="App" style={bigContainer}>
<div style = {containerOne}>
<div style={innerStyleOne}> </div>
<div style={innerStyleTwo}> </div>
</div>
<div style = {containerTwo}>
<div style={innerStyleLayer}></div>
</div>
</div>
);
}
}
This is the result I'm getting
but i am trying to get the green square in the middle of the blue and black bars
Edit: after changing container2 to position:absolute
using
position: relative for bigContainer and
position: absolute for containerTwo.
Related
I have an editor and several buttons above it on the right. I would like to have a panel just under Button2 that overlays the editor. Then, clicking on Button2 will expand and collapse the panel (which will be easy to implement).
I have written the following code: https://codesandbox.io/s/fervent-mclaren-3mrtyj?file=/src/App.js. At the moment, the panel is NOT under Button2 and does NOT overlay the editor.
Does anyone know how to amend the CSS?
import React from "react";
import { Stack } from "#fluentui/react";
export default class App extends React.Component {
render() {
return (
<div>
<Stack horizontal horizontalAlign="space-between">
<div>Title</div>
<div>Button1 Button2 Button3</div>
</Stack>
<div
style={{
backgroundColor: "yellow",
width: "350px",
height: "50px"
}}
>
A floating panel which is supposed to be always under "Button2" and
overlays the editor.
</div>
<div
style={{
backgroundColor: "gray",
width: "100%",
height: "300px"
}}
>
An editor
</div>
</div>
);
}
}
You need to use position:absolute on floating pane and add it in the editor div which will have position:relative.You can see the result it works fine
On clicking button 2 the floating panel hides/shows alternatively
This will work.
var btn=document.querySelector('.drop_btn');
btn.onclick=function()
{
document.querySelector('.dropdown').classList.toggle('block');
}
*
{
font-family: 'arial';
margin: 0px;
padding: 0px;
}
.menu_pane
{
display: flex;
background: #151515;
color: white;
padding:5px 10px;
align-items: center;
border-bottom: 1px solid rgba(255,255,255,0.2);
}
.menu_pane h3
{
font-weight: normal;
font-size: 18px;
flex-grow: 1;
}
.menu_pane .btn button
{
position: relative;
background: #0971F1;
color: white;
border-radius: 5px;
border:none;
cursor: pointer;
padding: 8px 20px;
margin-right: 10px;
}
.dropdown
{
display: none;
height: 100%;
width: 100%;
top: 0;
left: 0;
color: white !important;
position: absolute;
background: #242424;
border-radius: 0 0 10px 10px;
}
.menu_pane .btn .dropdown p
{
font-size: 14px;
}
.editor_pane
{
position: relative;
background:#151515;
color: white;
min-height: 50vh;
border-radius: 0 0 10px 10px;
padding: 10px;
color: #512DA8;
}
.block
{
display: block;
}
<div class="container">
<div class="menu_pane">
<h3>Title</h3>
<div class="btn">
<button>Button-1</button>
</div>
<div class="btn">
<button class="drop_btn">Button-2</button>
</div>
<div class="btn">
<button>Button-3</button>
</div>
</div>
<div class="editor_pane">
<p>An editor</p>
<div class="dropdown">
<p>A floating panel which is supposed to be always under "Button2" and overlays the editor.</p>
</div>
</div>
</div>
How does this look?
https://codesandbox.io/s/hidden-platform-q3v4kc?file=/src/App.js
I moved the floating pane into the button, made the button position relative, and made the floating pane position absolute.
Note: notice there's no top property on the floating pane. One neat thing about position absolute is if you don't set top, left, bottom, right those positions will be where that box would be if it wasn't position absolute.
Update
I noticed that the overlay needed to cover the "editor" area only and have the example updated with hopefully the right placement of it.
Updated live example: codesandbox
import React from "react";
import { Stack } from "#fluentui/react";
export default class App extends React.Component {
state = { showOverlay: true };
handleToggle = () =>
this.setState((prev) => ({ showOverlay: !prev.showOverlay }));
render() {
return (
<div>
<Stack
horizontal
horizontalAlign="space-between"
style={{ padding: "12px" }}
>
<div>Title</div>
<Stack horizontal>
<button>Button1</button>
<button onClick={this.handleToggle}>
{`Button2 (${this.state.showOverlay ? "Hide" : "Show"} Overlay)`}
</button>
<button>Button3</button>
</Stack>
</Stack>
<div
style={{
backgroundColor: "gray",
width: "100%",
height: "300px",
position: "relative"
}}
>
An editor
<div
style={{
position: "absolute",
inset: "0",
backgroundColor: "rgba(0, 0, 0, 0.70)",
display: this.state.showOverlay ? "flex" : "none",
justifyContent: "center",
alignItems: "center",
color: "#fff"
}}
>
A floating panel which is supposed to be always under "Button2" and
overlays the editor.
</div>
</div>
</div>
);
}
}
Keeping the original example (it had overlay on the whole component except for "Button 2") just in case if it might be useful.
Original
Not sure if I fully understand the desired result, but here is the component implemented with a toggle overlay controlled by Button2.
The overlay is currently set on top of and blocking all child elements except for Button2, so that it works as a "start editing" button, but it can be further adjusted to specify which element it covers to better suit the use case.
Quick demo of the example: codesandbox
import React from "react";
import { Stack } from "#fluentui/react";
export default class App extends React.Component {
state = { showOverlay: true };
handleToggle = () =>
this.setState((prev) => ({ showOverlay: !prev.showOverlay }));
render() {
return (
<div style={{ position: "relative", zIndex: "1" }}>
<Stack
horizontal
horizontalAlign="space-between"
style={{ padding: "12px" }}
>
<div>Title</div>
<Stack horizontal>
<button>Button1</button>
<button style={{ zIndex: "75" }} onClick={this.handleToggle}>
{`Button2 (${this.state.showOverlay ? "Hide" : "Show"} Overlay)`}
</button>
<button>Button3</button>
</Stack>
</Stack>
<div
style={{
position: "absolute",
inset: "0",
backgroundColor: "rgba(0, 0, 0, 0.70)",
zIndex: "50",
display: this.state.showOverlay ? "flex" : "none",
justifyContent: "center",
alignItems: "center",
color: "#fff",
}}
>
A floating panel which is supposed to be always under "Button2" and
overlays the editor.
</div>
<div
style={{
backgroundColor: "gray",
width: "100%",
height: "300px",
}}
>
An editor
</div>
</div>
);
}
}
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Flexbox: center horizontally and vertically
(14 answers)
How to center a "position: absolute" element
(31 answers)
How can I horizontally center an element?
(133 answers)
How can I center an absolutely positioned element in a div?
(37 answers)
Closed 4 years ago.
This is the outcome of my code so far:
What I actually want to achieve is to move the two button to the center horizontally. But at the moment they are aligned to the left.
This is the result I want to achieve:
I have tried alignItems but it has no effect. I don't want to use any margin because the container size may vary.
Here is my code:
const H = "540px";
const W = "720px";
const ContentView = ({ width, height }) => (
<div style={{ width, height, border: "1 solid red" }}>Hello! Alt View!</div>
);
const ControlView = ({ width, height, onReveal, onCopy }) => {
const container = {
width,
height,
position: "relative"
};
const controlsContainer = {
width,
height,
position: "absolute",
left: 0,
top: 0,
border: "5px solid green",
display: "flex"
};
return (
<div style={container}>
<img style={{ width, height }} src="https://i.imgur.com/MQcuk3n.jpg" />
<div style={controlsContainer}>
<div
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center"
}}
>
<div>
<button
style={{
width: "400px",
height: "60px",
minWidth: "200px",
display: "block"
}}
onClick={onReveal}
>
Reveal
</button>
</div>
<div>
<button
style={{ width: "400px", height: "60px", minWidth: "200px" }}
onClick={onCopy}
>
Copy Meta
</button>
</div>
</div>
</div>
</div>
);
};
class App extends React.Component {
constructor(props) {
super(props);
this.state = { playing: false };
}
_onReveal() {
this.setState({ playing: true });
}
_onCopy() {
window.alert("Meta data copied");
}
renderAltView() {
return <AltView />;
}
render() {
const { width, height } = this.props;
if (!this.state.playing) {
return (
<div>
<h2>Controls</h2>
<ControlView
width={width}
height={height}
onReveal={() => this._onReveal()}
onCopy={() => this._onCopy()}
/>
</div>
);
}
return (
<div>
<ContentView />
</div>
);
}
}
ReactDOM.render(<App width={W} height={H} />, document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
Unfortunately I cannot get it to work in SO code snippet. A working version is here at codepen https://codepen.io/kongakong/pen/EpRKPx
What flex directive I can use to position the buttons as I want?
You also need to center all the child elements in the parent div. So in your case you need to set the flexbox properties to the controlsContainer.
const controlsContainer = {
width,
height,
position: 'absolute',
left: 0,
top: 0,
border: '5px solid green',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center'
};
Working example:
const H="540px";
const W="720px";
const ContentView = ({width, height}) => (
<div style={{width, height, border: '1 solid red'}}>Hello! Alt View!</div>
)
const ControlView = ({width, height, onReveal, onCopy}) => {
const container = {
width,
height,
position: 'relative',
};
const controlsContainer = {
width,
height,
position: 'absolute',
left: 0,
top: 0,
border: '5px solid green',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center'
};
return (
<div style={container} >
<img style={{width, height}} src="https://i.imgur.com/MQcuk3n.jpg" ></img>
<div style={controlsContainer}>
<div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}>
<div>
<button style={{ width: '400px', height: '60px', minWidth: '200px', display:'block'}}
onClick={onReveal}>Reveal</button>
</div>
<div >
<button style={{width: '400px', height: '60px', minWidth: '200px'}}
onClick={onCopy}>Copy Meta</button>
</div>
</div>
</div>
</div>
)
}
class App extends React.Component{
constructor(props){
super(props);
this.state = {playing: false};
}
_onReveal() {
this.setState({playing: true})
}
_onCopy() {
window.alert('Meta data copied')
}
renderAltView() {
return (
<AltView />
)
}
render(){
const { width, height } = this.props;
if (!this.state.playing){
return (
<div>
<h2>Controls</h2>
<ControlView width={width} height={height}
onReveal={() => this._onReveal()}
onCopy={() => this._onCopy()}
/>
</div>);
}
return (<div><ContentView /></div>);
}
}
ReactDOM.render(<App width={W} height={H}/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
Add justify-content: center; to the absolute positioned DIV (controlsContainer)
I'm trying to make a profile page ui, Where the profile data like name and bio container will stay 50% to the bottom of its top component which is cover picture right now.
So this is my React Native code,
<View style={styles.container}>
<View style={styles.coverContainer}>
</View>
<View style={styles.profileDataContainer}>
</View>
<View style={styles.intrestsContainer}>
</View>
<View style={styles.topicsContainer}>
</View>
</View>
And current styles,
const styles = StyleSheet.create({
container: {
},
coverContainer: {
height : 200,
backgroundColor : 'blue'
},
profileDataContainer: {
marginHorizontal : 30,
backgroundColor: 'white',
height : 200,
shadowColor: "#e5e5e5",
shadowOffset: {
width: 0,
height: 2
},
shadowRadius: 2,
shadowOpacity: 1.0,
elevation : 4,
marginTop : -100,
}
});
I have added marginTop : -100 to make it look like the structure I want.
So this is what it looks like right now after adding marginTop to -100, But that's not responsive, When I increase the size of that white block. It doesn't stay in center anymore.
Need Help on how to do that :(
You can do it using percentage instead of logical pixels like in this example :
const WindowHeight = Dimensions.get('window').height;
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.headerBackground}/>
<View style={styles.header}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: 'grey',
},
headerBackground: {
height: '30%',
width: '100%',
backgroundColor : 'blue'
},
header: {
height: '30%',
width: '80%',
marginTop: WindowHeight * -0.15,
backgroundColor : 'white'
}
});
In this example I set the height of the blue background and the white header to 30% of the window's height, and the marginTop to -15% of the window's height (I have to use Dimensions because if I use a percentage it'll be the percentage of the width...)
You can run my example on snack : https://snack.expo.io/Hyd7ChplX
You can nest your profileDataContainer in your coverContainer and place it absolute with top 50%. Hope you can convert it yourself to your React Native code...
Example:
.coverContainer{
height: 200px;
background-color: blue;
position: relative;
width: 100%;
}
.profileDataContainer {
position: absolute;
right: 10%;
left: 10%;
display: block;
top: 50%;
background-color: red;
height: 200px;
}
<div class="coverContainer"><div class="profileDataContainer"></div></div>
I am really new to React, and I have code set up like below, I want to click the button and make the content disappear.Wish someone could help me with this. I tried use state, but I did not get the results I want, I also tried https://jsfiddle.net/uwadhwnr/ not work. I am really frustrating right now.
<div id="content" style="height:1000px">
<script type="text/jsx">
var styles = {
container: {
height: '100vh',
width: '100%',
backgroundColor: 'blue',
},
title: {
textAlign: 'center',
},
modal: {
display: 'block',
position: 'fixed',
zIndex: '1',
paddingTop: '100px',
left: '0',
top: '0',
width: '100vw',
height: '100vh',
overflow: 'auto',
backgroundColor: 'rgb(0,0,0)',
backgroundColor: 'rgba(0,0,0,0.4)',
},
modalContent: {
position: 'relative',
backgroundColor: '#fefefe',
margin: 'auto',
padding: '0',
border: '1px solid #888',
width: '80vw',
},
modalHeader: {
padding: '2px 16px',
backgroundColor: '#5cb85c',
color: 'white',
},
modalBody: {padding: '2px 16px'},
modalFooter: {
padding: '2px 16px',
backgroundColor: '#5cb85c',
color: 'white',
},
upload: {
position: 'absolute',
right: '5%',
top: '5%',
},
};
var PopUp = React.createClass({
render: function() {
return (
<div>
<i className="fa fa-plus-circle fa-3x" aria-hidden="true" style={styles.upload} onClick={this.handleClick}></i>
<div id="myModal" className="modal" style={styles.modal}>
<div className="modal-content" style={styles.modalContent}>
<div className="modal-header" style={styles.modalHeader}>
<h2>Modal Header</h2>
</div>
<div classN="modal-body" style={styles.modalBody}>
<p>Some text aa the Modal Body</p>
<p>Some other text...</p>
</div>
<div className="modal-footer" style={styles.modalFooter}>
<h3>Modal Footer</h3>
</div>
</div>
</div>
</div>
);
}
});
var FilterableProductTable = React.createClass({
render: function() {
return (
<div>
<PopUp />
</div>
);
}
});
React.render(
<FilterableProductTable />,
document.getElementById('content'));
</script>
What's the difficult in that?
Just setup a CSS class with this property:
display: none
and switch the class by setting a new state on button click.
Here's an example: https://jsfiddle.net/8aoue71m/
I can not center my <Paper> inside div. Please help
I locate <Paper> and <RaisedButton> inside div and gave with css:
.timerArea {
text-align: center;
}
For Button it works but for Paper - no.
Style for <Paper>
const timeArea = {
height: 150,
width: 150,
textAlign: 'center',
rounded: true,
paddingTop: 65,
backgroundColor: '#76D8E3',
opacity: 0.8
};
Also my JSX:
<div className={styles.timerArea}>
<Paper style={timeArea} zDepth={1} circle>{stopWatchTime}</Paper>
<RaisedButton onClick={buttonRole} backgroundColor={buttonColor}>{buttonName}</RaisedButton>
</div>
and result on the image
Thanks in advance.
Try margin auto in paper style like this
const timeArea = {
height: 150,
width: 150,
textAlign: 'center',
rounded: true,
paddingTop: 65,
backgroundColor: '#76D8E3',
opacity: 0.8,
margin: auto,
};