nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

ArcGIS Web Application pop up does not show

e_cat

A user is currently having issues when viewing a pop up in a web application, although it seems to be working OK with other users. The pop up is coming up in a different format with no attributes showing and when expanding, it won't allow them to scroll.

They are using an up to date version of Chrome and pop up's are enabled, but it happens when clicking on any layer in the web application, even when they're shared to the whole organisation.

Encontre mais publicações marcadas com

Accepted answers

JohannesLindner

That's the style for popups on mobile devices. It also appears on PC if the Browser window is small. Try maximizing the Chrome window.

All comments

JohannesLindner

That's the style for popups on mobile devices. It also appears on PC if the Browser window is small. Try maximizing the Chrome window.

e_cat

Just tried it on mine and that's the cause, so simple! Thank you

MikeVolz

I've seen this myself many times in web apps and had no idea of the root cause of the issue. Do you know if there is any ESRI documentation that explains this phenomenon?

JohannesLindner

Only thing I can find right now:

https://developers.arcgis.com/web-appbuilder/guide/xt-app-url-parameters-for-dev.htm#ESRI_SECTION1_01F86DEC2181416888D44A32D3096887

The app supports two styles of layout based on the screen size. One is for desktop and one is for mobile devices. When either the height or width of a screen display is less than 600 pixels, the mobile layout is applied automatically. However, this may result in unexpected behavior when the app is embedded in a website. For example, the pop-up in the website changes to the mobile layout style. To control the layout style, use mobileBreakPoint=<pixel number>. For example, you can remain in desktop style until the screen size is less than 300 pixels, as shown below:
https://<your app>/?mobileBreakPoint=300

Kara_Lara

I also see this issue w/ very large screens as well, such as big screen TVs in conference rooms... which is odd... there's more than enough space obviously.

@JohannesLindner any ideas where all I need to look to make this modification? I found some code in the main.js file, but not sure if there's additional areas that breakpoints need to be specified. Thanks!

CseeDubs

This was happening on our office's TV/Smartboards turned computer screens. I found one workaround, which involved clicking in the white area of the pop-up (to activate it) and pressing the tab key to get it to "travel" to the bottom of the pop-up. Luckily, while I was working on this workaround, a guy from our IT Dept was setting up my printer and offered to help me find a better workaround! This is a rare occurrence, so I took him up on his offer and he delivered!

To fix: Click on the browser window (to make it active). I used Chrome and Firefox with the same results. Once browser window is active, use ctrl and + or - to zoom in and/or out. You can also zoom out using the browser settings or ctr plus mouse scroll. I found 80% zoom will bring the pop-ups back to normal (the way they are supposed to look) on my TV Screen (turned computer monitor) but you may have to go lower depending on the size of your screen; test it out to see. As long as your browser is zoomed out, you should have no problems with scrolling in the pop-ups. If you zoom the browser window back in to 100%, the pop-ups go back to the huge white screen that is not scrolling. Just found out If I hide the top bars in Firefox and keep zoom level to 100% the pop-ups still work the same. Play around and find what works for your setup!

IanNuttall

Thank you for sharing this! We were having issues with popups not displaying correctly on our conference room TV screen and zooming out to 80% was the solution. May you have a good day.

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.