Database Fixed Columns with Responsive Scroll

  • Resolved jamesdurak

    (@jamesdurak)


    3 years, 7 months ago

    Hi, I just started experimenting with your plugin today and so far it’s fantastic. I am trying to get the fixed columns parameter working correctly. I have the extension installed and activated, and I’m using the following as my shortcode.

    [table id=1 responsive=scroll datatables_fixedcolumns_left_columns=1 /]

    The table will display and the scroll bar will appear, but the 1st column is not fixed.

    I noticed that if I check the option in the table editor “use the following features of the datatables javascript library, then the left column will stay fixed, but the appearance on the front end is skewed and the 1st column is not properly aligned with the rest of the table. See table 4 that is right under the previous table. Otherwise exactly the same formatting but with the javascript library option checked.

    [table id=4 responsive=scroll datatables_fixedcolumns_left_columns=1 /]

    Last question – the whole table seems to be extending beyond the width of the container, and it is affecting the way the rest of the content on the page is displaying.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    3 years, 6 months ago

    Hi,

    thanks for your question, and sorry for the trouble.

    You will indeed have to turn on the “Use DataTables” checkbox here, but can turn off the checkboxes for the individual features, if they are not desired.

    Then, you should remove the responsive=scroll parameter, as that is not necessary, as the FixedColumns Extension brings its own scrolling.

    The misalignment it likely caused by the different height of the rows, in particular caused by that row with images – which use “lazy-loading”. Due to this, the row height can not be calculated properly. You could however try setting it manually, by adding this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    .tablepress-id-4 .row-2 td {
    height: 120px;
}

    Regards,
    Tobias

    Thread Starter jamesdurak

    (@jamesdurak)

    3 years, 6 months ago

    Thank you for your quick response! I think setting the row height manually fixes the misalignment issue.

    Now I am getting a weird secondary scroll bar just for the first column. I’ve tried setting the width of that column manually to a fixed pixel number with the following custom css, but it doesn’t seem to have any effect.

    .tablepress-id-4 .column-1 {
    text-align: left;
    width: 150px;
    }

    Any ideas about the overall width of the table pushing out beyond the boundaries of its container? Check out how the table is centered within a white boxed background, but it’s wider than the rest of the post towards the top and it makes the images and galleries from the top of the post skew to the right.

    Thank you for your help!

    Plugin Author TobiasBg

    (@tobiasbg)

    3 years, 6 months ago

    Hi,

    good to hear that this helped!

    As for the extra scrollbar: I’m not sure where that’s coming from, but this CSS should remove it:

    .DTFC_LeftBodyLiner {
  overflow-x: hidden !important;
}

    I’m not sure what you mean with the overall width. For me, the table is at 100% of the container width. The text and headings actually use the same container widths.

    Regards,
    Tobias

    Thread Starter jamesdurak

    (@jamesdurak)

    3 years, 6 months ago

    That worked great for getting rid of the extra scroll bar on the first column, thanks.

    What I mean about the width of the table is that it seems to be overriding the default container width I have set up for single post pages using Elementor. When I remove the table, the container width is the way I expect it to be. When I add the table, the container for post content is pushed out to the right. You can see how it juts out to the right at the spot next to the “archive” drop down menu in the sidebar. It seems to only be an issue on desktop, and I’m not sure why.

    Plugin Author TobiasBg

    (@tobiasbg)

    3 years, 6 months ago

    Hi,

    ah, that’s what you mean. To me, it actually looks like the sidebar is shifted a bit to the left and “hovers” above some of the white area.
    That white content area has the same width as the parts below it (comments form, footer, etc.) for me.

    Unfortunately, I have no idea what’s going on there, sorry.

    Regards,
    Tobias

    Thread Starter jamesdurak

    (@jamesdurak)

    3 years, 6 months ago

    Thanks for all your help and your responsiveness. I just left you a 5-star review. Best of luck,

    Plugin Author TobiasBg

    (@tobiasbg)

    3 years, 6 months ago

    Hi,

    thanks! I really appreciate it!

    Best wishes,
    Tobias

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Database Fixed Columns with Responsive Scroll’ is closed to new replies.