B4J Question [ABMaterial] Responsive design issue

[Harris]

Simple grids look fine when there is only 1 line in each cell to deal with.

They get distorted when the cell contains 2 or more lines - or larger objects.

This looks fine... I adjusted first header item to a fixed height.... This is fine when you know the image will be a certain height.

Header don't match columns in this view.

It should look much like this.

The problem as I see it is that I can't set the header height based on the row (cell) actual height. One needs to compute what the cell height is before you can set the header height (or the under-lying system do that automatically).

Has some smart cookie resolved this? I played with various aspects to no avail.

Thanks

 

[stanmiller]

The first thing I'd like to see are the grid lines.

For debug builds we can toggle the grid lines on/off by clicking on the logo atop the menu. This is very helpful to see how ABM is laying out the page.

'*----------------------------------------------------- SiteOneLogo_Clicked()
'*
Private Sub SiteOneLogo_Clicked(Value As String )

#if DEBUG

    If ( page.ShowGridInfo = True ) Then
        WebApp.bShowGrid = False
    Else
        WebApp.bShowGrid = True
    End If
 
    page.ShowGridInfo = WebApp.bShowGrid
    page.Refresh

#end if

End Sub

Grid lines shown.

Next, use the Chrome debugger [F12] to sort out the padding, margins, and positioning. In other words, what's the browser seeing?

Use the Chrome inspect tool to choose an item.

Then select the 'Computed' tab to see the boxing.

 

[alwaysbusy]

The original Materialize CSS could only handle single line text as a cell value, so my guess is they don't calc the height. Did you somewhere set a height value on the header in your code?

 

[Harris]

The original Materialize CSS could only handle single line text as a cell value, so my guess is they don't calc the height. Did you somewhere set a height value on the header in your code?

I had set it for various cells, then unset it (commented out the line - tblCases.SetHeaderHeights( Array As Int (0 ,...)

For multi line cells, I never know what the height will be. And, this should be the largest height of the cell with the most lines - which varies.

So, I guess I shall have to ensure single lines (short and truncted) and include a button so the user can open a form to read the content when in this responsive mode.
Anyways, lots of text is hard to read in this mode, since you may have to scroll the screen to the right (which gets cumbersome).
Granted, a normal (long) table grid just does not work on a phone...

Thanks

 

[Harris]

From ugly to beautiful... Lesson learned! With very little real-estate on a phone, one has to compromise.
The view form can handle reams of text - if need be...

To get the button cells to match the header text, set the header heights to 48, otherwise they won't line up...
tblCases.SetHeaderHeights( Array As Int (0 , 0 ,0 , 0 , 0 , 0 , 48 , 48 , 48 ))

Also, my cell size trick.. I set cell size on small devices to 12 - so they wrap. Hey - It Works!
page.AddRows(1,True, "rowtheme2").AddCellsOSMP(1,0,0,0, 12 ,3,3,0,0,0,0,"").AddCellsOSMP(1,0,0,0, 12 ,3,3,0,0,0,0,"").AddCellsOSMP(1,0,0,0, 6,3,3, 20,0,0,0,"cellcntr").AddCellsOSMP(1,0,0,0, 6,3,3, 20,0,0,0,"cellcntr")

As per usual - ABM Rocks!

Note the view button...

 

[stanmiller]

Nice. I now use the ABM Gridbuilder for all layouts. You can't beat the visual representation.

This is the original code for the cell size trick.

page.AddRows(1,True, "rowtheme").AddCellsOSMP(1,0,0,0, 12 ,3,3,0,0,0,0,"").AddCellsOSMP(1,0,0,0, 12 ,3,3,0,0,0,0,"").AddCellsOSMP(1,0,0,0, 6,3,3, 20,0,0,0,"cellcntr").AddCellsOSMP(1,0,0,0, 6,3,3, 20,0,0,0,"cellcntr")

Here's the layout as grid builder sees it.

'PHONE
'╔═══════════════════════════════════════════════════════════════════════════════════╗
'║ 1,1                                                                               ║
'║-----------------------------------------------------------------------------------║
'║ 1,2                                                                               ║
'║-----------------------------------------------------------------------------------║
'║ 1,3                                     | 1,4                                     ║
'╚═══════════════════════════════════════════════════════════════════════════════════╝

'TABLET
'╔═══════════════════════════════════════════════════════════════════════════════════════════════════════════╗
'║ 1,1                      | 1,2                      | 1,3                      | 1,4                      ║
'╚═══════════════════════════════════════════════════════════════════════════════════════════════════════════╝

'DESKTOP
'╔═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════╗
'║ 1,1                            | 1,2                            | 1,3                            | 1,4                            ║
'╚═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════╝

' Optimized with grid builder
Page.AddRows(1, true,"rowtheme").AddCellsOS(2,0,0,0,12,3,3,"").AddCellsOSMP(2,0,0,0,6,3,3,20,0,0,0,"cellcntr")
Page.BuildGrid ' IMPORTANT!