Column with

  • Resolved avelin123

    (@avelin123)


    5 years, 8 months ago

    Hello Tobias,

    I am trying to figure out the responsive view for our table. We spent many hours today reading the forums but couldnt find anything that would work.

    1) We are trying to freeze the first column refuses to freeze. We downloaded the extension and this is our shortcode: [table id=1 datatables_fixedcolumns_left_columns=1 /]

    2) Apart from that, as the text in columns 2, 3, and 4 have different lengths, we wanted to make the column width equal so that it would be consistent for the viewer. It works for desktop and tablet view with this code: 

    .tablepress-id-1 .column-1 {
	width: 40%;
}

.tablepress-id-1 .column-2,
.tablepress-id-1 .column-3,
.tablepress-id-1 .column-4 {
	width: 20%;
}

    However we just cant change the column width in mobile view. Our goal is to fix the first column and have it at 50% of the mobile screen and have column 2,3,4 also at 50% (with scrolling).

    Can you please help? Thank you very much!

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

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    5 years, 8 months ago

    Hi,

    thanks for your question, and sorry for the trouble.

    From what I can see, the FixedColumns Extension is not yet working. Can you please check if it’s activated, and if the “Use DataTables” checkbox is activated, on the table’s “Edit” screen?

    Also, there’s a JavaScript error on the page, that’s breaking things, caused by the line

    $( "#sustainability-tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );

    The tabs() function is not loaded, so that this throws an error. I don’t really know where this line is coming from though.

    Regards,
    Tobias

    Thread Starter avelin123

    (@avelin123)

    5 years, 8 months ago

    Hello, we have fixed the Javascript error. But the 2 issues we mentioned above are still there. In addition, the fixed column is repeated (twice) on mobile and is overlapping…

    Can you help please?

    Thread Starter avelin123

    (@avelin123)

    5 years, 8 months ago

    FYI the plugin was activated and these are our settings on the table edit screen: https://prnt.sc/uj0j62

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    5 years, 8 months ago

    Hi,

    that’s good to hear! Now, as the next step, we need to fix the improper layout.
    The cause for this is extra HTML code that slipped in due to copy/paste. To remove this, please switch from the “Visual” to the “Text” editor on the “Edit” screen of this page. Then, please remove all <pre> and </pre> HTML tags around the Shortcode.

    Regards,
    Tobias

    Thread Starter avelin123

    (@avelin123)

    5 years, 8 months ago

    Hi Tobias,

    I could not find the <pre> and </pre> HTML tags you mentioned. We checked every page with code related to the table but nothing seems to work. Please help…

    Here are the pages that I checked:

    WPbakery “Backend Editor”:
    https://prnt.sc/uj8dfb

    Text block element with the short code (Visual):
    https://prnt.sc/uj8evk

    Text block element with the short code (Text):
    https://prnt.sc/uj8fgo

    Wordpress classic editor (Visual):
    https://prnt.sc/uj8gaf

    Wordpress classic editor (Text):
    https://prnt.sc/uj8gg2

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    5 years, 8 months ago

    Hi,

    indeed, the <pre> tags are gone now 🙂 No idea why I saw them…

    To now fix that visual glitch, please extend

    .tablepress-id-1 tbody td {
	font-family: "Muli", Arial, Helvetica, sans-serif;
}

    to

    .tablepress-id-1 tbody td {
	font-family: "Muli", Arial, Helvetica, sans-serif;
	background-color: #ffffff;
}

    to add a white background to the table cells. After that, the fixed column should be working fine.

    Regards,
    Tobias

    Thread Starter avelin123

    (@avelin123)

    5 years, 8 months ago

    Hi Tobias,

    Thanks that works great!! Who would have thought that adding a background colour would fix it! 🙂

    How about for column width in mobile view? Our goal is to have the first column occupying 50% of the mobile screen and have columns 2,3,4 also at 50% (with scrolling).

    We tried some @media codes but they dont seem to work 🙁

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    5 years, 8 months ago

    Hi,

    good to hear that this helped!

    As for the width, you could try this:

    @media screen and (max-width: 768px) {
  .tablepress-id-1 th,
  .tablepress-id-1 td {
    min-width: 200px;
  }
}

    Regards,
    Tobias

    Thread Starter avelin123

    (@avelin123)

    5 years, 8 months ago

    Hello Tobias, thank you very much for this. It seems to be working now!!! 🙂

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    5 years, 8 months ago

    Hi,

    no problem, you are very welcome! 🙂 Good to hear that this helped!

    Best wishes,
    Tobias

    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Column with’ is closed to new replies.