Html - Tags Jumping to Bottom on Hover due to Insufficient Space - How to Resolve?

umangashrestha
June 14, 2023
142 views
1 vote
2 Answers

I am encountering an issue where, upon hovering over the tags, a remove icon is displayed, which increases the space occupied by each tag. As a result, when I hover over the rightmost tag and there is only a small amount of space remaining that cannot accommodate the remove icon, the tag jumps to the bottom or does not get hovered. This behavior is causing a visual inconsistency and disrupting the user experience.

I would appreciate any suggestions or solutions on how to address this problem. Is there a way to prevent the tags from jumping when there is insufficient space for the remove icon upon hovering?
Is it possible to incorporate a safe area of remove icon size width on the right side of the design that would only be used when hovering? It’s crucial for me to maintain this specific design layout.

.container {
  max-width: 500px;
    margin: 0 auto;
  display: flex; 
}
.tags-container { 
  background-color: #a3b3c6; 
  padding: 20px;
  display:flex;
  flex-wrap: wrap;
}
.tag {
  display: inline-flex;
  transistion: all 1s ease-in-out; 
  padding: 3px;
  background-color: white;
  border: 1px solid black;
}
.tag-close {
  margin-left: 10px; 
  height: 16px;
  width: 16px;
  display:none;
}
.tag:hover {
  background-color: red; 
}
.tag:hover .tag-close {
  display: block;
}

.tags-remove-all {
      display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 32px;
}

<div class="container">
<div class="tags-container">
  <div class="tag">
    LBL-12334455579
    <div class="tag-close">
      x
    </div>
    </div>
  <div class="tag">
    LBL-12334578
    <div class="tag-close">
      x
    </div>
    </div>
  <div class="tag">
    LBL-1233
    <div class="tag-close">
      x
    </div>
    </div>
  <div class="tag">
    LBL-12334
    <div class="tag-close">
      x
    </div>
    </div>
  <div class="tag">
    LBL-12334
    <div class="tag-close">
      x
    </div>
    </div>
  <div class="tag">
    LBL-12334
    <div class="tag-close">
      x
    </div>
    </div>
</div>
  <div class="tags-remove-all">
    x
  </div>
</div>

Answers

This seems like a stylistic choice, in your case I would simply make the tags longer to accommodate the cross even without hovering

If you really want it to only appear on hover I would place the cross over the text in the tag on hover, this wouldn’t make the tag longer as it’s just placed over the text.

Very simple demo:

.container {
  max-width: 500px;
    margin: 0 auto;
  display: flex; 
}
.tags-container { 
  background-color: #a3b3c6; 
  padding: 20px;
  display:flex;
  flex-wrap: wrap;
}
.tag {
  display: inline-flex;
  transistion: all 1s ease-in-out; 
  padding: 3px;
  background-color: white;
  border: 1px solid black;
}
.tag-close {
  height: 16px;
  width: 16px;
  background-color: white;
  position: absolute;
  float: right;
  display:none;
}
.tag:hover {
  background-color: red; 
}
.tag:hover .tag-close {
  display: block;
}

.tags-remove-all {
      display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 32px;
}

<div class="container">
<div class="tags-container">
  <div class="tag">
    LBL-12334455579
    <div class="tag-close">
      x
    </div>
    </div>
  <div class="tag">
    LBL-12334578
    <div class="tag-close">
      x
    </div>
    </div>
  <div class="tag">
    LBL-1233
    <div class="tag-close">
      x
    </div>
    </div>
  <div class="tag">
    LBL-12334
    <div class="tag-close">
      x
    </div>
    </div>
  <div class="tag">
    LBL-12334
    <div class="tag-close">
      x
    </div>
    </div>
  <div class="tag">
    LBL-12334
    <div class="tag-close">
      x
    </div>
    </div>
</div>
  <div class="tags-remove-all">
    x
  </div>
</div>

If I understand correctly, you don’t mind tags pushing away other tags as long as they don’t "jump" to the next line. As you suggested, you can add a safe area on the side that would disappear when you hover over a tab.

I implemented the solution in the following snippet. Observe the use of CSS property pointer-events to make sure the effect is activated when hovering over a tag and not the container itself.

.container {
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    pointer-events: none; /* Added to prevent hover effect on container */
}

.tags-container {
    background-color: #a3b3c6;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
}

.container:hover .tags-remove-all {
    display: none; /* This hides the safe area when a tag is hovered */
}

.tag {
    display: inline-flex;
    transition: all 1s ease-in-out; /* You had a typo here */
    padding: 3px;
    background-color: white;
    border: 1px solid black;
    pointer-events: auto; /* This allows hover effect on tags */
}

.tag-close {
    margin-left: 10px;
    height: 16px;
    width: 16px;
    display: none;
}

.tag:hover {
    background-color: red;
}

.tag:hover .tag-close {
    display: block;
}

.tags-remove-all {
    width: 36px; /* This is the whole horizontal space taken by the "x" (content width + margin) */
    background-color: red;
}

<div class="container">
    <div class="tags-container">
        <div class="tag">
            LBL-12334455579
            <div class="tag-close">x</div>
        </div>
        <div class="tag">
            LBL-12334578
            <div class="tag-close">x</div>
        </div>
        <div class="tag">
            LBL-1233
            <div class="tag-close">x</div>
        </div>
        <div class="tag">
            LBL-12334
            <div class="tag-close">x</div>
        </div>
        <div class="tag">
            LBL-12334
            <div class="tag-close">x</div>
        </div>
        <div class="tag">
            LBL-12334
            <div class="tag-close">x</div>
        </div>
    </div>
    <div class="tags-remove-all" />
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Tags Jumping to Bottom on Hover due to Insufficient Space – How to Resolve?

Answers