topic Re: Weird AppHeader on chrome in Developer Q&A Forum

Weird AppHeader on chrome

Auriane — Mon, 27 Jan 2025 10:40:58 GMT

Hello,

Since a few weeks, the appHeader of my app is weird on chrome. I use the navItem

How it is on Firefox

and Chrome :

If I click on the invisible button next to the menu, the page refresh and come back to normal

Does anyone know where it comes from or how to fix it ?

Re: Weird AppHeader on chrome

imsingh — Mon, 27 Jan 2025 12:01:03 GMT

Hi Auriane

Can you share a sample code snippet so we can try to replicate?

Thanks

Indermohan Singh

Re: Weird AppHeader on chrome

Auriane — Mon, 27 Jan 2025 13:01:26 GMT

Here is the code :

<AppHeader>
<AppHeader.NavItems>
<AppHeader.AppNavLink appName="" href="/Home">
<AppHeader.AppIcon src="./assets/Microsoft_Office_Teams_Logo_256px.png" />
</AppHeader.AppNavLink>
<AppHeader.NavItem as={NavLink} to="/Home" ref={setHomeRef}>Home</AppHeader.NavItem>
<AppHeader.NavItem as={NavLink} to="/Subnet" ref={setSubnetRef}>Site overview</AppHeader.NavItem>
<AppHeader.NavItem as={NavLink} to="/TeamsHome" ref={setCallRef}>Call diagnostic</AppHeader.NavItem>

<AppHeader.NavItem as={NavLink} to="/Issues" ref={setIssueRef}>
Microsoft Issues
</AppHeader.NavItem>

<AppHeader.NavItem as={NavLink} to="/Install_Config" ref={setInstallRef}>Configuration</AppHeader.NavItem>
</AppHeader.NavItems>
</AppHeader>

Re: Weird AppHeader on chrome

imsingh — Mon, 27 Jan 2025 17:55:52 GMT

Hi Auriane

Thanks for the code snippet. I tried with the latest Strato and I can't replicate your issue. Can you also tell me the screen width and also version numbers of Strato packages?

Thanks again

Re: Weird AppHeader on chrome

Auriane — Thu, 30 Jan 2025 09:05:05 GMT

I found the problem ! Thank you for your answer, it put me on the right track

It was a dumb mistake : the appHeader was in a <Flex> with the help menu and this caused the appHeader to have a small space allocated and have a weird display.