InputGroup not taking remaining space - css

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.

Related

Why does the flex gap changes for some flex-items only?

Input and Label:
Input, Icon and Label:
Icon and Label:
Label only:
There are no additional styles or margins applies to the input or label.
The container is flex with a gap set to 12px.
Where does that extra space come from when it's only the input and the label?
PS:
I am using Stencil.js.
The icon is a separate stand-alone component nested between the input and label, which are html elements. The icon is conditionally shown depending on whether or not an icon name is passed to the component.
This is what my code looks like:
return (
<a href="javascript:;" class={`dropdown-item ${this.checkboxColor}`}>
{this.checkable && <input type="checkbox" id="checkbox4" class={`form-check-input`} />}
<ifx-icon icon={this.icon}></ifx-icon>
<label htmlFor="checkbox4" class="form-check-label"><slot /></label>
</a>
)

How do you put padding/margin around the content of the drawer in antd?

It is showing up like this for me.
How do I make the content have padding, without having to write custom CSS and use the className property? My drawer essentially looks like this:
<Drawer
closable
visible
width={400}
placement="right"
title="Create"
>
<Form
layout="vertical"
>
<Form.Item name="name" label="Name">
<Input />
</Form.Item>
</Form>
</Drawer>
You can use the antd Grid to wrap your drawer content inside a row-col wrapper. To define the padding you can use the gutter property of row.
There is already and example for that on the antd drawer demo page.

Purple lines / Conditionnal rendering

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

How to resolve text alignment issue in AntD form

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>

React bootstrap form textarea row height

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?

Resources