The image enclosed shows the current state of the Segment. Is there a way to make them the same height?
import React, { Component } from 'react';
import { Grid, Segment, Header, Image, Card, Icon, Button, Divider, Radio, Form } from 'semantic-ui-react';
import './UserAccountProfilePage.css';
export default function UserAccountProfilePage() {
return (
<Grid columns={2} stackable className="fill-content">
<Grid.Column width={1} />
<Grid.Column width={7}>
<Segment>
<Header as="h1">Profile</Header>
<Image className="centered" src="/images/daniel.jpg" size="medium" circular />
<Card fluid>
<Card.Content>
<Card.Header>Daniel</Card.Header>
<Card.Meta>Joined in 2016</Card.Meta>
<Card.Description>Daniel is a comedian living in Nashville.</Card.Description>
</Card.Content>
<Card.Content extra>
<a>
<Icon name="user" />
10 Friends
</a>
</Card.Content>
</Card>
</Segment>
</Grid.Column>
<Grid.Column width={7}>
<Segment>
<Header as="h2">Settings</Header>
<Button positive fluid>
Sync Google Calendar
</Button>
<Divider />
<Header as="h4">Text notifications</Header>
<Radio toggle />
<Divider />
<Header as="h4">Customize text notifications</Header>
<RadioExampleRadioGroup />
</Segment>
</Grid.Column>
<Grid.Column width={1} />
</Grid>
);
}
Thanks in advance!
There are two things to look at here. First, you need to add a Grid.Row component in between your Grid component and Grid.Column components. Then you need to add a stretched prop to it.
Add this: <Grid.Row stretched>
Luckily, the styles for this are already part of Semantic UI CSS.
import React, { Component } from 'react';
import { Grid, Segment, Header, Image, Card, Icon, Button, Divider, Radio, Form } from 'semantic-ui-react';
import './UserAccountProfilePage.css';
export default function UserAccountProfilePage() {
return (
<Grid columns={2} stackable className="fill-content">
<Grid.Row stretched>
<Grid.Column width={1} />
<Grid.Column width={7}>
<Segment>
<Header as="h1">Profile</Header>
<Image className="centered" src="/images/daniel.jpg" size="medium" circular />
<Card fluid>
<Card.Content>
<Card.Header>Daniel</Card.Header>
<Card.Meta>Joined in 2016</Card.Meta>
<Card.Description>Daniel is a comedian living in Nashville.</Card.Description>
</Card.Content>
<Card.Content extra>
<a>
<Icon name="user" />
10 Friends
</a>
</Card.Content>
</Card>
</Segment>
</Grid.Column>
<Grid.Column width={7}>
<Segment>
<Header as="h2">Settings</Header>
<Button positive fluid>
Sync Google Calendar
</Button>
<Divider />
<Header as="h4">Text notifications</Header>
<Radio toggle />
<Divider />
<Header as="h4">Customize text notifications</Header>
<RadioExampleRadioGroup />
</Segment>
</Grid.Column>
<Grid.Column width={1} />
</Grid.Row>
</Grid>
);
}
Related
I want to fix the position of react slick carousel,and want to change the navigation dots style.I am trying in this way....
dots style I want,
Screenshot: https://i.stack.imgur.com/MhOQa.png
`<Show above='md'>
<Box w='50%'>
<Slider {...settings} className='customSlide'>
<Box>
<Image
src={avtar}
/>
</Box>
<Box>
<Image
src={avtar1}
/>
</Box>
<Box>
<Image
src={avtar2}
/>
</Box>
<Box>
<Image
src={avtar3}
/>
</Box>
</Slider>
</Box>
<Divider orientation='vertical' variant={'dashed'} borderColor={'grey'} height='100vh' />
</Show>
`
CSS:
.customSlide{ position: fixed!important; }
Thanks in advance..
I'm struggling to get .flex-grow-1 in Bootstrap 4.6.0 (with react-bootstrap 1.5.2) to get a component on my layout to expand to fill the remaining vertical space available.
"bootstrap": "^4.6",
"react-bootstrap": "1.5.2",
The following code produces a wireframe of the screen layout that I am trying to build.
import React, { Component } from "react";
import { Col, Row } from "react-bootstrap";
import './SingleSignIn.scss'
class SignUpLayout extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
const { country } = this.state;
return (
<Row>
<Col id="left-column" className="grid bg-warning" style={{height: "100vw"}}>
<Row className="grid flex-nowrap">
<Col className="grid">
{/* left margin */}
</Col>
<Col className="grid" xs={6} sm={6} md={6} lg={6} xl={6}>
<Row className="grid" style={{height: "80px"}}>
Welcome To:
</Row>
<Row className="grid" style={{height: "125px"}}>
logo goes here
</Row>
</Col>
<Col className="grid">
{/* right margin */}
</Col>
</Row>
<Row id="body" className="grid bg-danger flex-grow-1 flex-nowrap">
<Col className="grid">
{/* body left margin */}
</Col>
<Col className="grid" xs={10} sm={10} md={8} lg={8} xl={8}>
<Row className="grid" style={{height: "10%"}}>
e-mail input
</Row>
<Row className="grid" style={{height: "10%"}}>
company name input
</Row>
<Row className="grid" style={{height: "10%"}}>
country input
</Row>
<Row className="grid" style={{height: "10%"}}>
phone number
</Row>
<Row className="grid" style={{height: "10%"}}>
get started button
</Row>
</Col>
<Col className="grid">
{/* body right margin */}
</Col>
</Row>
</Col>
<Col id="right-column" className="grid" style={{height: "100vw"}}>
Right Column
</Col>
</Row>
)
}
}
export default SignUpLayout;
My intention is to get the component identified as #body to grow vertically to fill the remaining vertical space available on the viewport. I'm using the .flex-grow-1 class to try to accomplish this based on other similar posts that I came across in my search but it's not having the desired effect.
The resulting wireframe layout that I get from the above code is the following:
Thanks in advance for the pointers.
I'm using a Material UI list component in my code.
Here is the code snippet:
<List>
<ListItem button>
<ListItemText
disableTypography
primary={<Typography>Hello</Typography>}
/>
<p>John</p>
<DraftsIcon />
</ListItem>
</List>
Here is the screenshot of the result:
How can I set a fixed distance between "Hello" and "John"?
and avoid the following case:
// just add minWidth in button
<List>
<ListItem button>
<ListItemText
style={{minWidth:"50px" }}
disableTypography
primary={<Typography>Hello</Typography>}
/>
<p>John</p>
<DraftsIcon />
</ListItem>
</List>
you can also do something like this:
import React from 'react';
import Box from '#material-ui/core/Box';
import { IconButton, Typography } from '#material-ui/core';
import DraftsIcon from "#material-ui/icons/Drafts";
export default function FlexGrow() {
return (
<Box display="flex" p={1} >
<Box p={1} flexGrow={1} >
<Typography variant="button" display="block" gutterBottom>
Hello
</Typography>
</Box>
<Box p={1} >
<Typography variant="button" display="block" gutterBottom>
John
</Typography>
</Box>
<IconButton color="inherit" style={{marginTop :"-10px"}}>
<DraftsIcon/>
</IconButton>
</Box>
);
}
Can you help me understaing why the white shirts images go next line and not below the blue ones?
I'm using material ui for reactjs:
<Grid item xs={12} md={6}>
<GridList cellHeight={100} cols={4} rows={2}>
<GridListTile rows={2} cols={2}>
<img src="https://..." />
</GridListTile>
<GridListTile>
<img src="https://..." />
</GridListTile>
<GridListTile>
<img src="https://..." />
</GridListTile>
<GridListTile>
<img src="https://..." />
</GridListTile>
<GridListTile>
<img src="https://..." />
</GridListTile>
</GridList>
</Grid>
What am I doing wrong?
EDIT: for clearness this is the searched result:
And this is the code snippet:
https://codesandbox.io/embed/material-ui-drawer-demo-3txbo
I am learning React and I have some trouble with using the bootstrap grid/reactstrap. Somehow when I use the grid system, instead of aligning horizontal columns, I got a vertical one.
Film.js
import React from "react";
import logo from "./ghibli.png";
import { Container, Row, Col } from "reactstrap";
import { Card, CardImg, CardText, CardBody,
CardTitle, CardSubtitle, Button } from 'reactstrap';
const Films = props => (
<Container>
<Row>
<Col md= "3">
<Card>
<CardImg top width="100%" src={logo} alt="Card image cap" />
<CardBody>
<CardTitle>{props.title}</CardTitle>
<CardSubtitle>{props.director}</CardSubtitle>
<CardText>{props.description}</CardText>
<Button>Button</Button>
</CardBody>
</Card>
</Col>
</Row>
</Container>
);
export default Films;
Currently, you only have one column (col) in a row.
As soon as you add more than column into a row, they'll start showing up side by side i.e. horizontally.
I have no clue about reactjs but I suspect that the following code will probably do the trick and produce 2 columns in a row:
const Films = props => (
<Container>
<Row>
<Col md= "3">
<Card>
<CardImg top width="100%" src={logo} alt="Card image cap" />
<CardBody>
<CardTitle>{props.title}</CardTitle>
<CardSubtitle>{props.director}</CardSubtitle>
<CardText>{props.description}</CardText>
<Button>Button</Button>
</CardBody>
</Card>
</Col>
<Col md= "3">
<Card>
<CardImg top width="100%" src={logo} alt="Card image cap" />
<CardBody>
<CardTitle>{props.title}</CardTitle>
<CardSubtitle>{props.director}</CardSubtitle>
<CardText>{props.description}</CardText>
<Button>Button</Button>
</CardBody>
</Card>
</Col>
</Row>
</Container>
);