Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Horizontal scrollbar with buttons don't align correctly (+ possible fix) #56

Open
MichelSelten opened this issue Apr 2, 2015 · 1 comment

Comments

@MichelSelten
Copy link

We're trying to create a view where we need a horizontal scrollbar with the scroll buttons (left + right). This unfortunately results in an issue where the buttons don't appear on one line.
The layout is something like:
[left]
[horizontal track + horizontal handle]
[right]

Expected:
[left][horizontal track + horizontal handle][right]

I've made a small fiddle where I've updated the example using the Windows XP scrollbar.
http://jsfiddle.net/MichelSelten/0gq18x75/2/
(I've not included the corner class)

I've locally fixed this by updating enscroll.js:
Line 1178+:

if (settings.horizontalScrolling) {
    horizontalTrackWrapper = doc.createElement('div');
    horizontalTrack = doc.createElement('div');
    horizontalHandle = doc.createElement('a');

    $(horizontalTrack)
        .css({
            'position': 'relative',
**>            'display': 'inline-block',
            'z-index': 1
        })
        .addClass('enscroll-track')
        .addClass(settings.horizontalTrackClass)
        .appendTo(horizontalTrackWrapper);

    if (settings.drawScrollButtons) {
        horizontalLeftButton = doc.createElement('a');
        horizontalRightButton = doc.createElement('a');

        $(horizontalLeftButton)
**>            .css('display', 'inline-block')
            .attr('href', '')
            .on('click', function () {
                scrollHorizontal(pane, -settings.scrollIncrement);
                return false;
            })
            .addClass(settings.scrollLeftButtonClass)
            .insertBefore(horizontalTrack);

        $(horizontalRightButton)
**>            .css('display', 'inline-block')
            .attr('href', '')
            .on('click', function () {
                scrollHorizontal(pane, settings.scrollIncrement);
                return false;
            })
            .addClass(settings.scrollRightButtonClass)
            .appendTo(horizontalTrackWrapper);
    }

I've marked the lines with **>

@jstoudt
Copy link
Owner

jstoudt commented Apr 5, 2015

@MichelSelten, I believe this is a proper fix for this issue. Originally, this plugin was written with IE6 compatibility in mind. Since then I dropped support for IE6 and IE7. Given that I don't have a test case set up with horizontal buttons, this was overlooked in the process. You should your find recommended code addition in the next release.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants