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
Related
I want to set the position of the dropdown element such that when I click on that it should remain in the same position and it should not move. As of now when I am clicking on the dropdown icon it is moving down. How can I fix this? I want that icon to stick to the input element and should not move up or down on clicking the icon.
Here's the code :
<Grid item md={6} lg={6} xs={12}>
<div className="milestone-due-date">
DUE DATE
</div>
<label>
<DatePicker
dateFormat="MM/dd/yyyy"
margin="normal"
selected={due_date}
placeholderText="Due Date"
onChange={date=>this.handleChangeDate(date,'due_date')}
maxDate={new Date()}
className={`milestone-input-due-date`}
/>
<img src={DROP_D} alt="drop down" style={{cursor:'pointer'}} className='dropdown-milestone'/>
</label>
{due_date_error && (
<div className="input-error-style">{due_date_error}</div>
)}
</Grid>
<div className="milestone-due-date">
DUE DATE
<label>
<DatePicker
dateFormat="MM/dd/yyyy"
margin="normal"
selected={due_date}
placeholderText="Due Date"
onChange={date=>this.handleChangeDate(date,'due_date')}
maxDate={new Date()}
className={`milestone-input-due-date`}
/>
<img src={DROP_D} alt="drop down" style={{cursor:'pointer'}} className='dropdown-milestone'/>
</label>
</div>
{due_date_error && (
<div className="input-error-style">{due_date_error}</div>
)}
css
.milestone-due-date {position:relative;}label{position: absolute;bottom: -10px;left: 0px;}
I'm using react-bootstrap to make my website responsive. I've used react-bootstrap before and I always encounter this problem: when setting my rows and cols they're slightly to the left and not centered, as if there were no margin. I've used class names to center the whole row, but it's just not responding like I want it to. This is my code and there is no css going on yet
const Projects = () => {
return (
<div className='Projects' >
<Row className='mt-5 pt-5 my-auto'>
<Col lg={4}> <img src={image} alt=""/> </Col>
<Col lg={4}> <img src={image} alt=""/> </Col>
<Col lg={4}> <img src={image} alt=""/> </Col>
</Row>
</div>
);
}
Here's what it looks like It's slightly to the left and has some space on the right. Any help is appreciated!
The Bootstrap grid must be wrapped in a <Container>:
const Projects = () => {
return (
<Container className='Projects' >
<Row className='mt-5 pt-5 my-auto'>
<Col lg={4}> <img src={image} alt=""/> </Col>
<Col lg={4}> <img src={image} alt=""/> </Col>
<Col lg={4}> <img src={image} alt=""/> </Col>
</Row>
</Container>
);
}
I learn React and now I tried in various way to get this to work from reading Stackoverflow question and also the html div doc
As the image show the text and link should be in a straight line not vertically stacked
Can someone help me with this or suggest some reading I can do to learn this maybe
<Box alignItems="center" display="flex" ml={-1}>
<Checkbox checked={values.policy} name="policy" onChange={handleChange} />
<Typography color="textSecondary" variant="body1">
I have read the
<div role="article">
<a target="_blank" rel="noreferrer" href="http://greta.portplays.com/Privacy%20Policy.html">
Privacy Policy
</a>
</div>
</Typography>
</Box>
<Box alignItems="center" display="flex" ml={-1}>
<Checkbox checked={values.policy} name="Terms" onChange={handleChange} />
<Typography color="textSecondary" variant="body1">
I have read the
<div role="article">
<a target="_blank" rel="noreferrer" href="http://greta.portplays.com/Terms%20of%20Service.html">
Terms and Conditions
</a>
</div>
</Typography>
</Box>
Did you try this?
...
I have read the
<span role="article">
<a target="_blank" rel="noreferrer" href="http://greta.portplays.com/Privacy%20Policy.html">
Privacy Policy
</a>
</span>
But since a is an inline element this would work without the span too. You can read a bit more on inline and block elements in css.
so in my render function, I have
render() {
<div>
<form id="one">
<TextField id="t1" ... />
<Button id="b1" />
</form>
<div id="empty"><div/>
<form id="two">
<TextField id="t2" ... />
<TextField id="t3" ... />
<Button id="b2" />
</form>
</div>
}
and i'm trying to center everything horizontally. the 'empty' div in between the forms are to create space between the forms.
How can I do this?
Thanks !
Try Grid system from react bootstrap, With help of Row and Col you will have better control over displaying your controls horizontally and vertically. This is the link for more info. https://react-bootstrap.netlify.com/layout/grid/#grid
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>
);
}