Div with a fixed button that can be resized and scrolled

Question

Div with a fixed button that can be resized and scrolled

In the HTML below, you will find a resizable and scrollable div containing a button and additional content.

.container {
  width: 100%;
  max-width: 100%;
  height: 150px;
  position: relative;
  overflow: auto;
  resize: both;
  white-space: nowrap;
  background: lightgray;
}

.container .fixed {
  position: absolute;
  right: 5px;
  top: 5px;
}

<div class="container">
  <button class="fixed">Test</button>
  <div class="content">
    texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
    text<br>
  </div>
</div>

The button is intended to remain fixed at the top right corner of the div. Although it stays in place while resizing, it moves when scrolling. How can this issue be addressed?

html css scroll resize css-position

Answer 1

Answer №1

Initially, I had a different understanding of how to position the button. However, the solution below has proven effective. You can adjust the size of the div while keeping the button anchored in the top right corner. [Edit] - Since the two elements are not connected, I don't think CSS alone can achieve this. Therefore, I included a small JS snippet to complete the task. It may be simple, but it gets the job done, and you can build upon it.

const resizer = new ResizeObserver((items) => {
    items.forEach(item => {
        const btn = document.getElementById("content-button-id");
        btn.style["right"] = item.target.clientHeight < item.target.scrollHeight ? "25px" : "5px";
    })
});
window.addEventListener('DOMContentLoaded', () => {
    const el = document.getElementById("content-id");
    resizer.observe(el);
});

.container {
    position: relative;
    height: 150px;
    resize: both;
    overflow: auto;
    display: flex;
    flex-flow: column;
}

.container .content {
    position: relative;
    flex: 1 1 auto;
    white-space: nowrap;
    background: lightgray;
    overflow: auto;
    z-index: 5;
}

.container .content-button {
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 10;
}

<!DOCTYPE html>
<html lang="en>
<head>
    <title>Resize Component Example</title>
</head>
<body>
    <div class="container">
        <button id="content-button-id" class="content-button">Test</button>
        <div id="content-id" class="content>
            <p>
            texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext...
            </p>
            ...
        </div>
    </div>
</body>
</html>

See some screenshots demonstrating the functionality: https://i.sstatic.net/Tp3oIWtJ.png

https://i.sstatic.net/T0LYP4Jj.png

Answer 2

Initially, I had a different understanding of how to position the button. However, the solution below has proven effective. You can adjust the size of the div while keeping the button anchored in the top right corner. [Edit] - Since the two elements are not connected, I don't think CSS alone can achieve this. Therefore, I included a small JS snippet to complete the task. It may be simple, but it gets the job done, and you can build upon it.

const resizer = new ResizeObserver((items) => {
    items.forEach(item => {
        const btn = document.getElementById("content-button-id");
        btn.style["right"] = item.target.clientHeight < item.target.scrollHeight ? "25px" : "5px";
    })
});
window.addEventListener('DOMContentLoaded', () => {
    const el = document.getElementById("content-id");
    resizer.observe(el);
});

.container {
    position: relative;
    height: 150px;
    resize: both;
    overflow: auto;
    display: flex;
    flex-flow: column;
}

.container .content {
    position: relative;
    flex: 1 1 auto;
    white-space: nowrap;
    background: lightgray;
    overflow: auto;
    z-index: 5;
}

.container .content-button {
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 10;
}

<!DOCTYPE html>
<html lang="en>
<head>
    <title>Resize Component Example</title>
</head>
<body>
    <div class="container">
        <button id="content-button-id" class="content-button">Test</button>
        <div id="content-id" class="content>
            <p>
            texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext...
            </p>
            ...
        </div>
    </div>
</body>
</html>

See some screenshots demonstrating the functionality: https://i.sstatic.net/Tp3oIWtJ.png

https://i.sstatic.net/T0LYP4Jj.png

Answer 3

Answer №2

You need to make a change in the content class by moving the style overflow: auto inside it.

Additionally, ensure that the content class has a height of 100% if you plan on scrolling within the container div. If not, you can remove the height: 100% and scroll within the content itself.

.container {
  width: 100%;
  max-width: 100%;
  height: 150px;
  position: relative;
  resize: both;
  white-space: nowrap;
  background: lightgray;
}

.container .fixed {
  position: absolute;
  right: 5px;
  top: 5px;
}

.container .content{
  overflow: auto;
  height: 100%;
}

<div class="container">
  <button class="fixed">Test</button>
  <div class="content">
    texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
  </div>
</div>

Answer 4

You need to make a change in the content class by moving the style overflow: auto inside it.

Additionally, ensure that the content class has a height of 100% if you plan on scrolling within the container div. If not, you can remove the height: 100% and scroll within the content itself.

.container {
  width: 100%;
  max-width: 100%;
  height: 150px;
  position: relative;
  resize: both;
  white-space: nowrap;
  background: lightgray;
}

.container .fixed {
  position: absolute;
  right: 5px;
  top: 5px;
}

.container .content{
  overflow: auto;
  height: 100%;
}

<div class="container">
  <button class="fixed">Test</button>
  <div class="content">
    texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
  </div>
</div>

Div with a fixed button that can be resized and scrolled

Answer №1

Answer №2

Similar questions

Can SCSS be used in conjunction with Less in a backwards compatible manner?

What is the best way to display an alert box through AJAX technology?

Is it possible to place an open div panel between two tweets?

Guide on aligning all list items to the left using React Material-UI, incorporating fontAwesome icons, and styling with Tailwind.css

What is the best way to use hasClass in a conditional statement to display text based on the content of a different div element?

Troubleshooting the issue with the collapse feature of the Angular UI

What could be causing my Font Awesome 6.1.1 icons to not show up after loading?

To center a div vertically within a Bootstrap 4.1 container-fluid > row > col, you can use the following method

Issue with z-index in Internet Explorer version 7

Tips for arranging the items within the slider according to the specified direction (rtl, ltr) in the Owl Carousel slider for Angular

You need to click the form submit image twice in order to make it work

Tips for applying multiple style properties to an element using JavaScript

Combine object attributes to create a new column in a table

Is there a way to convert this JSON object into HTML table code?

Tips on adjusting the label on a datetime-local button

Using PHP to narrow down SQL results by date

Where will the user's input be stored?

javascript: window.open()

What could be causing the space between float and div elements?

What could be causing my links to not appear in Internet Explorer 9?