Kevin Powell - Community•15mo ago

How to create restrict absolute positioned element from leaving grandparent's boundary?

I have an element that displays a value range and a text bubble above it that communicates where the value lies in the range. When the value is in the middle of the range, I would like the text centered on its pointer and if it is near the edge, I would like the text to shift to contain itself within the grandparent's boundary. How can I contain the grandchild within the grandparent's boundary? This is what I have so far. I can get what I need it to do until the value is near the boundaries where I need the text to be off-center of the arrow

.container {
  position: relative;
}

.your-position {
  position: absolute;
  left:0;
  transform: translateY(-110%);
  // triangle
  border-color: blue transparent transparent;
  border-style: solid;
  border-width: 0.4rem 0.3rem 0;
  height: 0;
  width: 0;
}

.value {
  position: absolute;
  transform:translateX(-50%) translateY(-110%);
}

<div class="container">
  <div class="your-position">
     <div class="value">Your value is: {{value}}</div>
  </div>
</div>

.container {
  position: relative;
}

.your-position {
  position: absolute;
  left:0;
  transform: translateY(-110%);
  // triangle
  border-color: blue transparent transparent;
  border-style: solid;
  border-width: 0.4rem 0.3rem 0;
  height: 0;
  width: 0;
}

.value {
  position: absolute;
  transform:translateX(-50%) translateY(-110%);
}

<div class="container">
  <div class="your-position">
     <div class="value">Your value is: {{value}}</div>
  </div>
</div>

15 Replies

glutonium•15mo ago

this would require js right?? i believe

~MARSMAN~•15mo ago

If you wanna use transform, I think you will need to use JS to calculate the width of your text bubble and arrow and calculate the position of it and the end of the parent container.

glutonium•15mo ago

yee i forgot what the thing was to calculate the length of a text .getTotalLength i guees

~MARSMAN~•15mo ago

I think the whole box width is better than letters length?

glutonium•15mo ago

oooh .yaa I guess like the div u mean ryt? the text container

~MARSMAN~•15mo ago

Yes

glutonium•15mo ago

now I'm wondering what to use to look for the comparison. like do u use .setInterval() to always see if the text length is equal to box length ?? or maybe a setTimeOut() .. timeout function will go somewhere where it could be triggered everytime the animation happens and the timeout time will be equal to the animation duration.. will that even work??

Daryl•15mo ago

I think you should take a look to requestAnimationFrame: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

Window: requestAnimationFrame() method - Web APIs | MDN

The window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser calls a specified function to update an animation right before the next repaint. The method takes a callback as an argument to be invoked before the repaint.

glutonium•15mo ago

hmm..ik about it i have used it while working on canvas that would also work.

Super 🦸🏻•15mo ago

Thank you Boob, Marsman, and Daryl for confirming my theory that this isn't possible with HTML and CSS. I'll probably calculate the tanslateX position in JS and write it to the element to keep it simple. I appreciate everyone's input on this ❤️

Avinash•15mo ago

you want something like this? but the tool tip not to exceed boundary?

Coder_Carl•15mo ago

It is ALMOST If you update the aria-valuenow with JS you can then reference the step in your css using an attribute selector

Super 🦸🏻•15mo ago

@Avinash exactly! 💯 do you know how I’d do that? 😃 I’ll try check that out Coder Carl. Thank you Looks like the attr isn’t well supported. Thanks for the suggestion

Super 🦸🏻•15mo ago

https://developer.mozilla.org/en-US/docs/Web/CSS/attr

attr() - CSS: Cascading Style Sheets | MDN

The attr() CSS function is used to retrieve the value of an attribute of the selected element and use it in the stylesheet. It can also be used on pseudo-elements, in which case the value of the attribute on the pseudo-element's originating element is returned.

Avinash•15mo ago

Nope, mine also goes beyond bounds 😄

Gaming

Programming

How to create restrict absolute positioned element from leaving grandparent's boundary?