I have an AntD Modal which has a Form that I'm struggling to align some text on. Here is what it looks like with the text highlighted in yellow. I would like it to be aligned with the first column where I've drawn the red box.
The section of code that contains the "personal information" text and the applicant form fields looks like this:
<Form
ref={this.formRef}
{...formItemLayoutWithOutLabel}
onFinish={onFinish}
id="myForm"
validateMessages={validateMessages}
initialValues={{ applicants: [{ firstName: '' }] }}
>
{
<Form.List name="applicants">
{(fields, { add, remove }) => {
return (
<div>
<Form.Item {...formItemLayout}}>
<Row>
<Col span={24}>
Personal Information
</Col>
</Row>
</Form.Item>
{fields.map((field, index) => (
<Form.Item {...formItemLayout} label={`Applicant #${index + 1}`} key={field.key}>
<Row key={field.key} gutter={[0, 8]} justify="start">
<Col span={12}>
<Row gutter={[4, 4]}>
<Col span={7}>
<Form.Item name={[field.name, 'firstName']} fieldKey={[field.fieldKey, 'firstName']} rules={rules}>
<Input placeholder="First Name" ref={this.inputRef} />
</Form.Item>
</Col>
I thought perhaps if I set the label to a blank space it'd accomplish what I want on the form item and it does, but of course, the colon remains which I don't want. So I'm guessing this is not the right way to accomplish this and perhaps there's a better CSS route to go or something.
I'm looking for help on how to get the alignment that I want. Ultimately I'd also like to put "Employer Information" aligned with the right column over the employer information as well.
EDIT #1
Adding a simplified codesandbox of this problem here. Appreciate any ideas!
CodeSandBox
There is an option for Form.Item to display the colon behind the label. You can check it out here
Disable it would accomplish what you want
<Form.Item {...formItemLayout} label=" " colon={false}>
<Row gutter={[0, 8]} justify="start">
<Col span={12}>Personal Information</Col>
<Col span={12}>Employer Information</Col>
</Row>
</Form.Item>
You can add labelCol and wrapperCol like below:
<Form
layout="horizontal"
labelCol={{
span: 6
}}
wrapperCol={{
span: 18
}}
labelAlign="right"
>
...
</Form>
Related
I have those purple lines ( as my screen bellow ).
I doing some conditionnal rendering, I'd like to know if I can remove all those purple lines.
I've heard removing all divs and adding React.Fragments might help, this what I've done so far. But the issue is still there.
If anyone could tell where the issue might come from, I'd be grateful !
the main view / Render 1
<div className="user-infos">
<h4><u> Parameters </u></h4>
{ (componentState == "edit") ?
<form >
<Render 3/>
</form>
: (componentState == "index") ?
<Render 2/>
: (componentState == "delete") ?
<React.Fragment>
<p> Are you sure you want to leave us ? </p>
<p> If yes, you have to type your email and press "confirm".</p>
<form>
<input type="text" />
<input type="submit" value="confirm email"/>
</form>
<span>
<button> Delete ur account</button>
<button> Cancel </button>
</span>
</React.Fragment>
: ""
}
</div>
Render 2
return (
<React.Fragment>
<p> Username : John </p>
<p> Timezone : London </p>
<span>
<button> Edit Profile </button>
<button> Delete account </<button>>
</span>
</React.Fragment>
Render 3
return (
<React.Fragment>
<label for="email"> Username :
<input type="text"/>
</label>
<label for="text"> Timezone :
<span>
<select
onChange={options}
<options>
</select>
</span>
</label>
<button type="submit"> Save Profile </button>
<button> Cancel </button>
</React.Fragment>
);
By default, chrome adds styling to your html. In the case of <p>, it adds the following css to your element.
If you want the margin to disappear, you need to set margin: 0; on your <p> element to overwrite chrome's styling.
The purple dash line occurs when there is available space for the elements to expand into. See here. From what I can tell from comparing flexboxes with other display types, the purple dash with purple background is specifically for space inside flexboxes (display:flex in CSS).
Would need to see your CSS to be sure, but I imagine there's justify-content: space-between telling the flexbox to evenly distribute the remaining empty space between the elements as well as flex-direction: column telling the flexbox to stack the child elements vertically.
If that's the case, you can remove justify-content: space-between and use flexbox styling to change things to how you want it to look. I found this website helpful: A Complete Guide to Flexbox
I tried to add a required element (when the box become red if not text is inside) on my form but without success, I installed react-strap, Bootstrap. when I apply many changed it didn't work for no reason
and it's just not moving if someone know why I would be happy.
render() {
return (
<div>
<form class="needs-validation" novalidate>
<InputGroup size="sm">
<InputGroupAddon addonType="append" className="m-2">
<Input
className="form-control"
placeholder="Add a new To-Do. "
onChange={(e) => this.updateInput(e.target.value)}
value={this.state.input}
onKeyPress={this.handleKeyPress}
required
/>
<Button
color="primary"
size="sm"
className="add-todo"
onClick={this.handleAddTodo}
>
Add
</Button>
</InputGroupAddon>
</InputGroup>
</form>
</div>
);
}
export default connect(null, { addTodo })(AddTodo);
// export default AddTodo;
What you are doing is passing required as a prop to your class Input. You need to add the html tag when the field renders, i.e. in Input.js:
return (
<input ... required={this.props.required}>
)
i think you should add the 'is-invalid' class to the input element if that field is empty.
https://getbootstrap.com/docs/4.0/components/forms/?#server-side
I have this dropdown list:
As you see it takes-up the whole screen and some items are hidden.
Here's the code:
const statusSearchDropDownValues = (
<Row className="align-items-center">
<Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
<Dropdown
isOpen={this.state.statusSearchropDownOpen}
toggle={() => {
this.toggleStatusSearchDropDown();
}}
>
<DropdownToggle className="my-dropdown" caret>
{this.state.statusSearchDropDownValue}
</DropdownToggle>
<DropdownMenu>
<DropdownItem>
{" "}
<div
value="operation_cree"
onClick={this.changeStatusSearchDropDownValue}
>
Operation créée
</div>
</DropdownItem>
{/* Multiple other DropdownItems */}
</DropdownMenu>
</Dropdown>
</Col>
</Row>
);
Since it's long, the user cannot see the last values.
I have searched how to make it scrollable. But, I didn't find anything.
Any suggestions as to how to solve this?
Try to add this style to the DropdownMenu element:
...
<DropdownMenu style={{maxHeight:"200px", overflow:"scroll"}}>
...
I am trying to get my text area to display with row height recognition. I've followed several of the suggestions that have been made on this board.
I currently import componentClass from react-bootstrap and in my form field, I have:
<div className="form-group">
<label htmlFor="overview">Outline your proposal</label>
<Field
name="overview"
componentClass="textarea"
rows={4}
className={
"form-control" +
(errors.overview && touched.overview ? " is-invalid" : "")
}
/>
<ErrorMessage name="overview" component="div" className="invalid-feedback" />
</div>
It still renders in a single line.
What is the hidden secret about making this work with row numbers for text area?
I am using react-bootstrap with a project and one component is having code as below. I want the input and button to appear together and take up the whole space provided by the Col. These both(input and button) are showing up together but the complete space is not occupied. Please Help!
<Row>
<Col xs={12} md={10} mdOffset={1} >
<Form className="addGoalForm" inline onSubmit={
handleSubmit
} >
<FormGroup className="addGoalForm">
<InputGroup>
<FormControl ref={textInput} type="text"/>
</InputGroup>
<Button bsStyle="primary" type="submit"> Add Goal </Button>
</FormGroup>
</Form>
</Col>
</Row>
Try taking the inline prop off from the Form
Problem:
The problem with your code is, you created an outer column, and added two elements inside it, they will just stack to the left - this is default behavior.
Solution:
Add column size for both input and button.
How?
Bootstrap col-xs-10 for input and col-xs-2 for button to occupy col-xs-12 of parent(consider your grid size for md, l sizes)
Create custom classes with width 80%/20% or as required.