Edit hidden row (mobile) on HUB

[AlphonsEvers]

I have created a hub page with two rows. The first displays on screens above and including 768px (hidden-xs) and the second row displays only on screens below 768px (visible-xs).

My problem is that I can no longer access the second row to edit it.

I can't access it through regular editing options and I don't get the edit option on mobile or when I "inspect" the page and set it small enough.

I tried deleting the two text boxes in the row, but the delete feature is not available on mobile or in "inspect" mode.

Is my ask impossible or am I missing something?

Thanks.

[AlphonsEvers · Accepted solution]

I have figure out a work-around. While not ideal, it did the trick.

1. edit mode for the hub page
2. inspect the page on desktop while
3. in DevTools (Edge) go to both rows and remove the visible-xs and hidden-xs classes.
4. click edit in the previously hidden row
5. remove class.

Not pretty but it worked.

[KyleHeulitt2]

I'm having the same problem - thanks for the workaround but this is far from ideal ESRI.

I'm also noticing that resizing the screen width is bringing my hidden-xs and hidden-s items back into view for editing, which is a bit easier.

[yrpEH]

Thank you @KyleHeulitt2 and @AlphonsEvers 

[yrpEH]

Hi, 

Can I ask how you hid the row on mobile? 

I cannot find an appropriate line to add to the row CSS.

Thanks!

[KyleHeulitt2]

I used the following CSS to hide a row on extra small and small screens: hidden-xs hidden-sm

...and the following to hide a row on medium and large screens: hidden-m hidden-lg.

This way I had a row that was set up for each type of screen.

[KyleHeulitt2]

From https://getbootstrap.com/docs/3.4/css/

[AlphonsEvers]

Hi yrpEH,

I added my code to the Row CSS Class input when editing the row.

For this to work the way I used it, you need a mobile version of the row and a duplicate version for all other screen sizes.

The mobile version of the row has visible-xs class and the other version used the hidden-xs class

HTH