Elevation Profile configuration for small screen - how to show Select Line and Draw Profile side-by-side

[AdamGebhart]

I am working on an app that will include the Elevation Profile widget in Developer 1.18.  I can get the widget configured as desired for the large and medium screen configurations.  I am not able to set it correctly on the small screen though.

I have it in the bottom sidebar while the map and everything else are in the top sidebar.

This is my medium configuration.  You can see Select Line and Draw Profile are side-by-side.

I want the small screen to look like this too if possible, but no matter what style configuration combos I come up with I can't.  Even if I am able to get them stacked and visible there is always part of the Select Line option cut off and the scroll bar on the right doesn't allow for scrolling all the way to the top.

 

I've changed the style configs for the Elevation Profile and Sidebar (bottom) about every way I can and only increasing the height of the sidebar seem to make it better, but that takes up too much screen space.

Is there a way to display them next to each other or at least get the scroll bar to work all the way?

Any help is appreciated.

[AlixVezina]

Hi @AdamGebhart ! Have you tried adding a Column to the sidebar and then placing the Elevation Profile widget into that column? A better recommendation would be to place the Elevation Profile widget inside a Widget Controller instead of using the Sidebar for the small device layout. The Widget Controller has built-in collapsible behavior when loaded on mobile.

[AdamGebhart]

Hi @AlixVezina.  Thank you for the suggestions.  I just tried moving it to the widget controller and I'm still noticing the same behavior ( the Select box is cut off and I can't scroll to the top of it).

 

I also tried inserting Elevation Profile within a Row within the (bottom) sidebar and that doesn't work either.  If the widget is aligned to the top the Select tool shows up but Draw does not, and vice versa for aligned to the bottom.  If it's aligned to the center they both only partially display.  There isn't a vertical scroll bar available.

[AdamGebhart]

@AlixVezina - I should be clear that I didn't misread your first post and mistake Row for Column.  I don't think I want to go the Column route and skipped it altogether.  I simply tried ROW as another option given the horizontal friendliness of the Elevation Profile.

[AlixVezina]

Here is a public sample app: Elevation Profile in Widget Controller

I tried previewing it on a small screen device and I cannot seem to reproduce the issue you are observing. Am I missing a step?

 

[AdamGebhart]

Thank you.  Can you tell me what style or size settings you used?  I'll make sure mine match.

And can you test your results in Firefox, Chrome and Edge?  I generally use Firefox and when I opened your public app I noticed the same behavior that led me to posting the original question.  When I open your app in Chrome and Edge the full scroll is available and the startup shows top of the EP window.  Below are what each of those look like.

Firefox > Chrome > Edge

[AdamGebhart]

I published my app to our local server and tested Safari and Chrome on two separate iPhones, then Chrome and Firefox and an Android.  Safari and Chrome both displayed the EP widget as they should across both systems.  Firefox does NOT display it correctly - the top half of the Select button/window is cut off and scrolling to the top of the EP window is not available.  Just FYI.

[AlixVezina · Accepted solution]

Oh! Nice troubleshooting work 🙂 It looks like you've found a bug in Firefox! We will get this fixed for the upcoming October update. Thank you!

[AdamGebhart]

@AlixVezina 

I'll mark your last comment as the solution.  Thanks for looking into this with me.