B4J Question [ABMaterial] (Solved) How to remove margin in modal sheet

OliverA

Expert
Licensed User
Longtime User
ABM Version 3.51
B4J Version 7.32
Java Version 8.212 and 11.0.1

I have a modal sheet in which I place a table. I can't seem to get rid of the left and right margin within the modal sheet. I have the following build code:
B4X:
'Modal sheet for: Total Users, Beacons
Sub BuildTotalUsers() As ABMModalSheet
   Log("******************************** BUILD MODAL SHEET **********************")
   Dim modal As ABMModalSheet
   'modal.Initialize(page, "showTotalUsers", True, ABM.MODALSHEET_TYPE_NORMAL, "")
   modal.Initialize(page, "stu", True, ABM.MODALSHEET_TYPE_NORMAL, "")
   modal.IsDismissible = True
   modal.Size = ABM.MODALSHEET_SIZE_LARGE
   modal.Content.AddRowsM2(1,True, 0, 0, 0, 0,"").AddCells12(1,"")
   modal.Content.BuildGrid
   modal.Content.MarginLeft = "0px"
   modal.Content.MarginRight = "0px"
   modal.MaxHeight = "100%"
   modal.MaxWidth = "100%"
   'Below use AddRowsM to remove margin's to remove double scroll bars
   'https://www.b4x.com/android/forum/threads/abmaterial-modalsheet-scrollbar-issue.88870/
   'modal.Header.AddRowsM(1,True, 0, 0,"").AddCellsOS(1,0,0,0,11,11,11,"center").AddCellsOS(1,11,11,11,1,1,1,"")
   'modal.Header.AddRowsM(1, True, 0, 0, "").AddCells12(1, "center")
   modal.Header.PaddingRight = "0px"
   modal.Header.PaddingLeft = "0px"
   modal.Header.MarginLeft = "0px"
   modal.Header.MarginRight = "0px"
   modal.Header.AddRowsM2(1, True, 0, 0, 0, 0, "").AddCellsOS(1,1,1,1,10,10,10,"center").AddCellsOS(1,0,0,0,1,1,1,"right")
   modal.Header.BuildGrid
   modal.Header.PaddingRight = "0px"
   modal.Header.PaddingLeft = "0px"
   modal.Header.MarginLeft = "0px"
   modal.Header.MarginRight = "0px"
   modal.Header.Row(1).PaddingLeft = "0px"
   modal.Header.Row(1).PaddingRight = "0px"
   modal.Header.Cell(1,1).AddComponent(ABMShared.BuildParagraph(page, "stuTitel", "Data View"))
   Dim btnClose As ABMButton
   btnClose.InitializeFlat(page, "btnStuClose", "", "", "X", "")
   modal.Header.Cell(1,2).AddComponent(btnClose)
   modal.Footer.AddRowsM2(1,True, 0, 0, 0, 0, "").AddCells12(1,"center")
   modal.Footer.BuildGrid
   modal.Footer.MarginLeft = "0px"
   modal.Footer.MarginRight = "0px"
   modal.Footer.PaddingTop = "0px"
   modal.Footer.PaddingBottom = "0px"
   modal.Footer.Cell(1,1).AddComponent(ABMShared.BuildParagraph(page, "stuFooter", "© XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"))
   Return modal
End Sub

Notice that I'm removing any padding/margin that I can find, yet there is still a margin. Looking at the dev tools on FireFox, everything seems to have 0 left right margin, except for the containers that wrap the header, content, and footer. Here is the one for the header
B4X:
<div id="stu-header-r1_cont" class="container">
The above HTML is produced by ABM and when looking at the box model information, the left and right margins for this DIV are set to auto (DIV's above and below this DIV have 0 margin). Is that causing the issue? What am I doing wrong?

I've attached a picture to show my issue.
 

Attachments

  • 2019-06-09 22_46_01-Dashboard.jpg
    2019-06-09 22_46_01-Dashboard.jpg
    38.9 KB · Views: 390

Cableguy

Expert
Licensed User
Longtime User
The issue is in your grid, you are setting to "true" the center in page attribute. This makes the grid resize itself to be about 85% of the available "screen", in this case, your ModalSheet.

Try this:
B4X:
modal.Content.AddRowsM2(1,False, 0, 0, 0, 0,"").AddCells12(1,"")
   modal.Content.BuildGrid

modal.Footer.AddRowsM2(1,False, 0, 0, 0, 0, "").AddCells12(1,"center")
   modal.Footer.BuildGrid
 
Upvote 0
Top