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

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.

Find more posts tagged with

Accepted answers

AlphonsEvers

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

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

Not pretty but it worked.

All comments

DonavanSnow

Does anyone have an actual example of what the input into AGO looks like?

DonavanSnow

Why would you comment on using the row class CSS then post an example image with nothing in it? Dont you think it would have made sense to show the example? This is not helpful.

Just advice for next time if you want to create helpful discussion.

Thanks!

yrpEH

Thank you @KyleHeulitt2 and @AlphonsEvers

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

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.

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'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.

AlphonsEvers

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

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

Not pretty but it worked.

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.