Options for horizontal scrolling buttons? Request for tweaks to existing interface options

[MatthewBertrand]

Hi there,

I'm trying to find a quality responsive option in the phone view for Experience Builder to create functionality similar to the All Trails application, which has a row that is scrollable with buttons for key activity levels. There are something like 10 buttons that spill off the page, but you can drag right/left to see the button options.

I've tried both the Views Navigation and Widget Controller options. See below for specific issues with both widgets, with requests for simple tweaks to make them more functional.

Is there another widget / strategy / setting that I am missing to achieve my goal?

VIEW NAVIGATION

• The button layout looks great, but when you add more views than the screen can accommodate, the buttons spill off the page and disappear.
• Am I missing an option to scroll right/left to see the buttons? I know there are other styles for views navigation that allow for right left scrolling, BUT they obscure the names of each view, just showing arrows or dots.

Image below shows buttons spilling off the screen, lost forever.

WIDGET CONTROLLER

• The widget controller has a good look when I add button widgets. I like the scroll options available when there are too many widgets to fit on a screen
• BUT: the functionality is FUNKY for the button widget. The user clicks the button widget, and then... the button appears, and the user has to click it again.
• For the button widget, it would be great if clicking the button would just... click the button.

Image below looks nice! Next image shows funky button action.

Funky button action! When I click on the button, I just... see the button. And have to click on it again. It'd be nice if clicking the button just triggered the button without having to click it twice.

[JeffreyThompson2]

It took me awhile to figure out your problem because the Views Navigation Widget should automatically give you left/right arrows when there are too many Views. I think I figured it out. It looks like when you add a Views Navigation Widget now (maybe new behavior at the last update?), it starts with the Width set to Auto and assumes you have enough space for all the Views. If you set the Width to something else, you should get the arrow buttons to appear.

You probably want to use Full Width in your application.

[MatthewBertrand]

Thank you Jeffrey! You beat me to it. I just noticed that in my tablet view that a left-right arrow appears for the Views Navigation buttons just as I had been hoping for.

I'm thinking I might have hit a bug (my second of the day!). In my phone view, using the same Views Navigation widget, no amount of tinkering with the layout is making the navigation arrows appear. 

I guess I'll try reconstructing the Views Navigation widget to see if a new one works.

SCREENSHOT OF TABLET MODE

PHONE VIEW, NO ARROWS

I've tried auto, stretch, and a variety of custom % for the width

[MatthewBertrand]

OK, I think I have resolved the issue. Creating new Views Navigations I still couldn't get navigation arrows to appear. So I tried testing the draft on an actual phone to see if the issue is with the phone simulator, and... it was! On an actual phone there are no arrows, BUT you can still scroll right and left, achieving my desired functionality.

Thanks again Jeffrey. You inspired me to persevere.  🙂

Matthew Bertrand
Park Planner
Washtenaw County Parks and Recreation

[JeffreyThompson2]

@MatthewBertrand Yes, the issue does appear to be limited to the Phone Size screen. Even if it is functional, it's still not great design. How is the user supposed to know to know to scroll if they can't see any indication that there is something to scroll to? I don't know if this is a programing mistake or an intentional design choice, but I'm tagging a developer so they take a look at this post. @TonghuiMing