Fixed columns that will not scroll horizantally

Fixed columns that will not scroll horizantally

galaxesolutionsgalaxesolutions Posts: 13Questions: 3Answers: 0

I have multiple columns in my editor grid and users have to scroll horizontally.
I need to make sure the first few columns are fixed and not scrollable so that they know what they are doing when they scroll extreme right.

I tried below code but it wouldn't work with datatable it seems:
http://jsfiddle.net/DJqPf/7/

Could you please let me know if my requirement is feasible with datatable plugin and share any snippet if available.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,744Questions: 1Answers: 10,111 Site admin
    Answer ✓

    Is it something like this that you are looking for?

    Regards,
    Allan

  • galaxesolutionsgalaxesolutions Posts: 13Questions: 3Answers: 0

    Yes, But I am not sure what am I missing in my page: https://debug.datatables.net/usayoq

  • allanallan Posts: 61,744Questions: 1Answers: 10,111 Site admin

    I don't immediately see any issue from the debug trace there. What exactly isn't working on your page? Is it not scrolling, or something else?

    Allan

  • galaxesolutionsgalaxesolutions Posts: 13Questions: 3Answers: 0

    Yes, It doesn't render properly while scrolling, please see below screenshot.

  • galaxesolutionsgalaxesolutions Posts: 13Questions: 3Answers: 0

    I have put two images in same pic. Above one is initial state after populating data. Second one is after scrolling horizontally.

  • allanallan Posts: 61,744Questions: 1Answers: 10,111 Site admin

    Are you able to give me a link to the page so I can debug it please? Drop me a PM if you don't want to make the link public.

    It looks like the fixed table has a margin or some other kind of offset applied to it.

    Regards,
    Allan

  • galaxesolutionsgalaxesolutions Posts: 13Questions: 3Answers: 0

    Please see two screenshots attached. One - a css fix that works, but page-size dropdown is missing_(This is not due to this fix but unavailable since I configd fixed columns)_ which is shown in second screenshot

  • allanallan Posts: 61,744Questions: 1Answers: 10,111 Site admin

    Thanks for the screenshots - it looks like one of the elements that is being cloned has a margin which is forcing the misalignment.

    Regarding the paging info missing - what is the little while blob just above the top left of the table? Is that the length menu shifted or something else? Did you change anything else in the configuration?

    Allan

  • galaxesolutionsgalaxesolutions Posts: 13Questions: 3Answers: 0

    Please take a look at the attached screenshot. Is there any way to remove this duplicate sort icon appearing in the middle of grid?

  • allanallan Posts: 61,744Questions: 1Answers: 10,111 Site admin

    Are you able to give me a link to a page showing that issue please? The demo page doesn't appear to have that issue. Have you included the fixedColumns.bootstrap.css file?

    Thanks,
    Allan

This discussion has been closed.