is it possible to have different header arrangements Desktop / Tablet / Mobile ?

865
5
Jump to solution
09-22-2022 12:21 AM
Labels (1)
CP_Leipzig
New Contributor II

Hello,
is it possible to have different header arrangements Desktop / Tablet / Mobile ?

Currently everything always shifts the same.
However, I want a space-saving header in the tablet / mobile variant, but if I move or delete something there (for example, text or buttons) is also adopted in the desktop variant. (except widgets)

Desktop VarianteDesktop Variante

 

Tablet / Mobile VarianteTablet / Mobile Variante

 

0 Kudos
1 Solution

Accepted Solutions
ThomasCoughlin
Esri Contributor

The Foldable theme includes a premade header that isn't an "actual" header. It's made out of a Fixed Panel widget at the top of the canvas.

So, you can switch the canvas to automatic and adjust the contents of the fixed panel for smaller screens. 

(You could also turn on the "actual" header and move all your header widgets there. Then you'll see the header's custom option.)

For tips about optimizing for different screen sizes I recommend this presentation from one of our Developer Summits. The main tools you'll use are size and position settings and the pending list.

View solution in original post

5 Replies
ShengdiZhang
Esri Regular Contributor

Hi @CP_Leipzig ,

If you disable live view and lock layout, you can enable a Custom layout for header at different screen sizes.

ShengdiZhang_0-1663832815415.png

Regards,

Shengdi

0 Kudos
CP_Leipzig
New Contributor II

i have only the option "widgets" automatic or custom?

widget options.JPG

0 Kudos
ShengdiZhang
Esri Regular Contributor

If you only see one Auto/Custom, it is because you don't have the Header enabled.

ShengdiZhang_0-1663836983645.png

So, enabling custom means having a custom layout for body, but the result will be the same.

0 Kudos
CP_Leipzig
New Contributor II

this option is not available in Foldable theme!

0 Kudos
ThomasCoughlin
Esri Contributor

The Foldable theme includes a premade header that isn't an "actual" header. It's made out of a Fixed Panel widget at the top of the canvas.

So, you can switch the canvas to automatic and adjust the contents of the fixed panel for smaller screens. 

(You could also turn on the "actual" header and move all your header widgets there. Then you'll see the header's custom option.)

For tips about optimizing for different screen sizes I recommend this presentation from one of our Developer Summits. The main tools you'll use are size and position settings and the pending list.