{"id":605,"date":"2019-03-19T13:01:00","date_gmt":"2019-03-19T18:01:00","guid":{"rendered":"https:\/\/blog.felineflock.com\/?p=605"},"modified":"2024-01-01T13:19:42","modified_gmt":"2024-01-01T19:19:42","slug":"an-easier-way-to-make-visualforce-tables-mobile-friendly","status":"publish","type":"post","link":"https:\/\/blog.felineflock.com\/index.php\/2019\/03\/19\/an-easier-way-to-make-visualforce-tables-mobile-friendly\/","title":{"rendered":"An easier way to make VisualForce tables mobile friendly"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

The default behavior of VisualForce tables (apex:pageBlockTable and apex:dataTable) is static – they don’t rearrange the data to better fit tablets and smartphones.<\/p>\n\n\n\n

This example shows how tiny the table data can appear on an IPhone.<\/p>\n\n\n\n

Sometimes the table will not decrease in size and will require the user to scroll sideways to see all data in it.<\/p>\n\n\n\n

I’ve implemented a CSS solution based on principles described on this<\/a> article<\/a> at CSS-tricks.com and have added several adjustments to make it work requiring minimal changes to the VisualForce code.<\/p>\n\n\n\n

This solution below (my GitHub<\/a>) resizes and rearranges the table data according to the screen size and can be implemented in 3 steps.<\/p>\n\n\n\n

https:\/\/github.com\/fmendes\/MobileResponsiveVisualForceTable\/tree\/master<\/a><\/p>\n\n\n\n

    \n
  1. use the “mobileFriendly.css<\/a>” file linked above – it contains the CSS directives to make a browser respond to the screen size<\/li>\n\n\n\n
  2. add to your apex:pageBlockTable or apex:dataTable the attribute below:<\/li>\n<\/ol>\n\n\n\n
    \n

    styleClass=”mobileFriendly”<\/p>\n<\/blockquote>\n\n\n\n

      \n
    1. for each column in your table, add the attribute below containing the column header to display<\/li>\n<\/ol>\n\n\n\n
      \n

      html-data-header=”your column header text ending with a space”<\/p>\n<\/blockquote>\n\n\n\n

      You can edit the CSS file to adjust how the elements appear, increase font-size or weight, etc.<\/p>\n\n\n\n

      This was tested mostly with lightningStylesheets=”true”<\/strong> but it works in Classic too.<\/p>\n\n\n\n

      The result is below (animated GIF showing the table responding to screen resizing):<\/p>\n\n\n\n

      \"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"

      The default behavior of VisualForce tables (apex:pageBlockTable and apex:dataTable) is static – they don’t rearrange the data to better fit tablets and smartphones. This example shows how tiny the table data can appear on an IPhone. Sometimes the table will not decrease in size and will require the user to scroll sideways to see all […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-605","post","type-post","status-publish","format-standard","hentry","category-blog"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/blog.felineflock.com\/index.php\/wp-json\/wp\/v2\/posts\/605","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.felineflock.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.felineflock.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.felineflock.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.felineflock.com\/index.php\/wp-json\/wp\/v2\/comments?post=605"}],"version-history":[{"count":1,"href":"https:\/\/blog.felineflock.com\/index.php\/wp-json\/wp\/v2\/posts\/605\/revisions"}],"predecessor-version":[{"id":609,"href":"https:\/\/blog.felineflock.com\/index.php\/wp-json\/wp\/v2\/posts\/605\/revisions\/609"}],"wp:attachment":[{"href":"https:\/\/blog.felineflock.com\/index.php\/wp-json\/wp\/v2\/media?parent=605"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.felineflock.com\/index.php\/wp-json\/wp\/v2\/categories?post=605"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.felineflock.com\/index.php\/wp-json\/wp\/v2\/tags?post=605"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}