I am having a logo where I need to center align it and need to draw horizontal line below the logo and after that horizontal line I need to place some content and after the content again I need to draw horizontal line. Below that I need to have a button. I have placed the logo center but I couldn't bring the horizontal lines and images one below the other. Could any one help me to resolve this issue. Thanks in advance!
OutPut I need is :
LOGO
--------------------------------------------------
Some Content
--------------------------------------------------
BUTTON
But I am getting like below :
LOGO --------------------------------------------------
BUTTON
function ModalComp() {
//Modal state
const [show, setShow] = useState(false);
//handlemodal logic
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
const onLoginFormSubmit = (e) => {
e.preventDefault();
handleClose();
};
return (
<div>
<div className="content">
<img
src={BackGroundImage}
alt="none"
style={{
width: "20%",
}}
/>
</div>
<div
style={{
position: "relative",
alignItems: "center",
justifyContent: "center",
left: "-12%",
}}
>
<Button
variant="info"
class="text-center"
onClick={handleShow}
style={{ marginBottom: "1em" }}
>
Contact US
</Button>
</div>
<Modal show={show}>
<Modal.Header closeButton>
<Modal.Title>Contact Form</Modal.Title>
</Modal.Header>
<Modal.Body>
<ContactUs onSubmit={onLoginFormSubmit} />
</Modal.Body>
</Modal>
</div>
);
}
CSS:
.content {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
Related
I build samsung home page. In basic header and slides I add one div:
<div className="samsung">
<div className="samsung__main">
<Header />
<Slides />
</div>
</div>
and I add some style:
.samsung__main{
display: flex;
height: 100vh;
flex-direction: column;
}
In Slides components I use antd Carousel. But it didnt get height: 100%:
import React from 'react'
import './Carousel.css'
import {Carousel} from 'antd'
import carouselLink from '../../asserts/carousel_1.png'
const Slides = () => {
return (
<div style={{flex: '1', height: '100%'}}>
<Carousel style={{ height: '100%' }}>
<div style={{
backgroundImage: `url(${carouselLink})`,
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
height: '100%'
}}>
<h1>Galaxy S22 Ultra</h1>
<p>Get $100 instant Samsung Credit toward other offers during checkout.<sup>ƾ</sup> Plus, get up to $1000 enhanced trade-in credit. From $199.99 <s>$1199.99</s> with eligible trade-in.<sup>θ</sup></p>
</div>
</Carousel>
</div>
)
}
export default Slides
How to fix it? I cannot change css style
I'm trying to display a navbar on top of react window list. I'm using react-window and react-virtualized-auto-sizer. The problem is that when I add the navbar outside the AutoSizer it creates another scroll bar. sandbox. How could I position the navbar ontop of the list without another scroll bar being created?
Code:
const Row = ({ index, style }) => (
<div style={style}>Row {index}</div>
);
const Homepage = () => (<>
<div style={{ width: "100%", height: "100vh", overFlow: "hidden"}}>
<Navbar /> // this causes a second scroll bar
<AutoSizer>
{({ width, height }) => (
<>
<List
height={height}
itemCount={1000}
itemSize={35}
width={width}
>
{Row}
</List>
</>
)}
</AutoSizer>
</div>
</>
);
Change your dom architecture so your header is outside the AutoSizer
For example:
const App = () => (
<div style={{ width: "100%", height: "100vh" }}>
<div style={{ height: "10vh", backgroundColor: "lightgrey" }}>
header here
</div>
<div style={{ height: "80vh" }}>
<AutoSizer>
{({ width, height }) => (
<>
<List height={height} itemCount={1000} itemSize={35} width={width}>
{Tester}
</List>
</>
)}
</AutoSizer>
</div>
<div style={{ height: "10vh", backgroundColor: "lightgrey" }}>
footer here
</div>
</div>
);
Demo
In you style.css file you could add
body {
overflow: hidden;
}
it s not the most elegant solution but I guess it works.
I have a modal in my render method:
<ModalContainer>
<Modal isSmall={true} style={{width:'1100px', overflowY : "scroll"}}>
<div className='div-style'>
<ModalHeader>
<h3>Add Company</h3>
</ModalHeader>
<div className='div-style'>
{addingC.map((company, index) => { //renders each element in addingC, I want this div to be scroll-able as the user keeps adding a new object
return(
<div
key={index}
className="flex flex-row w-100 side-by-side"
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
marginBottom: "20px",
}}
>
<label htmlFor="name">Company Name</label>
<ModalInput
type="text"
id="name"
value={company.name}
onChange={(e) =>
this.setState({ newCompanyName: e.target.value })
}
></ModalInput>
<label htmlFor="website">
Company Website
</label>
<ModalInput
type="text"
id="website"
value={company.website}
onChange={(e) =>
this.setState({ newCompanyWebsite: e.target.value })
}
></ModalInput>
</div>
)})}
</div>
<ModalSaveButton type="button" onClick={() => this.addC()}> //add button that allows user to add another company
add
</ModalSaveButton>
this is the addC() method and adds in an empty object when called by the render method:
addC() {
let { addingC } = this.state;
addingC.push({ name: "", website: ""});
this.setState({ addingC });
}
this is the css file where I have also added Y overflow property:
.side-by-side {
display: flex;
flex-direction: row;
align-items: center;
}
.div-style {
overflow-y: auto; //added Y overflow
position: relative;
}
I would like the div to be scroll-able as the user adds new companies and currently once I add about 8 companies, the div becomes too large and instead of scrolling, the top part goes out of the page so its no longer visible as you can see here
In order to use overflow-y or overflow-x, you have to set height or width. Otherwise, it will keep using available space. If there is no space, it will go off the page.
In your CSS file, try adding height in div-style.
The last element in my list is being cut off. I can see from console logs that it's rendering and if I comment out the position from being fixed, I can see the element at the bottom of the list. However, for some reason, I cannot see it when I make the position fixed (the behavior I want the list to have).
File where I render the list (the list is JobFeed):
return (
<div className="App">
<div style={headerStyle}>
<h3>header></h3>
<ListsHeader state={state} dispatch={dispatch}/>
</div>
<div style={listContainerStyle}>
<JobFeed state={state}/>
</div>
</div>
);
And the styles:
const headerStyle: CSS.Properties = {
display: 'flex',
flexDirection: 'row'
}
const listContainerStyle: CSS.Properties = {
scrollBehavior: 'smooth',
maxHeight: '100vh',
width: '100%',
overflow: 'auto',
position: 'fixed',
margin: 0
}
The list component:
return (
<ul style ={listStyle}>
{activeJobs.map(item => {
return(
<li key={item.id}>
<JobCard item={item}/>
</li>
)
})}
</ul>
)
And the list style:
const listStyle: CSS.Properties = {
display: 'flex',
flexDirection: 'column',
listStyleType: 'none',
listStyle: 'none',
paddingLeft: '26%',
height: '100vh'
}
I'm using react, typescript, and csstype for the styling.
For some reason it was like 200px too short, for the list style I added a marginBottom of 250px and that solved it. Not sure why that happened.
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)