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

Firefox: Problem with RTL Tables #449

Open
alex2230 opened this issue Nov 9, 2019 · 6 comments
Open

Firefox: Problem with RTL Tables #449

alex2230 opened this issue Nov 9, 2019 · 6 comments
Labels

Comments

@alex2230
Copy link

alex2230 commented Nov 9, 2019

Hi,
I know that: "RTL is not really supported by floatThead"
floatThead works well on Chrome, and has no problems with RTL tables, But floatThead+RTL tables are not working properly on Firefox.

Is there a way to fix the problem with Firefox?

Please see the links below with Firefox And screen width smaller than 900 pixels:
I've used the "Bootstrap table responsive".
LTR: https://codepen.io/alex200/pen/XWWqLaQ
RTL: https://codepen.io/alex200/pen/VwwxJWe

@mkoryak
Copy link
Owner

mkoryak commented Nov 25, 2019

sorry, this fell off my radar. Ill look soon

@mkoryak
Copy link
Owner

mkoryak commented Nov 27, 2019

This happens because of how different browsers calculcate scrollLeft in RTL.
you need to include the following workaround to fix this:

https://github.com/othree/jquery.rtl-scroll-type

and this code:

var origScrollLeft = jQuery.fn.scrollLeft;
jQuery.fn.scrollLeft = function(i) {
    var value = origScrollLeft.apply(this, arguments);

    if (i === undefined) {
        switch(jQuery.support.rtlScrollType) {
            case "negative":
                return value + this[0].scrollWidth - this[0].clientWidth;
            case "reverse":
                return this[0].scrollWidth - value - this[0].clientWidth;
        }
    }

    return value;
};

Copied from:
https://stackoverflow.com/questions/24276619/better-way-to-get-the-viewport-of-a-scrollable-div-in-rtl-mode/24394376#24394376

I didnt test this, but this is what is happening here.

@alex2230
Copy link
Author

@mkoryak
Thanks for reply.

The jquery.rtl-scroll-type plugin adjusts the RTL-table header correctly, but when user scrolls left and right, the header does not change and is fixed!

Please see the links below with Firefox And screen width smaller than 900 pixels:
https://codepen.io/alex200/pen/MWWNMzQ

@mkoryak
Copy link
Owner

mkoryak commented Nov 29, 2019

That's fun, I should have guessed some other calculations would need to be inverted.
I'm upgrading this to a bug.

@mkoryak mkoryak added the bug label Nov 29, 2019
@mkoryak mkoryak changed the title Problem with RTL Tables Firefox: Problem with RTL Tables Dec 4, 2019
@swdreams
Copy link

swdreams commented Nov 2, 2021

Hi,
I like this repository, but it's pity that it doesn't support a functionality to freeze left column(s).
Is it possible or are there any good source?
Thanks

@mkoryak
Copy link
Owner

mkoryak commented Nov 2, 2021 via email

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

No branches or pull requests

3 participants