Display horizontal scrollbar

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

Display horizontal scrollbar

Post by morat »

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
User avatar
trolly
Moderator
Posts: 39851
Joined: August 22nd, 2005, 7:25 am

Re: Display horizontal scrollbar

Post by trolly »

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

Re: Display horizontal scrollbar

Post by Dom1953 »

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: 6404
Joined: February 3rd, 2009, 6:29 pm

Re: Display horizontal scrollbar

Post by morat »

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.
User avatar
BruceAWittmeier
Posts: 3076
Joined: June 9th, 2008, 10:53 am
Location: Near 37.501685 -80.147967

Re: Display horizontal scrollbar

Post by BruceAWittmeier »

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 often take a long windy road to my destination. Upon arrival, I wonder how I missed the shortcut.
morat
Posts: 6404
Joined: February 3rd, 2009, 6:29 pm

Re: Display horizontal scrollbar

Post by morat »

@BruceAWittmeier

Thanks, I'll take a look.
User avatar
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:

Re: Display horizontal scrollbar

Post by patrickjdempsey »

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/
User avatar
BruceAWittmeier
Posts: 3076
Joined: June 9th, 2008, 10:53 am
Location: Near 37.501685 -80.147967

Re: Display horizontal scrollbar

Post by BruceAWittmeier »

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 often take a long windy road to my destination. Upon arrival, I wonder how I missed the shortcut.
johnmacd
Posts: 34
Joined: June 13th, 2013, 4:27 am

Re: Display horizontal scrollbar

Post by johnmacd »

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
WordPress Developer Miami providing best WordPress Websites for small businesses.
Locked