I have two columns with setup like this:
<Row>
<Col xs={24} lg={12}>
<p>Column 1</p>
</Col>
<Col xs={24} lg={12}>
<p>Column 2</p>
</Col>
</Row>
How can I use push or pull from the ANT Design Doc to make Column 2 to be above Column 1 in smaller screen?
We can't push/pull on the xs column because each column takes up the full width. Instead we can put column 2 on top initially and change the order when the viewport is large. At the large breakpoint we can push Column 2 to the right and pull Column 1 to the left.
The Grid API allows us to pass objects containing props such as span, push, and pull for the breakpoint.
<Row>
<Col xs={24} lg={{span: 12, push: 12}}>
<p>Column 2</p>
</Col>
<Col xs={24} lg={{span: 12, pull: 12}}>
<p>Column 1</p>
</Col>
</Row>
Related
I created a form using ant design form component and now I want to separate one row and add two input fields side by side.
here is the code:
<Row>
<Col flex={'98px'}></Col>
<Col span={9}>
<Form.Item
label="Individual Stop Loss"
>
<Input title={formData.planNetworkName} />
</Form.Item>
</Col>
<Col span={9}>
<Form.Item
label="Individual Stop Loss"
>
<Input title={formData.planNetworkName} />
</Form.Item>
</Col>
</Row>
created an empty column to align using flex=98px and now I want to separate the rest of the width 50/50 to fit the two input fields.
Here is what I got:
this is what I want:
TIA
I am trying to hide few columns on mobile screens but its not working for some reason. Here's my code:
<Row>
<Col className="col-md-2">Route Image</Col>
<Col className="col-md-3">
<Row>
<Col>Route Name</Col>
</Row>
<Row>
<Col>Route Location</Col>
</Row>
</Col>
<Col className="col-md-3 hidden-xs-down">Route Difficulty</Col>
<Col className="col-md-2 hidden-xs-down">Route Length</Col>
<Col className="col-md-2 hidden-xs-down">View Details</Col>
</Row>
Can someone please tell me what I am doing wrong?
Since Bootstrap v4.x, all .hidden- classes have been removed. You should use d-none .d-sm-block instead if you want to hide your element only on xs
I was got a row of buttons I like to adjust to changes in screen resolution or browser window resizing. Right now, when I change the screen resolution or browser window size, the button starts to overlap to the second row. I read that bootstrap and adjust the size of the buttons or text to handle the changes.
I read another post and added the following code but its not quite working
<Grid fluid={true}>
<Row">
<Col md={3}>
<Button ...>
</Col>
<Col md={3}>
<Button ...>
</Col>
<Col md={3}>
<Button ...>
</Col> <Col md={3}>
<Button ...>
</Col>
</Row>
</Grid>
When I resize the screen View from 100% and below, the buttons are resizing in height and all buttons stays on the same row. However, when I change the view resizing with Ctrl + mouse wheel to over 100%, the buttons overlap to the next line. I also see the button row overlap when resizing the browser window size.
Is there a way to resize the buttons when over 100% and changing the browser window size?
I tried to add max-width: 90% !important in the css styling, but that did not work.
Any help is appreciated. Thanks
A solution is to use react-bootstrap Grid system like this:
This behaviour will make sure that the Columns (aka your buttons in this case) to flow automatically when there is no space left, they will start from next line and not overlap as you have now:
import { Container, Row, Col } from 'react-bootstrap'
...
<Container>
<Row>
<Col xs='auto'><Button ... /></Col>
<Col xs='auto'><Button ... /></Col>
<Col xs='auto'><Button ... /></Col>
<Col xs='auto'><Button ... /></Col>
<Col xs='auto'><Button ... /></Col>
<Col xs='auto'><Button ... /></Col>
<Col xs='auto'><Button ... /></Col>
<Col xs='auto'><Button ... /></Col>
<Col xs='auto'><Button ... /></Col>
</Row>
</Container>
Or if you're only using css:
<div className='container'>
<div className='row'>
<div className='col'><Button ... /></div>
<div className='col'><Button ... /></div>
<div className='col'><Button ... /></div>
<div className='col'><Button ... /></div>
</div>
</div>
I am using canvas-gauges in Reactjs. When I try to render direct canvas it's not rendering the canvas, so I have used <RadialGauge units='km/h'> react components. Here, I am not able to set 100% height and width for gauges. I don't want to set as it as px. Installed the following package by npm install react-canvas-gauges
<RadialGauge
id='mycanvas'
units='rpm'
title='x1000 RPM'
width={200}>
</RadialGauge>
Actual working code with px value
<Row>
<Col md="12" xl="12">
<Card>
<CardBody className="dashboard-card-widgets" >
<Row>
<Col md="6" xl="6">
<RadialGauge
units='rpm'
title='x1000 RPM'
width={200}
height={200}
value={3}
minValue={0}
maxValue={8}
majorTicks={['0', '1','2','3','4','5','6','7','8']}
minorTicks={5}
borders={false}
strokeTicks={true}
highlights={[{from: "6", to: "8", color: "rgba(200, 50, 50, .75)"}]}
ColorPlate={'#fff'}
borderShadowWidth={0}
needleType={'arrow'}
needleWidth={3}
needleCircleSize={7}
needleCircleOuter={true}
needleCircleInner={false}
animationDuration={1500}
animationRule={'linear'}
fontNumbersSize={30}
></RadialGauge>
</Col>
</Row>
</CardBody>
</Card>
</Col>
</Row>
Expected result in render:
<canvas id="mycanvs" width="100%" height="100%"></canvas>
i have to create an autocomplete react component. Initially there must be 5 autocomplete fields. I set a state as an array of 5 input elements like
this.state {activities : ['','','','','']}
i apply a map function over these to display 5 autocomplete boxes.
I have a list of values to be listed as options of autocomplete.
Row>
{this.state.activities.map((newrow,index)=>{
return (
<Col md={12}>
<Row className="form-row">
<Col md={11} sm={10} xs={9}>
<div className="form-input">
<AutoComplete
className="autosearch"
dataSource={options}
onSelect={this.onSelect.bind(this, index)}
filterOption={(inputValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1} />
</div>
</Col>
<Col md={1} sm={2} xs={3}>
<Button className="delete-row" onClick={this.deleterow.bind(this,index)}><i className="fa fa-trash"></i></Button>
</Col>
</Row>
</Col>)
})
}
</Row>
now i have to create an autocomplete which also has the option to allow me add an option if it is not present in the list .
please help me out. i am new to react and thanks in advance.
This is the website i referred for the autocomplete boxenter link description here
and i referred the basic example code of it