My tile div can be selected using the mouse or a timed event. Here are the states of selected and unselected :
Not .selected
.selected applied
.tile
{
height: 70px;
padding: 5px 10px 5px 10px;
margin: 8px auto 0px auto;
width: 280px;
background-color: #99b433 !important;
cursor: pointer;
}
.tile.selected
{
border-left: 10px #2d89ef solid;
width: 270px !important;
}
The issue arises when I click on the tile and the class is applied via CSS:
// tile click handler
$('.tile').click(function () {
$('#leftPane').children().removeClass('selected');
$(this).addClass('selected');
});
However, if this is triggered by an ajax function every 15 seconds:
$('#' + selectedId).addClass('selected');
In Chrome, I encounter:
When I hover over it, it reverts back to the .selected state as shown above.
.tile:hover
{
border: 2px solid #2d89ef;
}
Any insights on this peculiar behavior? I have tested in IE 10 and Safari where it does not exhibit the same issue.
EDIT (for eric) After setting auto, it fills the entire width: