Hi there,
is there any way to fix a modal header in ABMaterial? I mean, maintain the scroll bar only in the content area?
is there any way to fix a modal header in ABMaterial? I mean, maintain the scroll bar only in the content area?
-
Welcome to B4X forum!
B4X is a set of simple and powerful cross platform RAD tools:
- B4A (free) - Android development
- B4J (free) - Desktop and Server development
- B4i - iOS development
- B4R (free) - Arduino, ESP8266 and ESP32 development
B4J Question ABMaterial Modals
- Thread starter Marcos Alves
- Start date
- Similar Threads Similar Threads
Zero out the padding of your footer and header. See https://www.b4x.com/android/forum/threads/abmaterial-modalsheet-scrollbar-issue.88870/
Upvote
0
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?
Upvote
0
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.
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.
Upvote
0
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?
Upvote
0
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 MyModalAs 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...
Upvote
0
Are you loading this via page.AddModalSheetTemplate? If I try something similar to your code, it bombs out at
with
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:
MyModal.Header.Row(1).Refreshwhich 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
Upvote
0
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...
Upvote
0
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
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.
B4X:
MyModal.Content.Cell(1,1).AddComponent(tabsAddUser)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).
Upvote
0
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:
Upvote
0
Similar Threads
