Search code examples
htmlcssoverflow

Make absolutely positioned element break scrollable text

I have a text box that renders text. This text box has a max height and its overflow is set to auto which makes it scrollable. Now I want to introduce a checkbox that renders on the bottom right of this text box. To make this happen I positioned the checkbox absolutely at the bottom right. This already works as expected:

checkbox showing at the bottom right

Now comes my question: Is it possible to make the text break around the checkbox so the text is prevented from being hidden by the checkbox?

This has to be achieved at the same time while still making sure that the checkbox doesn't move when the text is being scrolled and it should stay (at least visually) inside the text box.

I already tried using flex layout and grid layout approaches that either failed because the check box moved during scrolling or the checkbox uses additional space outside of the text box which I don't want to happen.

There is also a related question that got a solution but in that question the text is not scrollable so it is possible to add an invisible spacer into the scrollable text box that breaks the text. This solution does not work here because we don't know where to add the spacer, because depending on the scrolling position it has to be in different places.

My current version where text runs below the checkbox (which is unwanted) can be found in this fiddle:

.text {
  white-space: pre-wrap;
  max-height: 8em;
  overflow-y: auto;
}

.read {
  display: inline;
  padding: 8px;
  position: absolute;
  bottom: -2px;
  right: 36px;
  background: white;
  border: 1px solid black;
}

.wrapper {
  position: relative;
}
<div class="wrapper">
  <div class="text">
    Hello World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World Hello World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World Hello WorldHello WorldHello WorldHello WorldHello World Hello World Hello
    World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World Hello World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World HelloWorldHello WorldHello WorldHello WorldHello World Hello World Hello
    World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World Hello World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World HelloWorldHello WorldHello WorldHello WorldHello World Hello World Hello
    World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World Hello World HelloWorldHello WorldHello WorldHello WorldHello World Hello World Hello
    World
  </div>
  <div class="read" id="read">
    <input type="checkbox">
    <label for="read">Read</label>
  </div>
</div>

Solution

  • This is the closest to the requirement that I could do. This involves a float: right on the checkbox and a scroll event handler on the wrapper that adjusts the checkbox position.

    The checkbox needs to be on top in this solution so that the text can actually wrap around it and so that the empty space above it is out of the view.

    Playing around with it though, not sure how user-friendly the constantly shifting text is.

    document.querySelector('.wrapper').addEventListener('scroll', (e) => {
    e.target.querySelector('.read').style.marginTop = `${e.target.scrollTop + 10}px`;
});
    .read {
  float: right;
  margin: 10px 20px 10px;
  padding: 8px;
  background: white;
  border: 1px solid black;
}

.wrapper {
  max-height: 8em;
  overflow-y: auto;
}
    <div class="wrapper">
  <div class="read" id="read">
    <input type="checkbox">
    <label for="read">Read</label>
  </div>
    Hello World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World Hello World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World Hello WorldHello WorldHello WorldHello WorldHello World Hello World Hello
    World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World Hello World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World HelloWorldHello WorldHello WorldHello WorldHello World Hello World Hello
    World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World Hello World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World HelloWorldHello WorldHello WorldHello WorldHello World Hello World Hello
    World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World Hello World Hello World HelloWorldHello WorldHello WorldHello WorldHello World Hello World Hello
    World
</div>