I am currently developing a Keeper App with React. In this application, users can add notes that are displayed on the screen. The specific requirement I have is to set the note's height to be implicit at 150px and enable overflow:auto so that users can scroll to view the note content. Additionally, I have included a delete button in the bottom-right corner of the note and I want it to remain fixed in that position even when the user scrolls through the note.
You can refer to the image linked below for reference:
Note: The issue arises when the user starts scrolling - the delete button moves along with the text instead of maintaining its position in the bottom-right corner.
Below is the HTML structure for the Notes:
<div className="note">
<h1>{props.title}</h1>
<p>{props.content}</p>
<button onClick={deleteNoteInNote}>
{" "}
<DeleteIcon />{" "}
</button>
</div>
The CSS styling for the notes is as follows:
.note {
background: #fff;
border-radius: 7px;
box-shadow: 0 2px 5px #ccc;
padding: 10px;
width: 240px;
height: 140px;
margin: 16px;
float: left;
overflow: auto;
position: relative;
}
.note h1 {
font-size: 1.1em;
margin-bottom: 6px;
}
.note p {
font-size: 1.1em;
margin-bottom: 10px;
white-space: pre-wrap;
word-wrap: break-word;
}
.note button {
color: #f5ba13;
border: none;
width: 36px;
height: 36px;
cursor: pointer;
outline: none;
position: absolute;
right: 0px;
bottom: 0px;
}
This issue specifically pertains to desktop viewport only, as below a width of 726px the height attribute changes to max-content instead of 150px.
To address this, I prefer using Bootstrap CDN exclusively and not the ReactBootstrap npm package.
Thank you in advance for your assistance! :D