Code
<Box backgroundColor="#fdfdfd" p={6}>
<Flex
justifyContent="center"
alignItems="center"
w="100%"
mt={5}
>
<Heading textAlign="left" fontSize="1.5rem" mb={5} display="block">
Những cán bộ của chúng tôi
</Heading>
{Data.map(userData => <UserInfo key={userData.id} data={userData} />)}
</Flex>
</Box>
Web preview
image
Problem
The Heading is inline, but I don't want to be inline. Is there any way to disable it?
Edit
If I mode Heading above Flex then it will look like this
image
That is due to the fact that the wrapper of the Heading component is a Flex box container. to make Heading sit on it own Row You should wrap it inside a Box element and set attribute w="100%" like this
<Flex wrap="wrap">
<Box w="100%">
<Heading textAlign="left" fontSize="1.5rem" mb={5} display="block">
Những cán bộ của chúng tôi
</Heading>
</Box>
// here will go the {Data.map...}
<Box>
</Flex>
As Box will be a flex item sitting at the same level as UserInfo which are return from the map function. It will take the entire horizontal space available and all other elements will go underneath It.
You should add wrap attribute to the Flex Component so as the box take 100% width available all other will go on a new line
Related
I have a React-Bootstrap Card component that I'm making. I'd like the content in the <Card.Body> to flow from left to right, similar to an HStack in SwiftUI. Currently, the content renders vertically. Is there any way to change this? Below is my code.
function TestCard(props) {
return (
<Card>
<Card.Img />
<Card.Body>
<Card.Title className="fw-bold">Card Title</Card.Title>
<div className="vr" />
<Card.Text>Card Text</Card.Text>
</Card.Body>
</Card>
);
}
I have a material UI accordion and when I expand the accordion, I want to change the color of the accordion summary text.
<Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')} className={classes.root}>
<AccordionSummary
expandIcon={expanded === 'panel1'?<RemoveIcon style={{color:'#008b8c'}} />:<AddIcon style={{color:'#008b8c'}}/>}
aria-controls="panel1bh-content"
id="panel1bh-header"
className={classes.accordionSummary}
IconButtonProps={{
edge: 'start'
}}
>
<Typography className={classes.heading}>
<b>Hi</b>
</Typography>
</AccordionSummary>
<AccordionDetails>
Sample
</AccordionDetails>
</Accordion>
I want to change the color of hi to green on expanding.
Any help is welcome. Thanks
Create another style for the color of the expanded text. Then use a ternary operator to decide it based on the expanded boolean.
<Typography className={expanded === 'panel1' ? classes.expandedText : classes.heading}>
I'm using Material UI Grid to make an image grid and I'm trying to get rid of the empty spaces between some grid items. I've tried changing the alignitems and justify values of the container, but it didn't work.
See image.
return <Grid container alignItems="flex-start" justify="center" className="img-container" spacing={2}>
{/* All images */}
{docs && docs
.map(image => (
// In a grid item
<Grid className="img-item" item key={image.id} xs={12} md={6} lg={4}>
{/* all accounts */}
{docs2 && docs2
.filter((user) => image.userID === user.userID)
.map(user => (
<div key={image.id} className="div">
<img src={image.url} alt="uploaded pic" />
<Typography variant="subtitle1"> By {user.userName}
{/* Delete button only renders if currentUser.uid === image.userID*/}
{handleButton(image.userID) &&
<IconButton
color="secondary" aria-label="delete image"
onClick={() => handleDeleteImage(image.id,
image.userID, image.name)}
component="span" >
<DeleteForever />
</IconButton>}
</Typography>
</div>
))}
</Grid>
))}
</Grid>
}
The problem is the Grid container, Grid item takes the size of its content in that case its image, but the Grid container takes the size of the Larger Grid item in your case the first Grid item that's why the following Grids have spaces below.
In your case, dealing with list of images you should use GridList component not Grid.
Follow this link for more details about it https://material-ui.com/components/grid-list/
I'm using Semantic UI to show some images. It works fine, also to add text near the image but I want to put the text over the image. On the bottom half of the image if possible.
This is my code with text above the image:
import { Grid, Image } from 'semantic-ui-react';
{data.map((element) => (
<Grid.Column>
<>
<div>{element.name + ' ' + element.city}</div>
<Image
src={element.image}
/>
</>
</Grid.Column>
))}
Is there a way to put the text from the div over the image?
You can set the position the div absolute in dependence to the parent
<Grid.Column style={{ position: "relative", display: "flex"}}>
<div style={{position: "absolute",bottom: 20}}>
Name : City
</div>
<Image src={element.image} />
</Grid.Column>
I want the card header to be the normal text together with an image, side by side.
import logo from './images/logo.svg';
render() {
return (
<div>
<Card>
<Card.Content className='left aligned'>
<div className="two column headers">
<Card.Header>Hello World!</Card.Header>
<Image src={logo} size='tiny'/>
</div>
<Card.Meta>Item</Card.Meta>
<Card.Meta>Category</Card.Meta>
</Card.Content>
<Card.Content>
<Card.Description>10 units of test.</Card.Description>
</Card.Content>
</Card>
</div>
);
The image is appearing just after the 'Hello World!' header. How can I put them side by side, left aliging the text and right aligning the image ?
You can do this with CSS, however I will recomend to use Grid there.
<Card.Header>
<Grid>
<Grid.Column width={12}>Hello World!</Grid.Column>
<Grid.Column width={4}>
<Image src={logo} size='tiny'/>
</Grid.Column>
</Grid>
</Card.Header>
By the way, if you want to have an Image component on left, you can use Header component, see examples.