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>
Related
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.
<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.
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
My requirement is that, I have multiple tabs on web page and in each tab data come from API. The data is dynamic and daily changing. I have a div say a rectangular box of fixed height and below it, there is button "Read more / Read less".
If data contained in that rectangular box exceeds the height of that box, "Read more" button will be shown, otherwise if the data size is small, button is invisible.
I have done most of these things and have two problems with my code is that,
Sometimes data shown as partial data i.e. when data size is big, part of the data is hidden back of toggle button and at the same time bottom text line is partially hidden behind box or button.
after clicking read more I can scroll the data up & down. But if I click "Read less" button on scrolled down condition, that div locks over there and scrolling stops. I want that, I may be anywhere on the scrolling page and if I click "Read less", the page should automatically scrolled to top and scrolling should stop.
I am attaching my sample code. I have removed some of the classNames for security issue, please help for above two points..
<div id="tab_number" >
<div className="">
<div className=''>
<div ref={`showTheScrolling`} className={`${Theme} parent`} style={{overflow:"hidden"}}>
<h3>Tab Heading</h3>
{
<div className="content" style={{height:"475px"}} dangerouslySetInnerHTML={{ __html: this.state.thisData.tabData }}></div>
}
</div>
{this.state.thisData.tabData.length > 1500 ?
<div>
<div ref={`buttonShowMore`} className="">
<a id="ClickForShowMore" onClick={() => { this.toggleShow_more() }}><b>Show More</b></a>
</div>
<div ref={`buttonShowLess`} className=" showButton_hide">
<a id="ClickForShowMore" onClick={() => { this.toggleShow_less() }}><b>Show Less</b></a>
</div>
</div> : ""
}
</div>
</div>
and two functions above render() section
toggleShow_more = () => {
console.log(this.refs)
this.refs[`showTheScrolling`].classList.add('filterscroller');
this.refs[`buttonShowMore`].classList.add('showButton_hide');
this.refs[`buttonShowLess`].classList.remove('showButton_hide');
}
toggleShow_less = () => {
console.log(this.refs)
this.refs[`showTheScrolling`].classList.remove('filterscroller');
this.refs[`buttonShowMore`].classList.remove('showButton_hide');
this.refs[`buttonShowLess`].classList.add('showButton_hide');
this.refs[`showTheScrolling_${id}`].scrollTo({top: 0, behavior: 'smooth'});
}
For above first problem, we can use splitString(). Here we count up to 300 characters, if count is more, then we check first 50 words and show them in small window followed by toggle button will be provided for complete view.
If character count is less than 300, no toggle.
So, here the toggle window size is dynamic. It depends on characters or words count and it is changing along font size. The problem of partial viewing text behind some other div, box or button can be easily solved here.
{
// if tabData character length > 300 then
this.state.thisData.tabData.length > 300 ?
<div>
{this.state.readMore ?
<div className="your-classname" style={{ margin: "20px" }}
dangerouslySetInnerHTML={{ __html: this.state.thisData.tabData }}>
</div>
:
<div className="your-classname" style={{ margin: "20px" }}
dangerouslySetInnerHTML={{ __html: this.splitString(this.state.thisData.tabData, " ", 50) }}>
</div>
}
<div>
<a className="your-classname2" style={{ }}
onClick={() => this.toggleReadMore()}>
{this.state.addRead ?
// if you are working with mobile view also, the for css adjustment select appropriate class
<div className={this.props.isMobileView ? "selectclass-if-isMobileViewTrue":"selectclass-if-isMobileViewFalse"}
>READ MORE
</div>
</React.Fragment>
:
<React.Fragment>
<div className={this.props.isMobileView ? "selectclass-if-isMobileViewTrue":"selectclass-if-isMobileViewFalse"}
>READ LESS
</div>
</React.Fragment>}
</a>
</div>
</div>
:
// if tabData character length < 300 then
<div className="your-classname" style={{ margin: "20px" }}
dangerouslySetInnerHTML={{ __html: this.state.thisData.tabData }}>
</div>}
I tried to code this thing. But the CardMedia will not go together with the checkbox. so responsive is a failure.
<Card>
<CardMedia
component='img'
alt=''
height='160'
image=''
title='Image'
style={{ backgroundColor: '#DEDBDB',
position: 'relative' }}
/>
{/*<input type='checkbox' id='select'*/}
{/* style={{ position: 'absolute', marginLeft: '20%', marginTop: '-2%'}}*/}
{/*/>*/}
{/*<label htmlFor='select'*/}
{/* style={{ position: 'absolute', marginLeft: '21%', marginTop: '-2.15%'}}*/}
{/*>選択</label>*/}
<Box mt={-6} ml={45}>
<span><Checkbox inputProps={{ 'aria-label': 'uncontrolled-checkbox' }} /></span>
</Box>
</Card>
I tried also the FormControlLabel for this so that the label and checkbox will be together and style it with position: absolute and some margins so that the result will be like this.
But the problem is that it is not responsive and if using box label disappear.
Thanks.
Ciao, your problem is connected to the zIndex of the label in FormControlLabel. Infact, if you inspect the page you can see the label present on DOM but invisible (maybe because on CardMedia the image is always on top, but this is my personal opinion).
To solve this problem, you can override the style of the label associated to the FormControlLabel. This is a codesandbox example.
At first I defined a CustomCheckbox:
const CustomCheckbox = withStyles((theme) => ({
root: {
// checkbox style example
// color: "#000000"
// '&$checked': {
// color: "#000000",
// },
},
checked: {}
}))((props) => <Checkbox color="default" {...props} />);
Then, I used it into Card:
<Box mt={-6} ml={45}>
<span>
<FormControlLabel
control={
<CustomCheckbox
checked={cheboxChecked}
onChange={handleChange}
name="toggleFavorite"
/>
}
label="Checkbox label" // label value
classes={{
label: styles.formcontrollabel // label class overriding
}}
/>
</span>
</Box>
And finally in makeStyles I made the override:
const useStyles = makeStyles(() => ({
formcontrollabel: {
"&.MuiFormControlLabel-label": {
zIndex: 1
}
}
}));
The result is:
The label is responsive also (in this case "label" word goes on new line if you reduce screen width) as long as possible (if you continue to reduce screen width, label will be cutted). But this is normal (because you defined Box like <Box mt={-6} ml={45}>). If you don't like this behaviour, you could use a Hidden component to hidden checkbox and label if screen goes under a certain breakpoint like:
<Hidden smDown> // if screen width goes under smDown breakpoint, the Hidden content will be hided
...
</Hidden>