26 replies

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>

.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>

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

Similar Threads

Similar Threads

Similar Threads