CODEWITHSUNDEEP
css
asdf
asdf

Reputation: 460

overflow:auto changes internal div element width

HTML:

<div id="jhjhssed" class="hhsfjhjruweyr" id="fhsdjfhsss" style="">
    <div class='bubble5'>Andrew Stockard
        <img src='Status-tray-online-icon (1).png' class='onlinecircle' />
    </div>
</div>

CSS:

.bubble5 {
    position: relative;
    top: -27px;
    word-wrap: break-word;
    font-size: 15px;
    margin-left: 51px;
    width: auto; 
}
.hhsfjhjruweyr {
    text-shadow: 0 1px 0 #fff;
    color: #000;
    font-family: Arial;
    border-top: 1px solid #8d8d8d;
    overflow: hidden;
}
.hhsfjhjruweyr:hover {
    overflow-y: auto;
}
.onlinecircle {
    position: absolute;
    top: 1px;
    right: 5px;
}

The problem is that when i hover the scroll bar shows up as expected but when i unhover the width of all the elements in the div with the id jhjhssed changes. by changes i mean it it becomes smaller to fit the scrollbar on next hover.. what i want is... the width changing on showing scrollbar is fine but i want it to return to 100% width when the scrollbar is no longer visible i even tried adding width:100% to the div jhjhssed but it does not work.. how can i do this...

No scrollbar:

enter image description here

Scrollbar:

enter image description here

After scrollbar was present:

enter image description here

What it should look like:

enter image description here

hope i was able to make myself clear..

Upvotes: 1

Views: 1478

Answers (1)

Nostalg.io
Nostalg.io

Reputation: 3752

The solution most compatible with various browsers will probably involve using JavaScript.

My favorite, cross-browser JavaScript library being jQuery, I would recommend the following solution:

$('.hhsfjhjruweyr').mouseout(function(){
    $(this).css('overflow-y', 'hidden');
});

BTW, where did you get a class name like "hhsfjhjruweyr"?

Upvotes: 1

Related Questions