Develop Reference

How can I position button dynamatically according to page components?

In React application I am displaying list of images. When individual book is removed Hide Books button takes the place to that component.
What I am trying to achieve is Hide Books button should remain at the same position and should dynamatically change its position on y axis if whole row of books is deleted
Initial state of application
When individual book is removed -
app.js
return(
<div style={{ position: "relative", minHeight: "100vh" }}>
<button
style={{
position: "absolute",
bottom: "",
}}
onClick={clearBooks}
>
Hide Books
</button>
</div>
)

could you share more of your code? maybe have a codesandox example? It seems to be a styling issue but it's hard to tell without more code.
-edit-
your button should be separated from your list of books, this is the reason why it essentially "follows" your last book card.
Try to do something like this
return (
<section className='wrapper'>
<div className='bookList'>
{booksData.map(book => {
//code your books here
}
</div>
//then put your button out of the div
<button onClick={function}>hide books</button>
</section>
)
your CSS for the wrapper div could be something like this
.wrapper{
display: flex;
flex-direction: column
}
this way you'll have the books first then the button will be displayed below the list

Place the button as the next sibling to the section of Books. Shown in the following. All I did was to move the button out of the section. You will have to style the button with padding and such for the updated layout.
// in index.js, BookList
return (
<>
<section className="booklist">
{booksData.map((book, index) => {
return (
<Book
key={index}
{...book}
removeIndividualBook={removeIndividualBook}
></Book>
);
})}
</section>
{booksData.length === 0 ? (
<button onClick={handleShowBook}>Show Books</button>
) : (
<div style={{ position: "relative", minHeight: "100vh" }}>
<button
style={{
// position: "absolute",
// marginTop: "2350px",
// marginLeft: "28px",
position: "absolute",
//left: "12%",
bottom: "",
}}
onClick={clearBooks}
>
Hide Books
</button>
</div>
)}
</>
);

React MUI: Set fixed height for Dialog component

I am trying to create a dialog (https://mui.com/components/dialogs/), I have tried setting the sx value minHeight, height etc. but when the dialog renders it changes height depending on whats inside.
How can I fix the height to 80% of the window and make sure it does not shrink when there is less content to fill the space?
<Dialog onClose={handleClose} open={open} fullWidth={true} maxWidth="lg" sx={{ height: '80%' }}>
<DialogTitle sx={{ m: 0, p: 2 }}>
Search drft
<IconButton
aria-label="close"
onClick={handleClose}
sx={{
position: 'absolute',
right: 8,
top: 8,
color: (theme) => theme.palette.grey[500],
}}
>
<CloseIcon />
</IconButton>
</DialogTitle>
<DialogContent dividers>
{/* <DialogTitle>Search drft</DialogTitle> */}
<GlobalSearch />
</DialogContent>
</Dialog>
Update: following some advice from a different question I made the following update and the dialog is now fixed at 80% height no matter how tall the content is!
<Dialog
PaperProps={{
sx: {
minHeight: '80%',
maxHeight: '80%'
}
}}
{...other}
>

how to set the width of modal of react-responsive-modal?

how do I set the width of the modal of react-responsive-modal?
https://react-responsive-modal.leopradel.com/#props
<div style={{width: '600px'}} >
<Modal open={open} onClose={this.onCloseModal} closeOnOverlayClick={true}>
<CreateSubmenu onFormSubmit={this.onSubmenuFormSubmit} editData={editSubmenuData}/>
</Modal>
</div>

I think it would be the best it by styling class in css
.react-responsive-modal-modal { width: 500px }
You can also use react ref to add style using javascript https://reactjs.org/docs/glossary.html#refs
EDIT:
I created working code example:
In index.html I added styles:
<style>
.react-responsive-modal-modal {
width: 200px;
}
</style>
https://codesandbox.io/s/react-responsive-modal-4tuc1?file=/index.html

Load dynamic content at the bottom of a div

I've connected to a websocket and pull real-time data from the server once the page is loaded. However, I want it to load from the bottom-up and not from the top-down of the div. I'm hoping I can keep it scrolled to the bottom of the div unless the user scrolls up in this case.
Here's what I'm currently working with
(I'm planning to also pull more data from their REST API and preload the div with 100-50 messages prior so the user doesn't see nothing upon the initial page load. Though, I'm sure that'll be another question 😂)
I've tried using
display: 'flex', flexDirection: 'column-reverse'
but that alone doesn't seem to be the solution in this case. overflow? I'm not sure
Here is the parent .js file that the component is within:
<Layout style={{ minHeight: '100vh' }}>
<div style={{width: '100%', height: '100%'}}>
<Header id="header">
</Header>
<Content style={{ padding: '24px 50px 0px 50px' }}>
<div style={{ borderRadius: '6px', border: '1px solid rgb(235, 237, 240)', background: '#fff'}}>
<Tbox/>
</div>
</Content>
<Footer/>
</div>
</Layout>
And then here is the component itself:
render() {
const chatBox =
<List
dataSource={this.state.data}
renderItem={item => (
<List.Item >
<List.Item.Meta
avatar={<Avatar size="large" icon="user" />}
title={<div>{item.user} {item.date}</div>}
description={item.message}
/>
</List.Item>
)}
/>;
return (
<div>
<div style={{ height: 400 }}>
<Scrollbars style={{ height: 400 }}>
<section style={{display: 'flex !important', flexDirection: 'columnReverse !important' }}>
<div>
{chatBox}
</div>
</section>
</Scrollbars>
</div>
<div style={{ width: '100%', padding: 0 }}>
...
</div>
</div>
);
}

As mentioned before by Daan, if you can post the result page, it would help since after that the CSS rule can be applied to the result list. Take look at this
how-to-display-a-reverse-ordered-list-in-html
Hope this could help

Dynamic content in Dialog component

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>