How to limit the hover-on width transition so that the object does not go out of the parent tag?

Question

So, the question is listed in the title. I have a red object that changes its width on-hover. But when it does it, you could see that it goes outside of the central div that is the whole rectangle of the to-do-list app. I am trying to fix this. Video of what is going on: https://youtu.be/ELkusRU7Wr4

Code: deleteTask - the red span that contains the rubbish bin icon listItems - the list items themselves separately (every 'li')

HTML:

<div id="workingField">
    <h1 id="toDoListHeader">TO-DO LIST<i class="fa fa-pencil" aria-hidden="true" id="hideInputField"></i></h1>
    <input type="text" id="addNewTask" placeholder="Add New Task">
    <ul id="tasks">
        <li id="listItem">Task1<span id="deleteTask"><i class="fa fa-trash" aria-hidden="true"></i></span></li>
        <li id="listItem">Task2<span id="deleteTask"><i class="fa fa-trash" aria-hidden="true"></i></span></li>
        <li id="listItem">Task3<span id="deleteTask"><i class="fa fa-trash" aria-hidden="true"></i></span></li>
    </ul>
</div>

CSS:

#deleteTask
{
    background-color: #f26363;
    box-sizing: initial;
    clear: left;
    color: white;
    cursor: pointer;
    float: right;
    display: inline-block;
    height: 100%;
    margin: -3px -15px 0px -3px;
    opacity: 0;
    padding: 3px 0px 0px 2px;
    text-align: left;
    vertical-align: 0px;
    width: 0px;
}

#listItem
{
    background-color: white;
    color: #595959;
    height: 30px;
    line-height: 25px;
    padding: 3px 15px 0px 15px;
    vertical-align: 5px;
}

#listItem:hover #deleteTask
{
    opacity: 1;
    text-align: center;
    -webkit-transition: 2s linear;
    -moz-transition: 2s linear;
    -o-transition: 2s linear;
    transition: 2s linear;
    width: 35px;
}

score 3 · Accepted Answer · edited May 23 '17 at 12:01

3

What you need is to put

#listItem{
    overflow: hidden;
}

on the wrapper on the main element that contains the list.

I can agree with the answer above that using translate is much better for performance.

Also, it is bad practice to overuse id in the app, so I would recommend using classes instead of id to style elements. Check: CSS: #id .class VS .class performance. Which is better?

edited May 23 '17 at 12:01

Community

1
1

answered Mar 20 '17 at 20:09

margarita

884
1
10
21

score 1 · Answer 2 · answered Mar 20 '17 at 19:49

You want to apply #listItem { overflow: hidden; } so that any children that are outside of that element will be hidden.

#listItem {
  background-color: white;
  color: #595959;
  height: 30px;
  line-height: 25px;
  padding: 3px 15px 0px 15px;
  vertical-align: 5px;
  overflow: hidden;
}

But it's also worth noting that you are using ID's multiple times on the page. An ID should only be on the page once, so the ID's that appear more than once on the page should be classes instead.

Yonatan Shippin · Answer 3 · 2017-03-20T20:22:27.710

You need to overflow: hidden; on the wrapper so things outside it aren't visible.

As a side note- Making the transition on the width is not recommended because it's very bad for performance. The width of an element effects other elements around it so the browser has to "recalculate" the whole page for every frame of the animation.

It is recommended to use transform instead, for example: transform: translateX(-100px);.

This will make the div move -100px from its original position on the X axis.

transform doesn't effect the DOM.

For more info on smooth css animations see: https://blog.gyrosco.pe/smooth-css-animations-7d8ffc2c1d29#.7b5ozp8qm

How to limit the hover-on width transition so that the object does not go out of the parent tag?

3 Answers3