London table issue when emulating an iPad in Chrome 37

London table issue when emulating an iPad in Chrome 37

  
I'm currently using Service Studio version 8.0.1.25.  When I use the London Theme unmodified, I get a responsive table problem when I do the following:

- put a table with several columns inside a container inside a web block
- put the web block in the right hand container of a row of two 6-column containers

When I do this, emulating what it would look like on an iPad 1/2/mini in portrait orientation (using web developer tools in Chrome), the table does not "respond" to the screen size, it overflows the parent container instead.  



Does this overflow problem actually happen on the iPad or other tablets?  I don't have an iPad, but I have attached the OML.
Hi Joshua,

From the look of it the text in the cells can't wrap anything else. Consider using smaller fonts, merging information from 2 columns in a single column (e.g. http://www.outsystems.com/academy/training/11/1692/610/make-a-list-easier-to-read/), or removing columns that are not so important.

Cheers,
Tiago Simões
That can be done, but shouldn't the responsive table rows become foldable like it does on my phone?



Hi Joshua,

Responsive tables only work in smartphone form factors. If you need something similar you would need to inspect, copy and adapt RichWidgets.ResponsiveTableRecords web block CSS and javascript.

Another option could be to use the HiddenInPortrait CSS classes in some table row and header cells.

Cheers,
Tiago Simões

Ok.  I'll look into those.  Thanks for the pointers!
Tiago Simões wrote:
Hi Joshen,

Responsive tables only work in smartphone form factors. If you need something similar you would need to inspect, copy and adapt RichWidgets.ResponsiveTableRecords web block CSS and javascript.

Another option could be to use the HiddenInPortrait CSS classes in some table row and header cells.

Cheers,
Tiago Simões
 
 
Hey Tiago,

Based on your suggestion, I adapted the CSS to use the same form factor as phones when enclosed in a responsive container that is 3 columns wide or less.  The CSS for this is available for anybody else who wants this capability here.

Have a nice day,
Josh
Very cool, thanks for sharing