CODEWITHSUNDEEP
htmlcss
Efog
Efog

Reputation: 1179

Very strange bug with auto-scroll when typing text

Here is example page: http://texting.zz.mu/
At the bottom you can see div with contenteditable=true.
Try to type some text inside. Then #talkTab block scrolls!
I'm really confused. Why can it be?
I can't show only part of code because i dont know in what part this bug is.
I know, that there is much code, but...
Help me please, i will "like" all your answers :D

Upvotes: 0

Views: 907

Answers (3)

Awesomestvi
Awesomestvi

Reputation: 803

Lose the height: calc(100% - 110px); in your CSS, if you're okay with jQuery to fix the height then I can give you a better solution, plus the structure is bit of a mess, if you could just lemme know if jQuery can be used or not..

Upvotes: 1

Awesomestvi
Awesomestvi

Reputation: 803

See I've fixed your problem, I've used a little jquery to structure your design, you can see the running example of your code

Click the link : fiddle

jQuery:

        $(document).ready(function(){
            var w,h;                
            $(window).resize(function(){
                w = $(window).width();
                h = $(window).height();
                $('.window_height').height(h-50);
                $('.dialog_height').height(h-0);
            }).resize();
        });

Upvotes: 1

Sridhar DD
Sridhar DD

Reputation: 1980

Here is the CSS you need.

overflow-x : auto //Since your div's height and width are defined.

The scrollbar can be triggered with overflow-x in you case and it can be set to any of visible, hidden, scroll, auto, or inherit. You are currently looking at these two:

auto - This value will look at the width and height of the box. If they are defined, it won't let the box expand past those boundaries. Instead (if the content exceeds those boundaries), it will create a scrollbar for either boundary (or both) that exceeds its length.

scroll - This values forces a scrollbar, no matter what, even if the content does not exceed the boundary set. If the content doesn't need to be scrolled, the bar will appear as "disabled" or non-interactive.

Also in your case the problem is because of this attribute in talkTab

overflow-y : scroll;

Upvotes: 1

Related Questions