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
Related
Is there an AntD component that has a similar alignment as Form but only displays text? So I'd like to display data from a form, use the alignment of label and related text similar to the proposed Form alignment here: https://4x.ant.design/docs/spec/alignment (My purpose is just to display the data, I'm not using any form here)
Of course it is always possible to build such a feature on my own: I'd create a 2-column layout with right aligned labels in the first and the data itself in the second:
<Row>
<Col span={18} push={6}>
Label 1:
</Col>
<Col span={6} pull={18}>
Text 1
</Col>
</Row>
<Row>
<Col span={18} push={6}>
Label 2:
</Col>
<Col span={6} pull={18}>
Text 2
</Col>
</Row>
But before I solve this that way, I'd ask if there is any component similar to the form-layout I missed in a AntD that fulfills exactly this need.
You can check the following example using <Form> component. It will have similar alignment like how you want (like a form).
App.tsx
import React from "react";
import "./index.css";
import { Form } from "antd";
const App: React.FC = () => {
return (
<Form labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
<Form.Item label="Username">johnsmit123</Form.Item>
<Form.Item label="Name">John smith</Form.Item>
<Form.Item label="Age">30</Form.Item>
<Form.Item label="Address 1">
Suzy Queue 4455 Landing Lange, APT 4 Louisville, KY 40018-1234
</Form.Item>
<Form.Item label="Address 2">
ATTN: Dennis Menees, CEO Global Co. 90210 Broadway Blvd. Nashville, TN
37011-5678
</Form.Item>
</Form>
);
};
export default App;
you can replace the hardcoded values with dynamic values if needed
<Form.Item label="Username">{value.username}</Form.Item>
Output:
I noticed that when I use more Rows and Cols to create a suitable UI for form validations, my validation does throw this error. The validation only captures data when it is within a Col tag .
It throws this error in my prettier terminal "JSX expressions must have one parent element". i.e the it must be within the Col tag
See the codes below for clarifications
<Row>
<Col sm={4}>
{loading ? (
<p>Loading...</p>
) : (
<ValidatedForm defaultValues={defaultValues()} onSubmit={saveEntity}> {!isNew ?
<ValidatedField name="id" required readOnly id="terminal-id" label="ID" validate={{ required: true }} /> : null}
</Col>
<Col sm={4}>
<ValidatedField
label="Stock Level Date"
id="terminal-stockLevelDate"
name="stockLevelDate"
data-cy="stockLevelDate"
type="date"
/>
<ValidatedField
label="Tank Threat Level"
id="terminal-tankThreatLevel"
name="tankThreatLevel"
data-cy="tankThreatLevel"
type="number"
/></Col>
</Row>
<Row>
<Col sm>
<ValidatedField
label="Low Pumpable Color"
id="terminal-lowPumpableColor"
name="lowPumpableColor"
data-cy="lowPumpableColor"
type="text"
/></ValidatedForm>
)}
</Col></Row>
Can anyone enlighten me on another way around this.. And besides the Validation form indeed has a closing tag but it is not within the same Col
There is no closing tag for the ValidatedForm in this line
<Col sm={4}>
<ValidatedForm defaultValues={defaultValues()} onSubmit={saveEntity}/>
</Col>
The tree structure here is also messed up, you might want to fix that
<Row>
<Col sm>
<ValidatedField
label="Low Pumpable Color"
id="terminal-lowPumpableColor"
name="lowPumpableColor"
data-cy="lowPumpableColor"
type="text"
/>
</Col></Row></ValidatedForm>
I'm having a rather stubborn DatePicker that I can't seem to get to behave.
I'm using react-datepicker's DatePicker component.
I have a table, where each row has a DatePicker. Opening the calendar view of the date picker seems to not clear the edge of the table:
I have tried setting style={{zIndex: "9999 !important"}} on the table to no avail.
This appears to be the only solution anyone ever recommends.
The bit of code using the DatePicker component looks like this:
<Row>
<Col>
<DatePicker
onChange={onChangeCallback(user.id)}
autoComplete="off"
shouldCloseOnSelect={false}
dateFormat="dd-MM-yyyy"
selected={date}
placeholderText="Vælg Dato..."
clearButtonTitle="Ryd"
isClearable
/>
</Col>
<Col>
<Calendar
color="#ff7e01"
className="align-middle"
size={18}
/>
</Col>
</Row>
with Row and Col imported from reactstrap.
Interestingly, the DatePicker acts correctly when not using Row and Col, so something in there must be causing this interference.
Any clues?
I know you've already tried the position: fixed option, but as ccallendar alludes to, the library #popperjs/core used by datepicker-react has changed since then, more specifically:
"7. Change positionFixed
In Popper 2, this is now the strategy option:
createPopper(reference, popper, {
strategy: 'fixed',
});
"
-- https://popper.js.org/docs/v2/migration-guide/#7-change-positionfixed
Applying that to your question, then this should work:
<Row>
<Col>
<DatePicker
onChange={onChangeCallback(user.id)}
autoComplete="off"
shouldCloseOnSelect={false}
dateFormat="dd-MM-yyyy"
selected={date}
placeholderText="Vælg Dato..."
clearButtonTitle="Ryd"
isClearable
popperProps={{ strategy: "fixed" }}
/>
</Col>
<Col>
<Calendar
color="#ff7e01"
className="align-middle"
size={18}
/>
</Col>
</Row>
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>
I'm using reactstrap components.
there is more than one input.
how do I set some fields to "required".
that is, the user cannot pass idle. how can such restrictions be made?
<Row>
<Col xs="2">customer name</Col>
<Col xs="6">
<Input
required
maxLength={"20"}
type={"text"}
placeholder={"customer name"}
name={"customerName"}
defaultValue={this.state.customerName}
onChange={this.handleChange}
/>
</Col>
</Row>
Did you try this one: https://availity.github.io/availity-reactstrap-validation/ ? Does a pretty good job.
Sorry to write here, but it seems at don't have enough reputation to answer.
availity-reactstrap-validation extends the reactstrap forms with some nice functions like validation.
In order to have labels on left and inputs on right you can mix them like this:
<AvForm onValidSubmit={handleValidSubmit} onInvalidSubmit={handleInvalidSubmit}>
<FormGroup row>
<Label for="name" sm={2}>Name</Label>
<Col sm={10}>
<AvField name="name" type="text" required />
</Col>
</FormGroup>
</AvForm>
Be sure that you have imported all the libraries.