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>
Related
Sorry if this has been asked, I looked and couldn't find the answer!
I have a Material UI listview that has a set width (it's in a sidebar). I am trying to render the titles of some options, and the Primary text of ListItemText is wrapping past its container. Why is it not simply extending the container's height and going multi-line?
Thanks so much in advance!
return (
<ListItem
key={network._id}
selected={user.network && user.network._id === network._id}
>
<ListItemText
primary={network.name}
sx={{ maxWidth: '100%' }}
/>
<IconButton>
<DoubleArrowIcon />
</IconButton>
</ListItem>
);
All,
If you have my problem, here is what worked for me:
<ListItemText
primary={tooLongTitle}
primaryTypographyProps={{ style: { whiteSpace: "normal" } }} />
Credit:
multiline with <ListItemText>
Im trying to make image to fit a div.
Im using react-slideshow-image.
this is the CodSandbox :
https://codesandbox.io/s/react-slide-imageshow-heightproblem-mforb?file=/src/App.js
return (
<div className="App">
<div style={{ width: "30%", height: "70px" }}>
<Slide ref={this.slideRef} {...properties}>
{slideImages.map((each, index) => (
<img style={{ objectFit: 'contain', height : '100%'}} src={each} key={index} alt="sample" />
))}
</Slide>
</div>
</div>
I want the images to fit the div , so i can make the div responsive.
if the div height is 70px, so the images inside it will also be the same height:70px
I have tried this How to make an image fit the carousel?.
I have noticed that the <Slide > add divs so i looked at the docs and saw that you can add a property called cssClass that gets a string:
Use this prop to add your custom css to the wrapper containing the sliders. Pass your css className as value for the cssClass prop
but it doesnt seems to work and i didnt found any examples for it.
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
Hello I try to make data view with prime react component in Dialog with dynamic photo size content. By default the photo popup with scroll bar and in the centre of screen.
How to make it with dynamic size and without scrollbar and on top of the screen.
I tried to use max/min height and weight but there is no result.
Found "Dynamic content may move the dialog boundaries outside of the viewport. Common solution is defining max-height via contentStyle so longer content displays a scrollbar." from https://www.primefaces.org/primereact/#/dialog
But how implement it.
<Dialog header="Client Details"
visible={this.state.visible}
modal={true}
onHide={() => this.setState({visible: false})}>
{this.renderClientDialogContent()}
</Dialog>
renderClientDialogContent() {
if (this.state.selectedClient) {
return (
<div className="p-grid" style={{fontSize: '16px', textAlign: 'center', padding: '20px', maxHeight:'800px', maxWidth:'700px', minWidth:'300px'}}>
<div className="p-col-36" style={{textAlign: 'center'}}>
<img src={this.state.selectedClient.bigPhotoLink}
alt={this.state.selectedClient.name} />
</div>
<div className="p-col-12">{this.state.selectedClient.name}</div>
<div className="p-col-12">{this.state.selectedClient.description}</div>
</div>
);
}
else {
return null;
}
}
How to make dialog size equal photo size.
Just pass the contentStyle object with the desired max-height, (the same way you do with the style attribute):
<Dialog
contentStyle={{ maxHeight: "300px" }}
header="Client Details"
visible={this.state.visible}
modal={true}
onHide={() => this.setState({visible: false})}
>
{this.renderClientDialogContent()}
</Dialog>
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.