search

almende / chap-links-library

a web based visualization library for displaying graphs, networks, and timelines
http://almende.github.com/chap-links-library
Apache License 2.0
599 stars 167 forks source link

timeline: class timeline-frame will always have a horizontal scrollbar #127

Open jeroenvangorkum opened 11 years ago

jeroenvangorkum commented 11 years ago

i've been playing with chap-links timeline (2.4.2) and collected some issues/ requests.

css class .timeline-frame will always have a horizontal scrollbar because it has a left and right border, and a width which is set in options.

this is because width applies to content width in css 2.1, without padding, border and margin. thus, a width of 100% will compute to a width of 100% + 2 pixels (1 for border-left and 1 for border-right), causing a horizontal scrollbar.

my proposal is to move .timeline-frame's border to its container – #mytimeline in your examples – so its width matches its computed block width.

i did this in desktop.css and mobile.css in my test at http://tests.vangorkum.com/javascript/library/chap-links/vegetables.html, and this removes the scrollbar in firefox (16.0.2), chrome (26.0.1410.64 m), internet explorer (8.0.6001.18702) on windows xp, and safari (?) on ios 6.1.3.

josdejong commented 11 years ago

Moving the border to the container element is not really an option, that way you will force the user to always add some specific css styles in order to have a good looking timeline.

Wouldn't it be better to use a box-sizing:border-box; style on the .timeline-frame? (Only issue is that this will not work on IE6,7).

jeroenvangorkum commented 11 years ago

it doesn't have to be the user-container that carries the border, it can also be an extra container timeline.js creates, like .timeline-frame-container. pro: works way back to IE6. con: every element that has a border and a width needs an extra div to separate the two.

the css (2.1) outline property is also worth considering, i think. it doesn't take up space in the flow. pro: its support is as good as box-sizing [1]. con: it can only be set to on or off for all four sides at once.

Joshua Johnson wrote a good article [2] comparing the two.

and lastly, i found something to fix box-sizing behavior in IE 6 & 7 [3], based on work from Erik Arvidsson (WebFX). haven't tested it tho', and don't know if it's worth the trouble; i'm already seeing a lot of weird stuff going on in IE 8.

[1] Koch, P.-P. (2013). CSS User Interface. http://www.quirksmode.org/css/user-interface/ [2] Johnson, J. (2012). Beating Borders: The Bane of Responsive Layout. http://designshack.net/articles/css/beating-borders-the-bane-of-responsive-layout/ [3] Schepp (2013). box-sizing-polyfill. https://github.com/Schepp/box-sizing-polyfill

josdejong commented 11 years ago

Thanks for your research. Life would be so much easier when we wouldn't have to take into account IE6 and 7 ;).

For the timeline-frame it wouldn't bother too much putting it in one extra div. That may be the easiest and most robust solution. One other option: just do not set the width of the frame in case it is defined as 100%.