<Popover
visible={visible}
content={content}
overlayInnerStyle={{ borderRadius: "8px", textAlign: "center" }}
placement="top"
>
<div
className="example-div"
id={exampleId}
contentEditable="true"
dangerouslySetInnerHTML={{ __html: styledExample }}
onClick={this.onHandleClick}
/>
</Popover>
Here Popover visibility has been managed using state.
I have added placement="top", as the div size is 100%, so Popover is getting populated on top middle of the div.
How can i align Popover placement exactly at clicked place instead of top middle.
Related
I'm currenty creating cards with bootstrap 5. I was successfully able to get an image on top, and card body rendering right underneath it. Some of my card title's were longer than others, and I wanted all my card's body to be the same height. I added class 'text-truncate' and was able to truncate long strings of text with ellipsis. I wanted to add a horizontal scroll so that I can just scroll through the long strings rather than have ellipsis on it.
This is my current code for my cards
<div className="row p-5 m-2">
{userShows.map((userShow) => {
return (
<div className="col-sm " key={userShow.show.id}>
<div className="card" style={{ width: 17 + "rem" }}>
<img
src={userShow.show.images[1].url}
alt="podcastimg"
className="card-img-top"
/>
<div className="card-body ">
<h5
style={{ textAlign: "center" }}
className="card-title text-truncate overflow-scroll"
>
<Link
to={`/show/${userShow.show.id}`}
className="stretched-link"
>
<span style={{ fontWeight: "bold", color: "white" }}>
{userShow.show.name}
</span>
</Link>
</h5>
<span className="card-text">
<h6
style={{
textAlign: "center",
fontSize: "14px",
fontWeight: 400,
color: "white",
}}
>
{" "}
{userShow.show.publisher}
</h6>
</span>
</div>
</div>
</div>
);
})}
</div>
When I add both classes 'text-truncate' and 'overflow-scroll' this is how my cards look:
I'm able to scroll, but the full text isn't there.
When I delete class 'text-trucate', the horizontal scroll obviously does not work since the full card-text is being rendered:
I was unable to find any docs on how to make my card body (card-title and card-text) in one line where I can horizontally scroll instead of using class 'text-trucate'
Does anyone know how I can achieve this? Any tips will be greatly appreciated, thanks in advance!
I have made 3 cards in ReactJS using material-ui, so the problem I am facing is that the first card's paragraph is small and the second and third card's paragraph is a bit bigger so when I am placing my button the position of the button differ in all the 3 cards and because of that each paragraph buttons are not aligned properly in vertically center.
I have attached the image of the problem I am facing.
[1]: https://i.stack.imgur.com/ZkGVc.jpg
Here is the CodeSandBox link :-https://codesandbox.io/s/vigilant-sanderson-yp491?fontsize=14&hidenavigation=1&theme=dark
Below is my ReactJS and material-ui code
const Room = ({room}) => {
const classes = useStyles() ;
return (
<Card className={classes.root}className={classes.cards}>
<CardMedia className={classes.media} image={room.image} title={room.name}/>
<CardContent>
<div className={classes.CardContent}>
<h2>{room.name}</h2>
<Typography>
{room.description}
</Typography>
</div>
<Button variant="outlined" color="primary" justify="space-around">
Primary
</Button>
</CardContent>
<CardActions disableSpacing className={classes.CardActions}>
</CardActions>
</Card>
)
}
style.js
import { makeStyles } from '#material-ui/core/styles';
export default makeStyles(() => ({
media: {
height: 280,
},
cards:{
height:600
},
cardContent: {
display: 'flex',
justifyContent: 'space-between',
},
cardActions: {
justifyContent: 'space-between',
},
buttons: {
display: 'flex',
alignItems: 'center',
},
h5:{
fontfamily: 'Ubuntu',
},
}));
How can I align those buttons in each card vertically in the center while keeping the size of the paragraph the same?
As mentioned in the comment, if I understand well what you're trying to achieve, one possible solution would be to have the description have a fixed height. You can then add a scrollbar to it, and therefore the buttons will be aligned. Alternatively, instead of the scrollbar you could use a "show more" button to expand the content.
I have updated the codepen with an example using the browser native scrollbar - codepen
To enhance the solution you could look into using a slim scrollbar solution, such as react-perfect-scrollbar
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 put a div inside an a tag with an intent that only when I hover on the area occupied by the div, I will get the hand cursor.
But it has a strange behavior.
You can see that the div has fixed dimensions (red border).
But even if I move the mouse outside the div, still the hand cursor appears.
Why?
Like I said I basically want only the area inside the red border to be clickable.
Here is the code:
const AppCustomIcon = (props) => {
return (
<a target="blank"
href={props.url}>
<div style={{
height: 100,
width: 100,
display: "flex",
flexDirection: "column",
border:"1px solid red",
alignItems: "center"
}}>
<IconButton
style={{marginRight: 10}}
onClick={props.handleClick}
>
{props.icon}
</IconButton>
<Typography variant={"body1"}>{props.text}</Typography>
</div>
</a>
)
}
Anchor tag a by default is display: inline.
If you are applying styles to an element that contains flow elements or any other elements that are represented in CSS as display: block, you should set the itself to a proper block container type such as block or inline-block for its layout to work as intended.
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>