By tflmike on

Hey there everybody!

I'd like to make a custom vertical scrollbar for a list view. I've got the view all set up and everything looks great, I even have a standard browser scrollbar on there but how would I make this custom?

Is there a module or something out there that could help?

Cheers!

Comments

fumbling’s picture

fumbling commented

Wish I could help. How were you able to get the normal vertical scrollbar itself into a view? That's actually what I'm trying to do.

shawn.sh’s picture

shawn.sh commented

You do that with CSS. Set a height and overflow value for the view using css.

HTML
<div class="view">your list </div>
CSS
.view{height:300px;overflow:scroll;}

--
Shawn Gregg

gmndesign.com - portfolio
shalosophy.com - blog

fumbling’s picture

fumbling commented

Thanks

fumbling’s picture

fumbling commented

Hi Shawn - A quick follow up. As a newbie, i'm not sure where to insert those snippets. The CSS I can insert in the main style.css file for my theme, right? As for the html snippet, what file would I insert that into? Thanks for any help,

fumbling’s picture

fumbling commented

Another follow up. So I got this working, thank you! But a couple things I'm still hoping to figure out. Now I have both a horizontal and vertical scrollbar, whereas I just want a vertical scrollbar. Is there any way to eliminate the horizontal scrollbar?

Also, when viewing content in a window with a vertical scrollbar, do you know how to default the scrollbar handle to scrolled-down-to-the-bottom of the window? I'm using it in the context of a list of comments, and I want to show the latest at the bottom, much like a chat room window handles comments. Any idea how to do that?

Thanks again.

fumbling’s picture

fumbling commented

Hmmm, sorry for all the follow-ups. I think I spoke to soon when I said I got it working. I did see it working on the view I was hoping to add a vert scrollbar too, but as it turns out it actually made this change on all of my views. How do I restrict it to just the view I want to change? Strangely, I also only see the change when I'm logged in as an admin. In all other cases, anon viewers and auth'd viewers, do not see the vert scrollbar.

I suspect I made the changes to the wrong files. Here's what I did. I added your suggested HTML change (replacing [your list] with the name of the view I wanted to change node_comments) to views-view-list.tpl

Was that the right file?

And I added your suggested CSS changed verbatim to the views.css file? Was that the correct file?

Thanks again for any help.

shawn.sh’s picture

shawn.sh commented

IE used to (probably still does) allow you to do this through CSS (non standard of course). The modern way however is to use JavaScript, and since Drupal already uses jQuery the best thing would be a jQuery solution. I did a quick google search and came up with this (jScrollPane).

The best thing is it works in all browsers with js enabled and gracefully degrades to the normal scrollbars where js support is lacking.

If you go through the docs/tuts/examples it shouldn't be to difficult to implement.

--
Shawn Gregg

gmndesign.com - portfolio
shalosophy.com - blog