Persistent scroll bar in resizable div

JavaScript
1

I have a div which is resizable (using ui.resizable.js).

I would like a vertical scrollbar to appear only if the text is truncated as the div is resized.

If I use a style = overflow-y:scroll, or overflow-y:auto I get the same result: the scroll bar is Always there, even if the div is far larger than the content. And there’s always a tiny open area at the bottom of the scroll bar, as though it thinks there’s still content below.

Here’s a sample code:

<div id=“i1”
style=“position:absolute; left:300px; top:200px; border-style:ridge; width:300px; background-color:#ffffff; overflow-y:scroll;”; class=“resizable draggable”;
…
>

The absence or value of clip seem to have no effect.

Scroll and auto seem to work as expected if the div is not resizable.

Is it even possible to do what I want using the ui.resizable plugin?

If not, is there another resizable plugin which would allow it?

Thanks.

2

Your “resizable” JS is probably changing the overflow to “scroll” automatically (though I can’t see why it would be doing this). I’m not familiar with this plugin you mention, but you should check it for the word “overflow” and see what has been set within it.

It would be a lot more helpful if you could show an example.

3

Raffles:

The plugin is the “resizable” plugin of the jQuery “ui” library.
There are a few places in its code where overflow is set to hidden, but that is clearly getting overridden by my css.

As for an example, the snippet I gave IS the example. There’s nothing else relevant in the code, except the includes.

4

What I mean is, a live example. A web page, where it is possible to test it and debug it.

What browser are you testing this with? The scrollbar should not be there if overflow is set to auto and the content is not bigger than the container.

5

Raffles:

Gee! By the time I include all the libraries and the data file it becomes a hell of a big upload! I can’t imagine anyone wading through all the irrelevant stuff.

But, thanks for your interest.

(BTW, the browser is FF 3.5.3)

I figured that maybe detecting an onoverflow event would let me explicitly add & remove the scroll widget as needed, but a google search has not turned up much of help about its syntax and use.

The only documentation I can find refers only to XUL, which I know very little about.

Perhaps you can just direct me to some good documentation.

Thanks.

6

There’s no onoverflow event, unfortunately. XUL relates to making software UIs (like Firefox). It doesn’t matter how big your upload is, as long as you can provide a link to the page! Then tools like Firebug can be easily used to pinpoint the issue.

7

Raffles:

OK, I constructed a minimal file that shows the problem.

You may have to change the include scripts to direct it to your own jquery files, since I couldn’t find an online source that would work for everyone.

You will see that, even though I specified “overflow-y:auto”, the scroll bar doesn’t disappear when there is no overflow.

Harvey

<html>
<head>
<title>example</title>

<style type=“text/css”>
.resizable {position:absolute; overflow:hidden; border-style:ridge; }
.dragHandle{cursor: move;}
</style>

<!-- You may have to point these files to your own jQuery library –>

<link type=“text/css” href=“ui.resizable.css” rel=“stylesheet” />
<script type=“text/javascript” src=“jquery-1.3.2.js”></script>
<script type=“text/javascript” src=“ui.core.js”></script>
<script type=“text/javascript” src=“ui.resizable.js”></script>
<script type=“text/javascript” src=“ui.draggable.js”></script>

<script type=“text/javascript”> // This is needed to invoke the resizable functions
$(function(){ $(“.resizable”).resizable(); });
$(function(){ $(“.draggable”).draggable({ handle: ‘.dragHandle’ }); });
</script>
</head>

<body>
<div id=“i1” class=“resizable draggable”;
style=‘position:absolute; left:300px; top:10px; border-style:ridge; width:300px; background-color:#ffcccc; overflow-y:auto;’; >
<div class=“IssueHeader dragHandle” style=“cursor: move; background-color:#ccccff;”>
Header and Drag Handle
</div>
<!-- div text –>
Note that the vertical scroll bar persists, even when the height is so large that there is no text to scroll,
<br>Even though the style attribute contains the property “overflow-y:auto;”
<p>Resize in lower right corner and edges.
</div>
</body>
</html>

Thanks for any insights you can provide.

8

You have many HTML errors there.

  • You need a doctype (I’d recommend HTML 4.01 strict)
  • You don’t need a semicolon after the class=“” property
  • same with the style property, hwich should also use double quotes
  • <p> element is not closed

By the way, on the jQuery UI download page, you can “build your own” JavaScript file including only the components you need. Making it one file will speed up your page a lot, as only one HTTP request will be made, instead of the three you are making at the moment. You could even combine jQuery and the jQuery UI stuff into a single file for more savings.

Also, [B]install firebug[/B] or use Dragonfly in Opera or the developer tools in IE8 or Safari, because it only took about 2 minutes to isolate the issue, after downloading the jquery UI files and renaming them in the HTML.

In the resizable CSS, you will find this:


.ui-resizable-s {
bottom:-5px;
cursor:s-resize;
height:7px;
left:0;
width:100&#37;;


}

It’s the -5px that are causing the trouble. It should be 0.

I’m not saying this to be nasty, but you must learn to debug your own code, particularly now that there are very easy to use, free and powerful tools available. For example, in Firebug all I had to do was hover my mouse over the HTML tags in the HTML tab and I could see the elements highlighted on the page itself. It was clear that the DIV that acts as the vertical resize handle was hidden a bit. Looking at the CSS confirmed my suspicion that it had some negative value applied to it. This can be directly edited to see if changing it works.

I hope that helps.

9

Raffles:

Yes, indeed that helped! It works perfectly now!

And No, your comments are not ‘nasty’ at all! No one is more aware than I of my daunting noobiness, nor more welcoming of correction.

Of course, it was that very awareness which inhibited me from trying to debug the code presented by jQuery gurus in the UI library.

And, even if I had tried, the -5px would have raised no concerns with my noobiness, and even now, I have no idea why that caused the error.

I AM and WAS using firebug (with FF 3.5.3), but it made no complaints with the code at all. Even using the HTML tab (which I had never previously thought of doing) there are no warnings when I hover.

Why should the style property have used double quotes? I thought usage was entirely interchangable (unlike perl)?

I have avoided using doctypes, since I figured that my GF gave me as much nagging as I needed. Nevertheless, at your urging I did add it (the strict version), and it didn’t complain about anything, even the unclosed <p>. The HTML tab of firebug showed that the terminating </p> had been added anyway. Great - that’s what computers are for, right? <G>

Once again, thank you, and please do not hesitate to make comments to me which others might consider “nasty”. I’m here to learn, not to have my ego stroked! :smiley:

10

Glad to hear it’s all ok. :slight_smile:

And, even if I had tried, the -5px would have raised no concerns with my noobiness, and even now, I have no idea why that caused the error.

In combination with the position:absolute property, bottom:-5px means, “put this element 5px below the bottom edge of the parent element”. So that’s why it was hiding a bit, and creating an extra 5px of space that would always be scrollable.

Even using the HTML tab (which I had never previously thought of doing) there are no warnings when I hover.

There should be no warnings because there is nothing technically wrong. The warnings are for errors in the JavaScript. All that was “wrong” was some bad styling! Computers don’t know what looks good or what doesn’t.

Why should the style property have used double quotes? I thought usage was entirely interchangable (unlike perl)?

Technically speaking, HTML attributes don’t need quotes at all unless they contain spaces. However, it is a convention (and “good practice”) to use double ones, because that is what is used in XML (and anything else causes errors in XML). Since HTML is a subset of SGML, which is XML-like, it makes sense to do so.

I have avoided using doctypes, since I figured that my GF gave me as much nagging as I needed. Nevertheless, at your urging I did add it (the strict version)
I suggest you read about Doctypes. This thread is a good place to start. The sticky The absence of one will put your document into quirks mode, which is unpredictable and renders the page using “wrong” rules. Adding a doctype puts browsers into “standards mode”.

it didn’t complain about anything, even the unclosed <p>.

What do you mean by “it” didn’t complain? This is where I suggest you put your HTML through the W3C validator. Technically speaking (again), the <p> element doesn’t need a closing tag. However, for consistency’s sake, readability and general robustness, it is recommendable to add one.

The HTML tab of firebug showed that the terminating </p> had been added anyway.

That is added only within Firebug. Firebug attempts to correct broken HTML or add missing ending tags. The HTML parser that actually turns HTML code into a web page does the same thing. Your visitors will still be receiving whatever HTML you have produced. Firebug only operates on your computer once the page has been downloaded!