Hello,
I'm still new to Webconnect 7.0 templates.
I'd appreciate if any one could give me a hint on where I should fix the data grid size(below).
It gets cut-off on Pixel 2 & 3 for instance.
I tried to do some changes in application.css and bootstrap.css but not quite sure what to do with the container size.
Thanks for your help,
Kathy

HTML Tables are notoriously bad for styling on mobile devices and as a first defense I would recommend some other mechanism to display data if you need to shrink down to phone size.

Either reduce the number of columns to a very small number of fixed width columns that you know will fit onto mobile screens or choose some other display mechanism for small sizes.

I personally much prefer single column stacked views for lists (like the Message Board Message list on the left for example) and then drilling into the data for more info.

If people really need to look at very wide tabular data, you can open a new window and don't use ViewPort scaling to basically view a desktop form in the browser. That'll show data in the native phone resolution (ie. very small) but the user can scroll around in that.

If you remove this from the HTML header of your page:

<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1" />

The page will use desktop sizing using native resolutions rather than fixed width mobile scaling. It's ugly, but a decent way to go if you just display a spreadsheet style grid. Not an option for an otherwise mixed display page IMHO.

Another option is to use a container around your table, and make the container's overflow scrollable:

<div id="TableContainer" style="width: 100%; overflow-x: scroll;">

   <table style="width: 2000px">
   ...
   </table>

</div>

Now the <div> contains the table in the mobile device's width, but you should be able to scroll left and right to get the full width of the table. With HtmlDataGrid() you can set the width in the styling of the Config object.

This should be a last resort operation though because that UI is terrible user experience and totally unintuitive. But it does work.

+++ Rick ---

Thank you so much Rick.
I'm learning new things.
But I noticed that the users could see the cut-off parts by click-drag the whole page but they were not happy with it!
So scrolling the table won't help. Also as you mentioned the table will show up too small without the "ViewPort".
I changed the "initial-scale" to 0.80 to test.
It looks fine for the first page but I need to do more test.
Would you think if this would help?

In that case don't use the ViewPort in the page to change the size. Just tweak the font-size of the table:

<table style="font-size: 0.8em">
...
</table>

to make the table smaller. With Bootstrap 4 you can also use the table-small class:

Bootstrap Tables - .table-sm

+++ Rick ---

So you would not recommend "initial-scale" change in 'meta' tag on the _layoutpage?
Also, can I apply the font size style or bootstrap table-small class to HtmlDataGrid as well?
Thanks.

No, Viewport changes are a true last resort and only makes sense if you are willing to serve 'desktop' style browser page - ie. you remove the ViewPort meta tag completely. This changes the behavior of the page that allows you to pinch and zoom and scroll around the page which is generally a bad thing but for very large content it can occasionally be useful. I used this occasionally for reports or spreadsheets, but always for single documents/control type display (ie. just the grid) or just the report etc.). If there's a mixed content, styled page then this approach is terrible and shouldn't be used.

For all other things that affect sizing of components within a fixed page that isn't to be 'moved around' by zooming/pinching as a whole, using styling is always preferred and much easier to apply for that matter.

+++ Rick ---

Thank you so much.
And (if I want to be lazy) how can I apply the styling or the bootstrap "table-small" class to HtmlDataGrid() config object or css class?
Is it practical?

You can use the config object:

loConfig = CREATEOBJECT("HtmlDataGridConfig")
loConfig.CssClass = "table table-sm table-striped"
lcHtml = HtmlDataGrid("TQuery",loConfig)

Customizing HtmlDataGrid Rendering

+++ Rick ---

Very fast and easy adjustment.
Works like a charm.
Thank you so very much Rick.
Kathy

Great 👍...

+++ Rick ---