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; } } }

Header Fixed Panel content inconsistent between laptop screen and external monitor.

sgambrel_Bouldercounty

I'm having a lot of trouble getting my EB App to look decent between an external monitor and a laptop screen. I expect almost no usage on tablet or phone - most users will access via laptop, and a significant enough number to access via desktop / external monitor that it needs to look good as well.

But unfortunately it looks bad everywhere.

The primary problem is the content at the top of the page. It's appearance is VERY inconsistent between the editor, an external monitor, and a laptop screen. Sometimes the content is spread out (and mis-sized and misaligned) and sometimes it is squished. See below for screenshots & URL.

Some notes:
- All of my widgets are set to percentages instead of pixels, they are set to align vertical center, I've tried both locked and unlocked size & position.

- I've played with the anchor point but not gotten any consistent results. But maybe need totry more?

- This content is not in a "page header", but in the "Header Fixed Panel" (mostly because I coulden't figure out how to get some of the content into the page header). Is that the problem, and if so, how do I move content / widgets into the page header from hte header fixed panel?

- If I make the Header Fixed Panel absurdly large (like 20%) the problem goes away on the laptop, but looks absolutely dumb on an external monitor. No good.

Any thoughts on what I'm doing wrong or something else to try??

In the editor window:

Preview mode on my desktop monitor, note misalignment:

Preview mode on my laptop, note squish / cutoff:

URL: https://arcg.is/1vGaTu0

Find more posts tagged with

ArcGIS Online

Accepted answers

ShengdiZhang

Hi @sgambrel_Bouldercounty ,

I've created a sample template for this header layout. Sample template You can click the "Create Web Experience" button to generate an app from the template.

If you need to display your text and images at multiple resolutions, I recommend using pixel units (px) for both heights and widths (or set them to auto), and for positions as well.

It doesn't matter whether you place your header inside a "page header" or not. Using a header allows the widgets to be easily reused on other pages if needed.

Besides, for the list widgets below the header, I suggest using a column widget to hold the title text and list. This will ensure the elements are stacked vertically.

Let me know if have any other questions.

Shengdi

All comments

JonathanMcD

EB can per a pernickety thing, especially regarding sizing etc.. Not sure how much this will help your current situation, but maybe a pointer for the future.

When I start building I always choose the smallest scales for each of the device types, gives me the confidence that regardless of device, it'll work across all ranges. Also means that I'm not having to "de-scale" to fit once happy with a build. Learnt this pretty quickly creating Exps during covid responses - things can look great on a 4k monitor, but you get a shock when you see it at 1080 or 1200.

Also, when designing consider that a mobile/laptop user won't need or be able to use/view the same information/ functionality compared with a desktop user. Full header for desktop, pared back header for mobile shifting about/help/credits to the bottom or split between header and footer. Your current panel can be two completely different items depending on device.

Finally, depending on the laptop and user resolution, it's sometimes advisable to design an experience for laptops same as a tablet view.

One of the most important tools/settings in EB - use right at the start of building - set for each device type and design across the three. This is what's missing in your design.

Don't stress too much @sgambrel_Bouldercounty once you crack it, it'll all become clear.

ShengdiZhang

Hi @sgambrel_Bouldercounty ,

I've created a sample template for this header layout. Sample template You can click the "Create Web Experience" button to generate an app from the template.

If you need to display your text and images at multiple resolutions, I recommend using pixel units (px) for both heights and widths (or set them to auto), and for positions as well.

It doesn't matter whether you place your header inside a "page header" or not. Using a header allows the widgets to be easily reused on other pages if needed.

Besides, for the list widgets below the header, I suggest using a column widget to hold the title text and list. This will ensure the elements are stacked vertically.

Let me know if have any other questions.

Shengdi

sgambrel_Bouldercounty

Hi Shengdi, Thanks for the input - you helped me solve the problem! The fix was to to set the Size & Position to AUTO for each element - I hadn't noticed that setting before. This seems to have fixed the problem. Still looks very slightly wonky between the two sizes but it's 100% acceptable... And maybe I can dial it in a little better with some tinkering. Thank you!!

Unfortuantely I cannot check out the Sample Template as it appears to only be shared with your organization. But I think I'm all set!

sgambrel_Bouldercounty

Hi Jonathan,

Actually I'd been building this with the 1280 x 800 toggle set, for exactly the reasons you mentioned, so that wasn't the issue. BUT! the problem has been solved - I had not set the size & position setting of the various elements to Auto, which seems to be all it took. Apparently I overlooked that option in design and searching the documentation.

I did not realize that functionality could be tailored for each device type (screen / table / phone) - I thought that was just a toggle for viewing. For this app, I predict 95% of users will be using a laptop or desktop, since this is primarily for users in an office / professional setting. Maybe 5% will attempt with other devices, but then hopefully will move to a laptop/desktop when they realize the app is essentially illegible on a phone or tablet.

JonathanMcD

Hi, just a wee note on this, I was suggesting that you create to the base size of 1024x768, so minimum value resolution of each device type - it was by default the 1280x800 was chosen as I took the screen shot.

I always design to 1024x768, 601x962, and 360x340.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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