MozillaZine

Display horizontal scrollbar

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
morat
 
Posts: 2363
Joined: February 3rd, 2009, 6:29 pm

Post Posted March 22nd, 2015, 9:59 am

Is there a user script or style to force a page to display a horizontal scrollbar?

Here is an example page. I can only see half the text in the rightmost column.

I want a scrollbar on the bottom of the page.

This style fails to enable the scrollbar on the bottom of the page.

Code: Select all
html { overflow-x: scroll !important; }

This style enables a scrollbar on the div.

Code: Select all
div.description { overflow-x: auto !important; }

Is it possible to create a double scrollbar on the top and bottom of the div?

CSS property overflow-x
https://developer.mozilla.org/en-US/doc ... overflow-x

trolly
Moderator

User avatar
 
Posts: 39866
Joined: August 22nd, 2005, 7:25 am

Post Posted March 22nd, 2015, 12:39 pm

I would say the page is horribly designed. On a full HD display (1920 wide) the last column is so small that only about 20 characters (or even less) fit in a line.
Think for yourself. Otherwise you have to believe what other people tell you.
A society based on individualism is an oxymoron. || Freedom is at first the freedom to starve.
Constitution says: One man, one vote. Supreme court says: One dollar, one vote.

Dom1953
 
Posts: 52
Joined: July 24th, 2014, 6:02 am
Location: Australia

Post Posted March 22nd, 2015, 2:15 pm

site.css loaded by the page contains
Code: Select all
html,body{overflow-x:hidden;overflow-y:auto}

Hiding overflow on body will override settings put on the root element. It also explains why the the right hand column can't be scrolled into view.

AFAIK there is no way of asking a browser to provide top and bottom scroll bars for the same element.

morat
 
Posts: 2363
Joined: February 3rd, 2009, 6:29 pm

Post Posted March 22nd, 2015, 9:53 pm

In IE, I can scroll to the left and right by selecting text.
In Chrome, I can scroll to the right by selecting text, but not the left.
In Firefox, I can't scroll at all.

Dom1953 wrote:AFAIK there is no way of asking a browser to provide top and bottom scroll bars for the same element.

I found this...

http://stackoverflow.com/questions/3934271
http://suwala.eu/blog/2012/02/01/horizo ... m-element/
http://github.com/sniku/jQuery-doubleScroll

I don't know jquery so I'm not sure how to integrate it.

Edit:

I can use the cursor keys to scroll to the left and right when I enable a scrollbar on the div. That's good enough.

BruceAWittmeier

User avatar
 
Posts: 2617
Joined: June 9th, 2008, 10:53 am
Location: Near 37.501685 -80.147967

Post Posted March 28th, 2015, 8:48 am

Your main container has a defined min and max width. Applying a h-scroll bar to the page will not do anything for the last column of the table.

Your table seems to be designed for the last column to use only what is left after displaying the other columns - which is what you see. The reason I say this is when you resize the browser viewport, none of the columns change size except the right column.
After looking again all the columns seem fixed width. There is no way for a user to affect the table layout or change the column widths.

You might be able to add a h-scroll bar on the main container and then allow the table to automatically size to its contents. You would be required to scroll to see the right column(s).

Edit:
Don't know if this might be helpful or not but...
http://www.mobilefish.com/tutorials/css ... iners.html
~ I'm only here to Pay it Forward. ~

"I often take a very long windy road to my destination. When I arrive I often wonder how I missed the shortcut".

morat
 
Posts: 2363
Joined: February 3rd, 2009, 6:29 pm

Post Posted March 28th, 2015, 6:29 pm

@BruceAWittmeier

Thanks, I'll take a look.

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted March 29th, 2015, 1:12 pm

Also just be aware that as tables have become less "standard" the various browsers are choosing to render them differently. I've had to create special "table compatibility" CSS to get all of the browsers to render the same. IE likes to use weird fonts and font sizes... Firefox doesn't like scrollbars inside table elements... I think it was Chrome that doesn't like some of the old valign stuff... it's a mess.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

BruceAWittmeier

User avatar
 
Posts: 2617
Joined: June 9th, 2008, 10:53 am
Location: Near 37.501685 -80.147967

Post Posted March 29th, 2015, 4:45 pm

Are you still interested? This is loading the source into BlueGriffon 1.7.1

This will demonstrate the increased col width. Only problem I cannot find where the column or table size is defined.

Current col size of 58 px.
Image

Extended col size to 181px
Image
~ I'm only here to Pay it Forward. ~

"I often take a very long windy road to my destination. When I arrive I often wonder how I missed the shortcut".

johnmacd
 
Posts: 33
Joined: June 13th, 2013, 4:27 am

Post Posted April 18th, 2016, 5:56 am

Hi,

Try this:
<div style="max-width:950px; overflow-x: scroll; white-space: nowrap;">
<table border="1" style="cellpadding:0; cellspacing:0; border:0; width=:100%;" >

Thanks

Return to Web Development / Standards Evangelism


Who is online

Users browsing this forum: No registered users and 1 guest