I am trying to create a two column layout, with the left column a fixed height, and the right column containing another Grid with multiple rows.
However, the first row in the second column is always the height of the left column.
Here's the output:
Here is my code:
class App extends Component {
render() {
return (
<div>
<Grid fluid >
<Row>
<Col xs={2} style={{ padding: '0px', backgroundColor: 'lightblue', height: '200px' }}>
Column 1 <br/>I am a 200 px tall column</Col>
<Col xsOffset={2}>
<Grid>
<Row style={{backgroundColor: 'red'}}>
Column 2 <br/> Why am I so tall???
</Row>
<Row style={{backgroundColor: 'green'}}>
I am too far down!
</Row>
<Row style={{backgroundColor: 'lightgray'}}>
Me, too!
</Row>
</Grid>
</Col>
</Row>
</Grid>
</div>
);
}
}
And a fiddle: https://jsfiddle.net/TimoF/dwLhb1fz/
Replace xsOffset={2} with xs={10}
Why was it happening?
According to Bootstrap Grid System, adjacent <div> with pseudo class .row::before is having display:table,by default.
Had to dive deep into Bootstrap CSS ;)
Hence it will force adjacent <div> to be of equal height. Check this
In your case, it's not necessary to give offset, and it's more convenient to replace xsOffset={2} with xs={10}.
Hence it will work fine as it's standard Bootstrap's way.
var { Grid, Row, Col } = ReactBootstrap
class App extends React.Component {
render() {
return (
<Grid fluid >
<Row>
<Col xs={2} style={{ backgroundColor: 'lightblue', height: '200px' }}>
Column 1 <br/>I am a 200 px tall column</Col>
<Col xs={10}>
<Row>
<Grid>
<Row style={{backgroundColor: 'red',height:'auto'}}>
Column 2 <br/> Why am I so tall???
</Row>
<Row style={{backgroundColor: 'green'}}>
I am too far down!
</Row>
<Row style={{backgroundColor: 'lightgray'}}>
Me, too!
</Row>
</Grid>
</Row>
</Col>
</Row>
</Grid>
)
}
}
ReactDOM.render(
<App/>,
document.getElementById('container')
);
<script src="https://unpkg.com/react#16.2.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16.2.0/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.32.1/react-bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
Check this Fiddle
Related
I am new to react and was using material ui. I was trying to place a card in a grid item.
here is my code:
<GridItem xs={12} sm={12} md={12} style={{ margin: "0rem" }}>
<Card style={{ margin: "0rem" }}>
<GridItem xs={2} sm={2} md={2}>
{/* <Card style={{ margin: "0rem" }}> */}
<GridItem xs={12} style={{ margin: "0rem" }}>
<CustomOutlineInput
style={{ margin: "0rem" }}
id="coilID"
label="Coil ID"
variant="outlined"
size="small"
/>
</GridItem>
{/* </Card> */}
</GridItem>
</Card>
</GridItem>;
However as you can see some extra spacing is generated in this way how do I remove this and make colums inside the grid item:
Also how do I add text boxes in a single row without increasing the spacing?
each element is taking extra space:
I have a situation here where I have created a reusable component which is responsible for creating input fields and label. I want to use this component throughout to build a complete form having a single row with two columns (with this custom input field)
I use the following code
Form.jsx
<GridRow>
<InputField type="text"label="First Name"/>
<InputField type="text"label="Last Name" />
</GridRow>
GridRow.jsx
render() {
return (
<div>
<Container>
<Row>
<Col sm={6}>
{this.props.children}
</Col>
<Col sm={6}>
{this.props.children}
</Col>
</Row>
</Container>
</div>
);
Inputfield.jsx
const InputField = ({label, type}) => (
<div>
{label}
<input
type={type}
style={{ padding: "4px", border: "none", borderBottom: "1px solid #ccc", width: "90%"}}
/>
</div>
);
Here Form.jsx is using GridRow.jsx as component which has a child component inputfield.jsx
I want the two columns to be different in the same row.
I'm getting the below output
Following is the desired output. How can i get this output
As in the image the first row is
I think you should try this:
form.jsx:
<Row>
<Col><input /></Col>
<Col><input /></Col>
</Row>
grdiRow.jsx:
<Container>
{this.props.child}
</Container>
I'm building a page with react-bootstrap and wanted to place an image as a background for one of the rows that I have in my grid. The height of the img is 1237.5px and it's placed in the Col Component. If I change the height explicitly to e.g. height: 25%, the image takes 25% of the height of the Row component but the Row component is still 1237.5px high.
I'd like Row component to have height: 30% of the desktop screen. It should be responsive and on mobile it should take the whole screen height.
function App() {
return (
<div className="App">
<UpperBar></UpperBar>
<Container fluid>
<Row >
<Col xs={12} md={12} >
<FirstBlock></FirstBlock>
</Col>
</Row>
<Row>
<Col xs={12} md={6}>1 of 2</Col>
<Col xs={12} md={6}>2 of 2</Col>
</Row>
<Row>
<Col xs={12} md={6}>1 of 2</Col>
<Col xs={12} md={6}>2 of 2</Col>
</Row>
</Container>
<Footer></Footer>
</div >
);
}
function FirstBlock() {
return (
<Image src={discolight} alt="first" style={{height: "25%", width: "100%"}}></Image>
);
}
enter image description here
I'm struggling with the following form done in React:
import React, { Component } from 'react';
import ImageGallery from 'react-image-gallery';
import { Container, Row, Col, InputGroup, Button, FormControl, Form } from 'react-bootstrap';
const images = [
{
original: '/assets/images/products/colgantes.png',
thumbnail: '/assets/images/products/colgantes#0.25x.png',
},
{
original: '/assets/images/products/corazones.png',
thumbnail: '/assets/images/products/corazones#0.25x.png',
},
{
original: '/assets/images/products/take-me-to-the-beach.png',
thumbnail: '/assets/images/products/take-me-to-the-beach#0.25x.png',
},
];
class DetailedProduct extends Component {
render() {
return (
<>
<Container fluid>
<Row >
<Col md={{ span: 4, offset: 3 }} sm={{ span: 12, offset: 0}} >
<ImageGallery
items={images}
showNav=""
showFullscreenButton=""
showBullets=""
showPlayButton=""
thumbnailPosition="left"
/>
</Col>
<Col md={3} sm={12} className="text-xs-center text-md-left" >
<h1>Product</h1>
<h3>$500</h3>
<p>Lorem Ipsum is simply dummy text from the printing and typeseting industrys</p>
<Form>
<Row >
<Col sm={12} md={8} >
<Form.Group controlId="color" >
<Form.Label>Color</Form.Label>
<Form.Control as="select" custom>
<option>Rojo</option>
<option>Negro</option>
<option>Azul</option>
</Form.Control>
</Form.Group>
</Col>
<Col sm={12} md={4} className="inline-block">
<Form.Group controlId="cantidad" >
<Form.Label>Cantidad</Form.Label>
<InputGroup >
<InputGroup.Prepend>
<Button variant="outline-secondary" >+</Button>
</InputGroup.Prepend>
<FormControl
placeholder="1"
aria-label="quantity"
aria-describedby="basic-addon2"
/>
<InputGroup.Append>
<Button variant="outline-secondary" >-</Button>
</InputGroup.Append>
</InputGroup>
</Form.Group>
</Col>
</Row>
</Form>
</Col>
</Row>
</Container>
</>
);
}
}
export default DetailedProduct;
The problem I have is that when I resize the Browser Window, the appended buttons in the input, start to move down to a different row separately, breaking the [+ 1 -] block. I've tried applying different CSS to the form group but I can't find a way to tighten them together so that if they move, they move in a block and the following thing doesn't happen:
You can try adding the rule for the minimum size:
min-width: 150px;
150px is an example size.
Unfortunately I don't know the width size that input should have.
To the class that contains the three elements, input-group, in that case. I advise you to add a class and apply additional styles to that.
Thanks, I was able to fix it by using the right flex column sizes for the scren resolution, sm={12} md={6} lg={4} - That did the trick
I am using antd and would like the vertical divider to split the two sides of my screen. The two sides are in fact separated by different Col components. They currently look something like this:
class Example extends React.Component {
render () {
return (
<Row>
<Col span={11}>
CONTENT ONE SIDE
</Col>
<Col span={2}>
<Divider type='vertical'/>
</Col>
<Col span={11}>
CONTENT OTHER SIDE
</Col>
</Row>
)
}
}
The issue here is that the Divider is barely appearing. I would like it to go all the way down where the content ends. Instead, it is just a tiny little line.
This is a screenshot of what it currently looks like:
You can barely see the divider in the middle.
How can I make the vertical divider be as long as the content?
Thanks!
You can set the height of the divider to 100% , see this sandbox
<Divider type="vertical" style={{ height: "100%" }} />
Mine doesn't work with the above answers.
After a little bit of work. I finally got this below code to work.
< Divider
type="vertical" style={{ height: "100px", backgroundColor: "#000" }}
/>
height 100%
<Row>
<Col span={11}>
CONTENT ONE SIDE
<br />
CONTENT ONE SIDE
<br />
CONTENT ONE SIDE
<br />
</Col>
<Col span={2}>
<Divider type="vertical" style={{ height: "100%" }} />
</Col>
<Col span={11}>CONTENT OTHER SIDE</Col>
</Row>
https://codesandbox.io/s/antd-create-react-app-forked-rzp10?file=/index.js:181-499