I am trying to align things side by side using reactstrap
<Container>
<Row>
<Col>Text1</Col>
<Col>Text2</Col>
</Row>
</Container>
What i want is
[![enter image description here][1]][1]
https://codesandbox.io/s/awesome-banach-wep37?file=/src/App.js:740-847
I tried
<Container>
<Row md="auto">
<Col>Text1</Col>
<Col>Text2</Col>
</Row>
</Container>
BUt nothing changes
[1]: https://i.stack.imgur.com/1rrH2.png
Related
I'm trying to code the most basic grid.
1 Row, 2 Columns. I can't get it to create 2 columns...
Here's my code:
<Row>
<Col span={12}>Col 1</Col>
<Col span={12}>Col 2</Col>
</Row>
Here's how it's displayed
The code you have written is correct. Make sure that you have imported Antd CSS (import 'antd/dist/antd.css')
import React from 'react';
import 'antd/dist/antd.css';
import { Row, Col } from 'antd';
const Demo = () => {
return (
<>
<Row>
<Col span={12}>Col 1</Col>
<Col span={12}>Col 2</Col>
</Row>
</>
);
}
export default Demo;
I have a centered Toolbar in Material UI that has 3 components. Each component is a button. I want to add a margin around each button. I tried adding the {mt} option to the component button as below, but nothing changed. I've been experimenting with makeStyles, but haven't figured it out.
<Box display="flex">
<Box m="auto">
<Toolbar>
<SeasonComponent>
<WeekComponent>
<GameComponent>
</Toolbar>
</Box>
</Box>
Season component:
return (
<div>
<Button
variant="outlined"
color="primary"
onClick={handleClickOpen}
mt={2}
>
Button text
</Button>
</div>
Here is a picture of the buttons:
You can wrap buttons in a horizontal <Stack>:
<Toolbar>
<Stack spacing={2} direction="row">
<SeasonComponent>
<WeekComponent>
<GameComponent>
</Stack>
</Toolbar>
Here's a simple example: https://codesandbox.io/s/basicbuttons-material-demo-forked-0gpgz?file=/demo.js:234-269
Rather than upgrade my repo to version 5 right now, I just added an invisible button between the buttons. Not a perfect solution, but it solved the problem in the short term.
// SpacerButton.js
import React from 'react';
import Button from '#material-ui/core/Button';
const style = {
minWidth: 1
}
export default function SpacerButton(props) {
return (
<Button variant="text" style={style}>
</Button>
);
}
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>
If I have:
<Container maxWidth='lg'>
<Grid container spacing={3}>
<Grid item xs={12} md={6} >
<Image src="/img/undraw_programming_2svr.png" color='transparent' aspectRatio={1041 / 554} />
</Grid>
<SomeElement />
</Container>
How can I have SomeElement expand to full width?
First, A few things that were already mentioned, Your grid tagging is wrong and I understand that it's a mistake and probably not essential to your question.
The answer to your question is no, the point of the container is to stop SomeElement from expanding. A simple fix, however, would be to stop the container, render SomeElement, and then start a new container.
<Container>
...
</Container>
<SomeElement />
<Container>
...
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.