B4J Question [ABMaterial] NavigationBar Title not responsive, overlapped

[Anser]

Hi,

I found that the text on the NavigationBar is not responsive ie when I change the browser's size from desktop size to a Mobile's size, the NavigationBar Title is getting mixed with the burger menu. May be I am doing something wrong

Here is the picture of what I am trying to explain
Desktop Size

Resized to a Mobile. (The title is overlapped with the BurgerMenu)

Here is how I have coded

Public Sub BuildPage()

    ...
    ABMShared.BuildNavigationBar(page, "My HomePage",Null, "", "", "")
    ...
    
End Sub

Here is the code for BuildNavigationBar in ABMShared. I have not changed anything, it is the one that comes with the ABM Template.

Sub BuildNavigationBar(page As ABMPage, Title As String, logo As String, ActiveTopReturnName As String, ActiveSideReturnName As String, ActiveSideSubReturnName As String)     'ignore   
    ' we have to make an ABMImage from our logo url
    Dim sbtopimg As ABMImage
    sbtopimg.Initialize(page, "sbtopimg", logo, 1)
'    sbtopimg.SetFixedSize(236, 49)   

    page.NavigationBar.Initialize(page, "nav1", ABM.SIDEBAR_MANUAL_ALWAYSHIDE, Title, True, True, 330, 48, sbtopimg, ABM.COLLAPSE_ACCORDION, "nav1theme")
    page.NavigationBar.IsTextSelectable = False
    page.NavigationBar.SideBarSubItemsArrowAlignRight = True
'    page.NavigationBar.UseAlternativeScrollBar(ABM.COLOR_TEAL, ABM.INTENSITY_DARKEN2, 1.0)
    
    page.NavigationBar.TopBarDropDownConstrainWidth = False
    page.NavigationBar.ActiveTopReturnName = ActiveTopReturnName
    page.NavigationBar.ActiveSideReturnName = ActiveSideReturnName
    page.NavigationBar.ActiveSideSubReturnName = ActiveSideSubReturnName

    
    ' you must add at least ONE dummy item if you want to add items to the topbar    in ConnectNaviagationBar
    page.NavigationBar.AddTopItem("DUMMY", "{NBSP}", "", "", False)
    
    ' you must add at least ONE dummy item if you want to add items to the sidebar   
    page.NavigationBar.AddSideBarItem("DUMMY", "{NBSP}", "", "")

End Sub

I would also like to know that whether it is possible to control the text size of the title displayed on the NavigationBar

Thanks

 

[Anser]

Noticed one more behavior. Each time I switch between desktop size and mobile size, the left edge of the Title is getting vanished.
Here are the pictures. Please notice the left edge of the title "HomePage"

First time

Second time

Third time

Fourth time

Regards

 

[alwaysbusy]

Which version of ABM? Can you make a small project that reproduces this problem as I don’t seem to be able to. You can base it on the template project.

 

[Anser]

Which version of ABM? Can you make a small project that reproduces this problem as I don’t seem to be able to. You can base it on the template project.

Hi,

I identified that this problem occurs when we use ABM.SIDEBAR_MANUAL_ALWAYSHIDE in the Sub BuildNavigationBar()
For eg

'page.NavigationBar.Initialize(page, "nav1", ABM.SIDEBAR_MANUAL_HIDEMEDIUMSMALL, Title, True, True, 330, 48, sbtopimg, ABM.COLLAPSE_ACCORDION, "nav1theme")
'The following line is the problem creator ie ABM.SIDEBAR_MANUAL_ALWAYSHIDE
page.NavigationBar.Initialize(page, "nav1", ABM.SIDEBAR_MANUAL_ALWAYSHIDE, Title, True, True, 330, 48, sbtopimg, ABM.COLLAPSE_ACCORDION, "nav1theme")

I need to use ABM.SIDEBAR_MANUAL_ALWAYSHIDE, because I do not want to waste the screen area by always displaying a menu on the left hand side of the screen. The menu should be shown ONLY when the user wants to see it ie when the user clicks on the burger menu.

I am herewith sharing a sample project that reproduce this behavior. As per your advice, this sample is based on the template project from ABM ver 4.25

https://wetransfer.com/downloads/7e...5f00a078d4b03b356e6dca6820180507061244/f5264c

Regards

 

[alwaysbusy]

Thanks for the test project! Makes it a lot easier for me to find out what goes wrong I'll check it out today and report back.

 

[alwaysbusy]

This is indeed a bug. Will be fixed in the next update. The reason is a miscalculation of the width of the label if no topitem is used.

as a temporary workaround, if you add this in the ConnectNavigationBar, it should work:

page.NavigationBar.AddTopItem("DUMMY", "", "ThisIconDoesNotExistSoNothingIsVisible", "", ABM.VISIBILITY_ALL)

 

[Anser]

The temporary work around DOES NOT RESOLVE the issue.

 

[Anser]

When I add this ie "ThisIconDoesNotExistSoNothingIsVisible" in the page.NavigationBar.AddTopItem ie

page.NavigationBar.AddTopItem("DUMMY", "", "ThisIconDoesNotExistSoNothingIsVisible", "", ABM.VISIBILITY_ALL)

Then an alphabet 'T' is displayed on the NavigationBar. Wondering, from where this is coming from

 

[alwaysbusy]

Wondering, from where this is coming from

no idea! Looks like maybe the capital T of "This..." may be causing it? try:

page.NavigationBar.AddTopItem("DUMMY", "", "doesnotexist", "", ABM.VISIBILITY_ALL)

 

[Anser]

Looks like maybe the capital T of "This..." may be causing it

Yes. You are right.

 

[Anser]

Any other work around for this issue ?

 

[Anser]

In the ABM feedback application, I have reported this issue. Case no : 761

The issue becomes a major problem when the application is displayed on a Mobile phone screen. Every time a Modal Dialog is opened and closed, the Navigationbar Title move towards the left and then overlaps the burger menu.