CODEWITHSUNDEEP
javascripthtmlcss
peter Schiza
peter Schiza

Reputation: 387

Width of absolutely positioned element

I have absolutely positioned div element (.tooltip) and another div (.text) inside it with text (that has max-width set). When left property of .tooltip is big enough it's width gets shrinked (i guess because default value of right property is 0). What i want, is to .tooltip respect the width of .text (it's content) in the first place. What i have tried:

  1. setting width of tooltip to fit-content - this is basically what i want to achieve (showed on the snippet) but it does not work on IE (which i have to support). Without that width of .tooltip gets shrinked.

  2. setting fixed width of tooltip or text - also not possible because text in text div can be pretty short and then there will be empty space.

  3. on the other hand text can be really long so i can't set white-space: nowrap like suggested in similar questions.

.tooltip {
  position: absolute;
  border: 1px solid red;
  left: 400px;
  width: fit-content;
}

.text {
  max-width: 200px;
}
<div style="border: 1px solid green;width:500px; height: 500px; position:relative">
  <div class="tooltip">
      <div class="text">test test test test test test test test test</div>
    </div>
</div>

Upvotes: 0

Views: 170

Answers (1)

Temani Afif
Temani Afif

Reputation: 272789

On idea is to replace left with translation:

.tooltip {
  position: absolute;
  border: 1px solid red;
  left: 0;
  transform:translateX(400px);
}

.text {
  max-width: 200px;
}
<div style="border: 1px solid green;width:500px; height: 500px; position:relative">
  <div class="tooltip">
      <div class="text">test test test test test test test test test</div>
    </div>
</div>

If you want to keep the use of left, consider some negative margin to give the element more space:

.tooltip {
  position: absolute;
  border: 1px solid red;
  left: 400px;
  margin-right:-400px; /* Make it bigger enough, at least the same as left */
}

.text {
  max-width: 200px;
}
<div style="border: 1px solid green;width:500px; height: 500px; position:relative">
  <div class="tooltip">
      <div class="text">test test test test test test test test test</div>
    </div>
</div>

Upvotes: 1

Related Questions