hello i'm trying to put a boxshadow in my header, but for some reason my carousel is not letting my shadow box even appear in the div:
without my caroussel component:
code:
export default function App() {
var settings = {
dots: true,
arrows: false,
autoplay: true,
draggable: false,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1
};
return (
<div className="App">
<div
style={{
width: "100%",
position: "relative",
height: "auto",
position: "relative",
boxShadow: " 3px 3px 3px #000",
background: "green"
}}
>
header
</div>
<Slider {...settings}>
<div>
<div style={{ background: "blue", height: "200px", width: "100%" }}>
testing
</div>
</div>
</Slider>
</div>
);
}
example:
https://codesandbox.io/s/flamboyant-allen-nr3t0
Related
CSS margin not working in my react typescript project
My code:
const Home: React.FC = () => {
return (
<div style={{ width: "100vw", background: "skyblue" }}>
<div
style={{
background: "red",
height: "100px",
width: "100px",
marginLeft: "100px",
}}
></div>
</div>
);
};
Codesandbox link for this project
Your margin is overridden by margin: 0px !important which is declared in your App.css file
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.
<div style={{ display: 'flex', flexDirection: 'column' }}>
<div style={{ zIndex: 1050, backgroundColor: '#fafafb', height: '50px', position: 'fixed', width: '100%'}}>
</div>
<div style={{ position: 'relative' ,height: '250px', backgroundColor: 'green' }}>
</div>
</div>
The second inner div height is only 200px the remaining 50px is inside the first inner div but i want to start the second div at the end of the first div?
You first div is positioned fixed , that means its out of the flow. Hence the second div pushed to top.
You could set the top of the second div by the height of the first:
const Example = () => (
<div style={{ display: 'flex', flexDirection: 'column' }}>
<div style={{ zIndex: 1050, backgroundColor: '#fafafb', height: '50px', position: 'fixed', width: '100%'}}>
</div>
<div style={{ position: 'relative', top: '50px' ,height: '250px', backgroundColor: 'green' }}>
</div>
</div>
);
ReactDOM.render(<Example />, document.getElementById('root'));
<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="root" />
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 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/