WordPress.org

Ready to get started?Download WordPress

Forums

TablePress
[resolved] Responsive table head row out of alignment (10 posts)

  1. Jodi Wigmore
    Member
    Posted 7 months ago #

    Hello, Tobias

    First, thank you for an excellent plugin! I am in the process of converting a client's site to a new responsive theme, and have migrated from Table Reloaded to TablePress (which I used for the first site), but am seeing some odd behaviour in mobile devices. I imported my old xml file to the new testing area, installed a brand new TablePress (did not install Reloaded), then assigned the appropriate code on one page:

    http://v2.equitablerealestate.ca/residential-vacancies/

    [table id=1 responsive="tablet" /]
    The table [table-info id=1 field="name" /] was last modified at [table-info id=1 field="last_modified" format="raw" /] by [table-info id=1 field="last_editor" /].

    As you can see on a tablet or phone, the first 3 entries of the head row are out of alignment with everything else. I'm wondering if this might be a styling error, or something to do with importing old data? Please advise and thank you; I am happy to donate for your time :)

    Best, Jodi

    http://wordpress.org/plugins/tablepress/

  2. TobiasBg
    Member
    Plugin Author

    Posted 7 months ago #

    Hi Jodi,

    thanks for your post, and sorry for the trouble.
    Good to hear that you already made the switch from WP-Table Reloaded to TablePress!

    About your issue:
    The reason for this is the "Size" column, which has text in two lines of text. Due to that, the height of the rows (in responsive mode) can not be determined correctly and has to be set with CSS.
    Please try adding this to the "Custom CSS" textarea on the "Plugin Options" screen of TablePress:

    .tablepress-id-1 td,
    .tablepress-id-1 th {
      height: 59px;
    }

    Regards,
    Tobias

  3. Jodi Wigmore
    Member
    Posted 7 months ago #

    Thank you, Tobias! Worked perfectly. I have another question but am going to search the forum before I bother you again :)

  4. TobiasBg
    Member
    Plugin Author

    Posted 7 months ago #

    Hi,

    no problem, you are very welcome! :-) Good to hear that this helped!

    And don't hesitate to open a new thread if you can't find a solution for the other question!

    Best wishes,
    Tobias

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

  5. Jodi Wigmore
    Member
    Posted 7 months ago #

    Hi Tobias

    I'm not sure what happened but for some reason my responsive tables are not lining up again.

    http://v2.equitablerealestate.ca/office-building-vacancies/

    It looks fine on a desktop but not on a tablet or phone - I see a bit of grey top and bottom that seems to be throwing it all off. Please advise and thank you, again. Jodi

    I have added this into the plugin options CSS area:

    .tablepress-id-1 td,
    .tablepress-id-1 th {
    	height: 59px;
    }
    
    .tablepress thead th,
    .tablepress tfoot th {
    	color: #fff;
    	background-color: #014918;
    }
    
    .tablepress thead .sorting_asc,
    .tablepress thead .sorting_desc,
    .tablepress thead .sorting:hover {
    	background-color: #6b6b6b;
    }
    
    .tablepress .row-hover tr:hover td {
    	background-color: #e8e8e8;
    }
    
    .tablepress {
    	width: auto;
    	margin: 0 auto 1em;
    }
    
    .tablepress {
    	border: none;
    }
  6. TobiasBg
    Member
    Plugin Author

    Posted 7 months ago #

    Hi Jodi,

    as this is now table 2, the CSS from above does not apply, as that was for table 1 only.
    To now also change table 2, please add this to the "Custom CSS":

    .tablepress tr {
      vertical-align: top;
    }
    .tablepress-id-2 .column-8 {
      height:59px;
    }

    Regards,
    Tobias

  7. Jodi Wigmore
    Member
    Posted 7 months ago #

    Ah! Of course, so if I remove the table id then it will work for all tables, correct? I'm curious, what does the .column-8 specify? :)

  8. TobiasBg
    Member
    Plugin Author

    Posted 7 months ago #

    Hi,

    yes, you could remove the "-id-2" part here, and make that piece of code apply to all tables. In this example, you don't want to do this though, as it would change the height of all cells in all tables then.

    The .column-8 specifies that the code shall only apply to column 8 of the table. However, as in the responsive mode the table is flipped, this basically targets row 8 of the table when in responsive mode.

    Regards,
    Tobias

  9. Jodi Wigmore
    Member
    Posted 7 months ago #

    Ah, thank you for the explanation :)

  10. TobiasBg
    Member
    Plugin Author

    Posted 7 months ago #

    Hi,

    sure, no problem! :-)
    If this problem happens again, feel free to post here again!

    Best wishes,
    Tobias

Reply

You must log in to post.

About this Plugin

About this Topic