B4J Question [ABMaterial] How to disable scrollbars in ABMModal?

[Mashiane]

Hi there

I have an issue with my ABMModal Sheet, I need to completely disable the scrollbars as these show up.

This is my builder code...

Private Sub BuildModalSheetmsTimeSheets() As ABMModalSheet
    Dim msTimeSheets As ABMModalSheet
    msTimeSheets.Initialize(page, "msTimeSheets", True, ABM.MODALSHEET_TYPE_NORMAL, "")
    msTimeSheets.Size = ABM.MODALSHEET_SIZE_NORMAL
    msTimeSheets.IsDismissible = False
    msTimeSheets.IsTextSelectable = True
    msTimeSheets.Footer.AddRows(1, False, "").AddCellsOS(1, 0, 0, 0, 12, 12, 12, "")
    msTimeSheets.Header.AddRows(1, False, "").AddCellsOS(1, 0, 0, 0, 12, 12, 12, "")
    msTimeSheets.Content.AddRows(5, False, "").AddCellsOS(1, 0, 0, 0, 12, 12, 12, "")
    msTimeSheets.Header.BuildGrid  'IMPORTANT once you loaded the complete grid AND before you start adding components
    msTimeSheets.Content.BuildGrid 'IMPORTANT once you loaded the complete grid AND before you start adding components
    msTimeSheets.Footer.BuildGrid  'IMPORTANT once you loaded the complete grid AND before you start adding components
    'Add components to ModalSheet
    Dim txtTimeSheetsDeliverable As ABMInput
    txtTimeSheetsDeliverable.Initialize(page, "txtTimeSheetsDeliverable", ABM.INPUT_TEXT, "Deliverable", False, "")
    msTimeSheets.Content.Cell(2,1).AddComponent(txtTimeSheetsDeliverable)
    Dim dpTimeSheetsDateWorked As ABMDateTimePicker
    Dim dpTimeSheetsDateWorkedDate As Long = DateTime.Now
    dpTimeSheetsDateWorked.Initialize(page, "dpTimeSheetsDateWorked", ABM.DATETIMEPICKER_TYPE_DATE, dpTimeSheetsDateWorkedDate, "Date", "")
    dpTimeSheetsDateWorked.WeekText = "Week"
    dpTimeSheetsDateWorked.TodayText = "Today"
    dpTimeSheetsDateWorked.ReturnDateFormat = "YYYY-MM-DD"
    dpTimeSheetsDateWorked.ReturnTimeFormat = ""
    dpTimeSheetsDateWorked.Language = "en"
    dpTimeSheetsDateWorked.FirstDayOfWeek = ABM.FIRSTDAYOFWEEK_SUNDAY
    dpTimeSheetsDateWorked.PickText = "OK"
    dpTimeSheetsDateWorked.CancelText = "Back"
    msTimeSheets.Content.Cell(2,1).AddComponent(dpTimeSheetsDateWorked)
    Dim dpTimeSheetsStartTime As ABMDateTimePicker
    Dim dpTimeSheetsStartTimeDate As Long = DateTime.Now
    dpTimeSheetsStartTime.Initialize(page, "dpTimeSheetsStartTime", ABM.DATETIMEPICKER_TYPE_TIME, dpTimeSheetsStartTimeDate, "Start Time", "")
    dpTimeSheetsStartTime.WeekText = "Week"
    dpTimeSheetsStartTime.TodayText = "Today"
    dpTimeSheetsStartTime.ReturnDateFormat = ""
    dpTimeSheetsStartTime.ReturnTimeFormat = "HH:mm"
    dpTimeSheetsStartTime.Language = "en"
    dpTimeSheetsStartTime.FirstDayOfWeek = ABM.FIRSTDAYOFWEEK_SUNDAY
    dpTimeSheetsStartTime.PickText = "OK"
    dpTimeSheetsStartTime.CancelText = "Back"
    msTimeSheets.Content.Cell(2,1).AddComponent(dpTimeSheetsStartTime)
    Dim dpTimeSheetsEndTime As ABMDateTimePicker
    Dim dpTimeSheetsEndTimeDate As Long = DateTime.Now
    dpTimeSheetsEndTime.Initialize(page, "dpTimeSheetsEndTime", ABM.DATETIMEPICKER_TYPE_TIME, dpTimeSheetsEndTimeDate, "End Time", "")
    dpTimeSheetsEndTime.WeekText = "Week"
    dpTimeSheetsEndTime.TodayText = "Today"
    dpTimeSheetsEndTime.ReturnDateFormat = ""
    dpTimeSheetsEndTime.ReturnTimeFormat = "HH:mm"
    dpTimeSheetsEndTime.Language = "en"
    dpTimeSheetsEndTime.FirstDayOfWeek = ABM.FIRSTDAYOFWEEK_SUNDAY
    dpTimeSheetsEndTime.PickText = "OK"
    dpTimeSheetsEndTime.CancelText = "Back"
    msTimeSheets.Content.Cell(2,1).AddComponent(dpTimeSheetsEndTime)
    Dim dpTimeSheetsHoursWorked As ABMDateTimePicker
    Dim dpTimeSheetsHoursWorkedDate As Long = DateTime.Now
    dpTimeSheetsHoursWorked.Initialize(page, "dpTimeSheetsHoursWorked", ABM.DATETIMEPICKER_TYPE_TIME, dpTimeSheetsHoursWorkedDate, "Hours Worked", "")
    dpTimeSheetsHoursWorked.WeekText = "Week"
    dpTimeSheetsHoursWorked.TodayText = "Today"
    dpTimeSheetsHoursWorked.ReturnDateFormat = ""
    dpTimeSheetsHoursWorked.ReturnTimeFormat = "HH:mm"
    dpTimeSheetsHoursWorked.Language = "en"
    dpTimeSheetsHoursWorked.FirstDayOfWeek = ABM.FIRSTDAYOFWEEK_SUNDAY
    dpTimeSheetsHoursWorked.PickText = "OK"
    dpTimeSheetsHoursWorked.CancelText = "Back"
    msTimeSheets.Content.Cell(2,1).AddComponent(dpTimeSheetsHoursWorked)
    Dim txtTimeSheetsComments As ABMInput
    txtTimeSheetsComments.Initialize(page, "txtTimeSheetsComments", ABM.INPUT_TEXT, "Comments", True, "")
    msTimeSheets.Content.Cell(2,1).AddComponent(txtTimeSheetsComments)
    Dim lblTimeSheets As ABMLabel
    lblTimeSheets.Initialize(page, "lblTimeSheets", "{NBSP}Add / Edit TimeSheets", ABM.SIZE_H5, False, "whitefc")
    msTimeSheets.Header.Cell(1,1).AddComponent(lblTimeSheets)
    Dim btnApplyTimeSheets As ABMButton
    btnApplyTimeSheets.InitializeFlat(page, "btnApplyTimeSheets", "", "", "Apply", "transparent")
    btnApplyTimeSheets.Size = ABM.BUTTONSIZE_NORMAL
    msTimeSheets.Footer.Cell(1,1).AddComponent(btnApplyTimeSheets)
    Dim btnCancelTimeSheets As ABMButton
    btnCancelTimeSheets.InitializeFlat(page, "btnCancelTimeSheets", "", "", "Cancel", "transparent")
    btnCancelTimeSheets.Size = ABM.BUTTONSIZE_NORMAL
    msTimeSheets.Footer.Cell(1,1).AddComponent(btnCancelTimeSheets)
    Return msTimeSheets
End Sub

And this renders like this on the page...

I need to remove the scrollbars on the right, or perhaps just the inner scrollbar.

Please advise.

 

[Mashiane]

This is strange, just noted something, I have added the "Apply" and "Cancel" buttons to the footer, these appear in the opposite sequence and in capital letters, is this a design issue???

 

[mindful]

This is strange, just noted something, I have added the "Apply" and "Cancel" buttons to the footer, these appear in the opposite sequence and in capital letters, is this a design issue???

Buttons use only capital letters

Note that you can add a row with multiple cells and add the apply to one cell and the cancel button to another cell .. if they are aligned in the right you can create a cell theme where you specify the alignment to be on the left...

 

[Mashiane]

Buttons use only capital letters

Note that you can add a row with multiple cells and add the apply to one cell and the cancel button to another cell .. if they are aligned in the right you can create a cell theme where you specify the alignment to be on the left...

Nah, its ok, time pressures are against such little cosmetics. Thanks anyway, I just need to fix the scrollbars, hopefully something will come up.

 

[mindful]

Nah, its ok, time pressures are against such little cosmetics. Thanks anyway, I just need to fix the scrollbars, hopefully something will come up.

You need to add the footer row with AddRowsM

    ' create the grid for the footer
    ' we add a row without the default 20px padding so we need to use AddRowsM().
    myModal.Footer.AddRowsM(1,True,0,0, "").AddCellsOS(1,9,9,9,3,3,3,"")

Code from Demo project provided with the library.

 

[Mashiane]

You need to add the footer row with AddRowsM

    ' create the grid for the footer
    ' we add a row without the default 20px padding so we need to use AddRowsM().
    myModal.Footer.AddRowsM(1,True,0,0, "").AddCellsOS(1,9,9,9,3,3,3,"")

Code from Demo project provided with the library.

I'm not really sure what your grid code above purports to solve, my current code for my modal sheet grid is...

 msTimeSheets.Footer.AddRows(1, False, "").AddCellsOS(1, 0, 0, 0, 12, 12, 12, "")
    msTimeSheets.Header.AddRows(1, False, "").AddCellsOS(1, 0, 0, 0, 12, 12, 12, "")
    msTimeSheets.Content.AddRows(5, False, "").AddCellsOS(1, 0, 0, 0, 12, 12, 12, "")

I have replaced my footer grid code with yours and there is no difference to the look of the footer in the modal page, its still the same CANCEL APPLY right aligned as per image above and i'm still getting the scroll bars. Dont worry @mindful , if it does not have a solution I will just move along with other things, it's just a cosmetic and Im more concerned with the functionality for now. Thanks

 

[alwaysbusy]

Normal behaviour for the buttons. They are in css aligned right, so they are reversed. Simple switch them in your code.

It has also a header, so you have to use the AddRowM() for the header too. Your generator tool has a serious flaw if it only knows the AddRows() and AddCellsOS() commands. It really should make better use of the estate it has available on the screen too (e.g. start/end time can easily fit next to each other, only on phones it should be like it is now).

The inner bar height is wrong because it only takes the bottom bar into account, so that needs to be changed in the Materialize CSS (by me) as the original Materialze CSS does not have headers (this is an ABMaterial feature you requested I think).

 

[mindful]

@Mashiane I gave you piece of code from demo project where AB creates a modal sheet with fixed footer which creates no scrollbars ... so you need to be using AddRowsM and provide 0 for margin top and bottom and I think the header row needs to be added the same (with 0 margin top and bottom) as it the same as the footer only it's at the top. I say I think, for the header row, because I haven't used it as it has been added later in the framework.

The code from the previous post was never meant to be a replacement/problem-solver code for your situation, it was an example of how you should be using AddRowsM ...

 

[Mashiane]

Normal behaviour for the buttons. They are in css aligned right, so they are reversed. Simple switch them in your code.

It has also a header, so you have to use the AddRowM() for the header too. Your generator tool has a serious flaw if it only knows the AddRows() and AddCellsOS() commands. It really should make better use of the estate it has available on the screen too (e.g. start/end time can easily fit next to each other, only on phones it should be like it is now).

The inner bar height is wrong because it only takes the bottom bar into account, so that needs to be changed in the Materialize CSS (by me) as the original Materialze CSS does not have headers (this is an ABMaterial feature you requested I think).

Thanks @alwaysbusy : Now I know about the footer issues, that got me confused a big deal as I thought I was doing something wrong, it's a design built in feature!! That solves it then.

Thanks again @mindful, I should have picked up that your piece of code was referring to the scroll bars, I have gone to the demo example and the entirety of the comment reads...

' we add a row without the default 20px padding so we need to use AddRowsM().  If we do not use this method, a scrollbar will appear to the sheet.

So that's why I was not clear as to what you were trying to solve for me, if that last part about the scroll bars was there, would have been easy peasy.

Guys, I appreciate the effort you took to help me here. I have used AddRowsM for all three, content, header and footer, all is good.

PS: I just started exploring ABMModalSheets and ABMTable for a real world app, so its kinda painful at the moment. The issue about my generator on this matter was solved here (RowsMethods and CellsMethods). Like you said, if I should rephrase it, one needs to understand how the whole ABMaterial framework works to make sense of it.

Really, a generator is pointless if you don't know how and what you are trying to achieve! You warned me about that. Now that I'm learning how to use each of these components in real world situations, I am appreciating more of what my generator is able to do, so far. Perfectly so, tomorrow I'm presenting to a client.

 

[Harris]

Thanks @alwaysbusy : Now I know about the footer issues, that got me confused a big deal as I thought I was doing something wrong, it's a design built in feature!! That solves it then.

Thanks again @mindful, I should have picked up that your piece of code was referring to the scroll bars, I have gone to the demo example and the entirety of the comment reads...

' we add a row without the default 20px padding so we need to use AddRowsM().  If we do not use this method, a scrollbar will appear to the sheet.

So that's why I was not clear as to what you were trying to solve for me, if that last part about the scroll bars was there, would have been easy peasy.

Guys, I appreciate the effort you took to help me here. I have used AddRowsM for all three, content, header and footer, all is good.

PS: I just started exploring ABMModalSheets and ABMTable for a real world app, so its kinda painful at the moment. The issue about my generator on this matter was solved here (RowsMethods and CellsMethods). Like you said, if I should rephrase it, one needs to understand how the whole ABMaterial framework works to make sense of it.

Really, a generator is pointless if you don't know how and what you are trying to achieve! You warned me about that. Now that I'm learning how to use each of these components in real world situations, I am appreciating more of what my generator is able to do, so far. Perfectly so, tomorrow I'm presenting to a client.

View attachment 53098

2 cents worth....

My only comment is you could make this modal sheet much smaller by using two cells per row.
That is much trailing line for one small value.

Date and Hours Worked on one row.
Start Time and End Time on another row.
And Comments as one cell (12) on last row.

It would even look good on a phone...

 

[Mashiane]

@Harris, thanks, will play around... that makes perfect sense.