B4J Question ABMaterial Modals

Discussion in 'B4J Questions' started by Marcos Alves, Jul 26, 2019.

  1. Marcos Alves

    Marcos Alves Active Member Licensed User

    Hi there,

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

    OliverA Expert Licensed User

  3. Marcos Alves

    Marcos Alves Active Member Licensed User

  4. Marcos Alves

    Marcos Alves Active Member Licensed User

    Hello,
    I did this:
    Code:
    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?
     
  5. OliverA

    OliverA Expert Licensed User

    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 likes this.
  6. Marcos Alves

    Marcos Alves Active Member Licensed User

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

    Marcos Alves Active Member Licensed User

    Hello,

    really didn't work... I used this code:
    Code:
    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:
    upload_2019-7-29_12-9-24.png

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

    What is wrong?
     
  8. OliverA

    OliverA Expert Licensed User

    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.
     
  9. Marcos Alves

    Marcos Alves Active Member Licensed User

    Hello @OliverA ... This is the complete code:
    Code:
    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...
     
  10. OliverA

    OliverA Expert Licensed User

    Are you loading this via page.AddModalSheetTemplate? If I try something similar to your code, it bombs out at
    Code:
    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.
    Code:
    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(1False0000"").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(
    2False0000,"").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
     
  11. Marcos Alves

    Marcos Alves Active Member Licensed User

    Hello,

    as indicated by @alwaysbusy , all Modals are being built in ConnectPage()... see:
    Code:
    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...
     
  12. OliverA

    OliverA Expert Licensed User

    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
    Code:
    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).
     
    Marcos Alves likes this.
  13. Marcos Alves

    Marcos Alves Active Member Licensed User

    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.
     
    Last edited: Jul 29, 2019
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice