B4J Question [ABMaterial] NavigationBar Title not responsive, overlapped

A

Anser

Well-Known Member
Licensed User
Longtime User
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
B4X: 
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.
B4X: 
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
 
Sort by date Sort by votes
A

Anser

Well-Known Member
Licensed User
Longtime User
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
 
Upvote 0
A

Anser

Well-Known Member
Licensed User
Longtime User
alwaysbusy said:
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.
Click to expand...
Hi,

I identified that this problem occurs when we use ABM.SIDEBAR_MANUAL_ALWAYSHIDE in the Sub BuildNavigationBar()
For eg
B4X: 
'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
 
Upvote 0

alwaysbusy

Expert
Licensed User
Longtime User
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:
B4X: 
page.NavigationBar.AddTopItem("DUMMY", "", "ThisIconDoesNotExistSoNothingIsVisible", "", ABM.VISIBILITY_ALL)
 
Upvote 0
A

Anser

Well-Known Member
Licensed User
Longtime User


The temporary work around DOES NOT RESOLVE the issue.
 
Last edited:
Upvote 0
A

Anser

Well-Known Member
Licensed User
Longtime User
When I add this ie "ThisIconDoesNotExistSoNothingIsVisible" in the page.NavigationBar.AddTopItem ie
B4X: 
page.NavigationBar.AddTopItem("DUMMY", "", "ThisIconDoesNotExistSoNothingIsVisible", "", ABM.VISIBILITY_ALL)

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

Anser

Well-Known Member
Licensed User
Longtime User
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.
 
Upvote 0
You must log in or register to reply here.

Similar Threads

  • Question
B4J Question [ABMaterial] NavigationBar.Title - dynamic change
Replies
0
Views
804
peacemaker
  • Question
B4J Question [ABMaterial] how to change / set "top" of NavigationBar? [solved]
Replies
3
Views
1K
alwaysbusy
  • Question
B4J Question [ABMaterial] NavigationBar Title Align
Replies
5
Views
1K
Cableguy
  • Question
B4J Question [ABMaterial] Capturing hover on a NavigationBar.topItem
Replies
4
Views
1K
Cableguy
  • Question
B4J Question [ABMaterial] NavigationBar crowding and overlap
Replies
2
Views
1K
stanmiller
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…