B4J Question ABMaterial Modals

Marcos Alves · Jul 26, 2019

Hi there,

is there any way to fix a modal header in ABMaterial? I mean, maintain the scroll bar only in the content area?

OliverA · Jul 26, 2019

Zero out the padding of your footer and header. See https://www.b4x.com/android/forum/threads/abmaterial-modalsheet-scrollbar-issue.88870/

Marcos Alves · Jul 26, 2019

OliverA said:
Zero out the padding of your footer and header. See https://www.b4x.com/android/forum/threads/abmaterial-modalsheet-scrollbar-issue.88870/

Thanks @OliverA ... I'll check!

Marcos Alves · Jul 26, 2019

OliverA said:
Zero out the padding of your footer and header. See https://www.b4x.com/android/forum/threads/abmaterial-modalsheet-scrollbar-issue.88870/

Hello,
I did this:

B4X:

    MyModal.Header.AddRowsM(1,True,0,0,"celcenterallign").AddCellsOS(1,2,2,2,7,7,7,"celcenterallign").AddCellsOS(1,1,1,1,1,1,1,"")
    MyModal.Header.BuildGrid ' IMPORTANT!
    
    MyModal.Header.PaddingTop = "0px"

But the header is still scrolling... anything wrong?

OliverA · Jul 27, 2019

1) User AddRowsM2 instead of AddRowsM. Use 0 for all paddings. Use it for both the Header and the Footer of the modal sheet
2) On top of that, set both PaddingTop and PaddingBottom to "0px" for both the Header and the Footer. In my case, it was the Footer that caused the double scroll bars.
3) I may misunderstand your issue and you may want to post a picture in case this does not solve your problem.

Marcos Alves · Jul 27, 2019

OliverA said:
1) User AddRowsM2 instead of AddRowsM. Use 0 for all paddings. Use it for both the Header and the Footer of the modal sheet
2) On top of that, set both PaddingTop and PaddingBottom to "0px" for both the Header and the Footer. In my case, it was the Footer that caused the double scroll bars.
3) I may misunderstand your issue and you may want to post a picture in case this does not solve your problem.

Hello @OliverA ... Thanks for your help ! I'll test and post a feedback here.

Marcos Alves · Jul 29, 2019

OliverA said:
1) User AddRowsM2 instead of AddRowsM. Use 0 for all paddings. Use it for both the Header and the Footer of the modal sheet
2) On top of that, set both PaddingTop and PaddingBottom to "0px" for both the Header and the Footer. In my case, it was the Footer that caused the double scroll bars.
3) I may misunderstand your issue and you may want to post a picture in case this does not solve your problem.

Hello,

really didn't work... I used this code:

B4X:

    MyModal.Header.AddRowsM2(1,True,0,0,0,0,"celcenterallign").AddCellsOS(1,2,2,2,7,7,7,"celcenterallign").AddCellsOS(1,1,1,1,1,1,1,"")
    MyModal.Header.BuildGrid ' IMPORTANT!
   
    MyModal.Header.PaddingTop = "0px"
    MyModal.Header.PaddingBottom = "0px"
    MyModal.Header.PaddingLeft = "0px"
    MyModal.Header.PaddingRight = "0px"
    MyModal.Header.MarginTop = "0px"
    MyModal.Header.MarginBottom = "0px"
    MyModal.Header.MarginLeft = "0px"
    MyModal.Header.MarginBottom = "0px"

And got this result yet:

The modal doesn't have footer and so it didn't required to configure the footer padding right?

What is wrong?

OliverA · Jul 29, 2019

I just tried one of mine, and it works correctly, even without footer. How are you loading your Modal Header and your Modal Content? What version of ABM? It looks almost like everything is loaded into the Header.

Marcos Alves · Jul 29, 2019

OliverA said:
I just tried one of mine, and it works correctly, even without footer. How are you loading your Modal Header and your Modal Content? What version of ABM? It looks almost like everything is loaded into the Header.

Hello @OliverA ... This is the complete code:

B4X:

    Dim MyModal As ABMModalSheet
    MyModal.Initialize(appPage,"addUserModal",False,ABM.MODALSHEET_SIZE_FULL,"")

    MyModal.Header.UseTheme("modalheader")
    MyModal.Content.UseTheme("modalcontent")
    MyModal.Footer.UseTheme("modalfooter")
    MyModal.MaxWidth = "600px"
    MyModal.IsDismissible = False

    MyModal.Header.AddRowsM2(1,True,0,0,0,0,"celcenterallign").AddCellsOS(1,2,2,2,7,7,7,"celcenterallign").AddCellsOS(1,1,1,1,1,1,1,"")
    MyModal.Header.BuildGrid ' IMPORTANT!
   
    MyModal.Header.PaddingTop = "0px"
    MyModal.Header.PaddingBottom = "0px"
    MyModal.Header.PaddingLeft = "0px"
    MyModal.Header.PaddingRight = "0px"
    MyModal.Header.MarginTop = "0px"
    MyModal.Header.MarginBottom = "0px"
    MyModal.Header.MarginLeft = "0px"
    MyModal.Header.MarginBottom = "0px"
   
    MyModal.Header.Row(1).SetFixedHeight(50,False)
    MyModal.Header.Row(1).Refresh
    Dim headerLabel As ABMLabel
    headerLabel.Initialize(appPage,"addHeaderLabel","Adicionar Usuários",ABM.SIZE_H6,False,"fontwhite")
    MyModal.Header.Cell(1,1).AddComponent(headerLabel)

    Dim btnCancelAddUser As ABMButton
    btnCancelAddUser.InitializeFloating(appPage,"btnCancelAddUser","mdi-navigation-cancel","")
    MyModal.Header.Cell(1,2).MarginTop = "10px"
    MyModal.Header.Cell(1,2).Refresh
    MyModal.header.Cell(1,2).AddComponent(btnCancelAddUser)
   
    Dim tabsAddUser As ABMTabs
    tabsAddUser.Initialize(appPage,"tabsAddUser","")
    tabsAddUser.AddTab("tabAddUser1","Adicionar por E-Mail",BuildTabAddUserContainer(appPage,"tabAddUser1","Adicionar por E-Mail"),3,3,3,12,12,12,True,True,"","")
    tabsAddUser.AddTab("tabAddUser2","Buscar Usuários",BuildTabAddUserContainer(appPage,"tabAddUser2","Buscar Usuários"),3,3,3,12,12,12,True,True,"","")
   
    ' create the grid for the content
    MyModal.Content.AddRowsM(1,True,0,0,"").AddCells12(1,"")
    MyModal.Content.AddRowsMV(4,True,0,0,ABM.VISIBILITY_HIDE_ALL,"").AddCellsOS(1,0,0,0,6,6,6,"").AddCellsOSMP(1,0,0,0,1,1,1,30,0,0,0,"").AddCellsOS(1,1,1,1,1,1,1,"")
    MyModal.Content.BuildGrid 'IMPORTANT once you loaded the complete grid AND before you start adding components

    MyModal.Content.Cell(1,1).AddComponent(tabsAddUser)

    'MyModal.Footer.AddRowsM(1,True,0,0,"").AddCellsOS(2,2,2,2,3,3,3,"celcenterallign")
    'MyModal.Footer.BuildGrid 'IMPORTANT once you loaded the complete grid AND before you start adding components
   
    Return MyModal

As you can see, I'm loading the list and additional components in the content area of modal. My ABmaterial version is based on 4.51 BUT is a "custom" version developed by the author, @alwaysbusy (Alain) to fit to some special requirements of our project.
I really couldn't find out what is wrong. The only difference is a button that I added to the header to allow the user to close the modal... but I already tried to remove it and the scroll bar is still over the header yet...

OliverA · Jul 29, 2019

Are you loading this via page.AddModalSheetTemplate? If I try something similar to your code, it bombs out at

B4X:

MyModal.Header.Row(1).Refresh

with

java.lang.NullPointerException
at com.ab.abmaterial.ABMRow.RefreshInternal(Unknown Source)
at com.ab.abmaterial.ABMRow.Refresh(Unknown Source)
...

which makes sense, since AddModalSheetTemplate should be called in BuildPage (if using ABM Web Page class module) or in the Initialize sub of your page class.

I have a similar setup, except I don't load the content until after the build phase (an ABMTable). This is my skeleton code (partially adapted to yours to see if I can reproduce the issue). No scrolling issues.

B4X:

Sub BuildTotalUsers() As ABMModalSheet
   Log("******************************** BUILD MODAL SHEET **********************")
   Dim modal As ABMModalSheet
   'modal.Initialize(page, "stu", True, ABM.MODALSHEET_TYPE_NORMAL, "")
   modal.Initialize(page, "stu", True, ABM.MODALSHEET_SIZE_FULL, "")
   'modal.IsDismissible = True
   modal.IsDismissible = False
   'modal.Size = ABM.MODALSHEET_SIZE_LARGE
   'modal.MaxHeight = "100%"
   modal.MaxWidth = "400px"

   '1) Below, second parameter is center in page. If set to tru, row will be wrapped in a container
   'with left and right margins set to auto, which will add extra white space on the left and
   'right of the row.
   'See: https://www.b4x.com/android/forum/threads/abmaterial-solved-how-to-remove-margin-in-modal-sheet.106596/
   '2) 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.AddRowsM2(1, False, 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.Row(1).SetFixedHeight(30,False)
'   modal.Header.Row(1).Refresh
   modal.Header.Cell(1,1).AddComponent(ABMShared.BuildParagraph(page, "stuTitel", "Data View"))
   modal.Header.Cell(1,2).MarginTop = "10px"
'   modal.Header.Cell(1,2).Refresh
   Dim btnClose As ABMButton
   btnClose.InitializeFlat(page, "btnStuClose", "", "", "X", "")
   modal.Header.Cell(1,2).AddComponent(btnClose)

   modal.Content.AddRowsM2(2, 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
'   modal.Footer.PaddingTop = "0px"           'Solves footer from creating double scroll bars
'   modal.Footer.PaddingBottom = "0px"       'ditto
'   modal.Footer.Cell(1,1).AddComponent(ABMShared.BuildParagraph(page, "stuFooter", "XXXXXXXXXXXXXXXXXXXXXX. All rights reserved"))
   
   Return modal
End Sub

Marcos Alves · Jul 29, 2019

OliverA said:

Are you loading this via page.AddModalSheetTemplate? If I try something similar to your code, it bombs out at

B4X:

MyModal.Header.Row(1).Refresh

with

which makes sense, since AddModalSheetTemplate should be called in BuildPage (if using ABM Web Page class module) or in the Initialize sub of your page class.

I have a similar setup, except I don't load the content until after the build phase (an ABMTable). This is my skeleton code (partially adapted to yours to see if I can reproduce the issue). No scrolling issues.

B4X:

Sub BuildTotalUsers() As ABMModalSheet
   Log("******************************** BUILD MODAL SHEET **********************")
   Dim modal As ABMModalSheet
   'modal.Initialize(page, "stu", True, ABM.MODALSHEET_TYPE_NORMAL, "")
   modal.Initialize(page, "stu", True, ABM.MODALSHEET_SIZE_FULL, "")
   'modal.IsDismissible = True
   modal.IsDismissible = False
   'modal.Size = ABM.MODALSHEET_SIZE_LARGE
   'modal.MaxHeight = "100%"
   modal.MaxWidth = "400px"

   '1) Below, second parameter is center in page. If set to tru, row will be wrapped in a container
   'with left and right margins set to auto, which will add extra white space on the left and
   'right of the row.
   'See: https://www.b4x.com/android/forum/threads/abmaterial-solved-how-to-remove-margin-in-modal-sheet.106596/
   '2) 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.AddRowsM2(1, False, 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.Row(1).SetFixedHeight(30,False)
'   modal.Header.Row(1).Refresh
   modal.Header.Cell(1,1).AddComponent(ABMShared.BuildParagraph(page, "stuTitel", "Data View"))
   modal.Header.Cell(1,2).MarginTop = "10px"
'   modal.Header.Cell(1,2).Refresh
   Dim btnClose As ABMButton
   btnClose.InitializeFlat(page, "btnStuClose", "", "", "X", "")
   modal.Header.Cell(1,2).AddComponent(btnClose)

   modal.Content.AddRowsM2(2, 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
'   modal.Footer.PaddingTop = "0px"           'Solves footer from creating double scroll bars
'   modal.Footer.PaddingBottom = "0px"       'ditto
'   modal.Footer.Cell(1,1).AddComponent(ABMShared.BuildParagraph(page, "stuFooter", "XXXXXXXXXXXXXXXXXXXXXX. All rights reserved"))
  
   Return modal
End Sub

Hello,

as indicated by @alwaysbusy , all Modals are being built in ConnectPage()... see:

B4X:

public Sub ConnectPage()


'    Marcos - before connect navigation bar MUST to have the data to populate it
'   Can't use the SlaxDownChats - Wait For in a resumable sub causes the code flow to return to the parent
    '   But the code cant continue before getting the data
    Dim Json1 As JSONParser
    ABMLoginHandler.BuildModalSheets(page)
    ABMUploadFiles.BuildModalUpload(page)
    ABMAudioMessage.BuildModalAudioMessage(page)
    ABMLogoutHandler.BuildModalSheets(page)
    ABMLogoutHandler.BuildFinishModalSheet(page)
    ABMExtraModalsHandler.BuildModalSheets(page)

I don't have warnings or errors in log...

OliverA · Jul 29, 2019

Moved mine to ConnectPage and refresh is not causing an issue, but I still don't have scroll bar (actually, I only have the one in the content area, which is the desired result in my case). Start by commenting this out

B4X:

MyModal.Content.Cell(1,1).AddComponent(tabsAddUser)

and any other code later on that depends on this component and see what happens. If this does not resolve it, I would comment out the Content section, then the button in the title and then the title itself and see if something seems to be responsible for the scrollbar.

Marcos Alves said:
as indicated by @alwaysbusy , all Modals are being built in ConnectPage()... see:

Oh well, the only source I had was the Feedback app, and it does it's modal initialization in Build. Good to know it also works in Connect (would allow a more dynamic approach).

Marcos Alves · Jul 29, 2019

OliverA said:
Moved mine to ConnectPage and refresh is not causing an issue, but I still don't have scroll bar (actually, I only have the one in the content area, which is the desired result in my case). Start by commenting this out

B4X:

MyModal.Content.Cell(1,1).AddComponent(tabsAddUser)

and any other code later on that depends on this component and see what happens. If this does not resolve it, I would comment out the Content section, then the button in the title and then the title itself and see if something seems to be responsible for the scrollbar.

Oh well, the only source I had was the Feedback app, and it does it's modal initialization in Build. Good to know it also works in Connect (would allow a more dynamic approach).

Yes, maybe the problem is the tab component in modal content... If yes, I'll not have anything to do because I need this component there. I'll test and update the result here.
BUT notice that the scroll bar appears because the list is populated after the search command and so it will not be possible to do a real situation test because the search button and list is in the tab, and the scroll only appears is the list is greater than the modal height ...
then, I'll need to simulate.

B4J Question ABMaterial Modals

Marcos Alves

Well-Known Member

OliverA

Expert

Marcos Alves

Well-Known Member

Marcos Alves

Well-Known Member

OliverA

Expert

Marcos Alves

Well-Known Member

Marcos Alves

Well-Known Member

OliverA

Expert

Marcos Alves

Well-Known Member

OliverA

Expert

Marcos Alves

Well-Known Member

OliverA

Expert

Marcos Alves

Well-Known Member

Similar Threads

B4J Question ABMaterial Modals

Well-Known Member

Expert

Well-Known Member

Well-Known Member

Expert

Well-Known Member

Well-Known Member

Expert

Well-Known Member

Expert

Well-Known Member

Expert

Well-Known Member

Similar Threads

Privacy & Transparency

Privacy & Transparency