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

one tab in shortlist

Pía_ZenaidaVirginia

Hi, I have a shortlist width one layer, so no tab appears on the shortlist, but I want to see one tab that refer to sites of the layer.
How can I do this? What file and line of code I have to modify? This an example of what I want.

http://www.graphtech-gis.com/webapp/carthagehistory/

Thanks for help

Virginia

Find more posts tagged with

Accepted answers

RupertEssinger

Hi Virginia

Before I reply I want to make sure readers have seen your excellent 'Catálogo de Colectivas de Arte Indígena de la Cuenca del Río Caura' Shortlist, a really nice customization with very detailed content: http://www.drivehq.com/file/df.aspx/publish/vbehm/wwwshortlist/index.html. Bravo!

Like you say, we automatically hide the single tab control in the Shortlist now if there is only one category of places. We think it looks much cleaner. Are you sure you need to put it back? For example, won't your title and subtitle make it clear to people what the places are. If you still want it back, try commenting out line 263 in main.js.

if ($(".tab").length == 1) $(".tab").css("display", "none");

PS. We are about to release an update to the Shortlist with responsive design for better support on phones and tablets and other fixes like automatically widening the tabs to fit long names, and nicely wrapping around tabs if they don't all fit on-screen in large screen mode. It also automatically includes the pictures in the popups and also makes the Details panel optional (it's off by default). We'll announce it on https://twitter.com/EsriStoryMaps when it is released.

All comments

RupertEssinger

if ($(".tab").length == 1) $(".tab").css("display", "none");

Pía_ZenaidaVirginia

Hi Mr. Rupert, thanks for your answer. Really I think in this days that the tab is not necesary. We plan to make this specific example about Acoana training in spanish and english, so we will have two tabs, one for each language; at this moment, there is no tab, because we have only spanish version of the layer.

I read in storymap twitter about the realase to make shortlist responsive. It would be very well for us because this way we have more public access to show Acoana work.

Thanks for promote the "Arte indígena" this work, was mi first practice witdh shortlist.

Regard

Virginia

FlorianHruby2

Hi vbehm and Rupert:

A question regarding your (really nice!!) story map: How did you implement the zoom-to-object function with the �??Localidades�?� �?? Button?

muchas gracias & best regards,

Flo

Pía_ZenaidaVirginia

Hi, nice, until I prepare the second layer, it is good. Here is the shortlist application.

http://www.drivehq.com/file/df.aspx/publish/vbehm/wwwshortlistcursosacoana/index.html

Virginia

FlorianHruby2

Hi guys!

Sorry �?? me question was wrong as it seems to be a standard function in the short-list app. As I would need the same for the side accordion app, I better start a new thread: http://forums.arcgis.com/threads/109837-side-accordion-bookmark-function

Hi vbehm and Rupert:

A question regarding your (really nice!!) story map: How did you implement the zoom-to-object function with the �??Localidades�?� �?? Button?

muchas gracias & best regards,

Flo

Pía_ZenaidaVirginia

Hi Flo, the zoom-to-object is provided by bookmarks made in layer in arcgis online web map.

Virginia

FlorianHruby2

Hola Virginia:

Gracias por tu respuesta!

But I would need this function for the side-accordion storymap app. I already opened a new thread ...

saludos desde México,

Flo

RupertEssinger

Hi Virginia

Looks good. Perhaps you have considered submitting some of your story maps, like the 'Catálogo de Colectivas de Arte Indígena de la Cuenca del Río Caura', to the Esri Story Maps competition. This competition is open until June 2nd.

Also last night we released the update to the Shortlist download that features its new responsive design. The link to the download on the Shortlist page: http://storymaps.arcgis.com/en/app-list/shortlist will now give you the updated Shortlist.

To try it out the new responsive design, click the San Diego Shortlist screenshot on the page above or launch it here: http://storymaps.esri.com/stories/shortlist-sandiego/. If you are working on a desktop or laptop machine, you can resize your web browser window to see the responsive design. If you open that link on a smartphone or tablet it will adjust accordingly.

All the best.

Pía_ZenaidaVirginia

Hi Mr. Rupert, as we comment by email, we (Acoana team) have made some kind of update version on the shortlist "Catálogo de arte indígena...." to submit it at the contest story map. Now it is ready, we add some pictures in the last tab and complete the text in the details panel, some other changes we have made in the popup of line layers and icon color. You can see it in this link

http://www.drivehq.com/file/df.aspx/publish/vbehm/wwwshortlist/index.html

About the release story shortlist I´m testing and using it with the Acoana traning story that I work on this days.

Thanks to tell me about the shortlist update version.

Regards

Virginia

Pía_ZenaidaVirginia

Hi, you can see Acoana training app shortlist with the new version here

http://www.drivehq.com/file/df.aspx/publish/vbehm/wwwshortlistcursosacoana/index.html

Virginia

Pía_ZenaidaVirginia

Hi, with the new version of shortlist app, I think is not so easy to have one tab, one layer. In mobil devices there is no title and subtitle so I would like to see one tab, to explain what is about. What do you think?.

Thanks for feeback.

Pía_ZenaidaVirginia

Hi again, I change to cero, line 364 in the main.js and it works. Nice, now I can see the one tab with text in mobil device.

Regards

linea364main.png

RupertEssinger

Hi Virginia

In our small display mode, we hide the name of the tab on purpose, the same as we do in the normal display mode. If someone opens your story map on their phone or small tablet, the first thing they'll see is the title and subtitle of your app. (If you open your app in large browser window and then resize it so that the small display mode is used, you won't see the title and subtitle of the app because you already opened the app). But press Refresh after resizing your web browser and you will see the title and subtitle.

But I can see why you want to add the long name into the tab. Your customization of the Shortlist to add the name of the tab in when there is just one tab is nice, but I noticed that there is an issue: there's a left arrow in the header that doesn't do anything when it is clicked (see the attached image). That arrow isn't there normally if there is just one tab in the Shortlist, but I'll see if that is something we should fix in the template in case other people do the same customization that you did.

Your ACOANA training Shortlist is nice:
http://www.drivehq.com/file/df.aspx/publish/vbehm/wwwshortlistcursosacoana/index.html
Could you add a web mapping application entry into ArcGIS Online representing that application, so that people can find it when they search or add it into a gallery. You've added one of these entries for your indigenous arts shortlist but not yet for the new one:
http://www.arcgis.com/home/item.html?id=b3351e5f4e454a71b36012852c53ba48
Please include 'story map', 'shortlist', 'custom' in the Tags, in addition to your other tags.

Rupert

_shortlist customized to add tab name into the header of shortlist with one tab has no op white .png

Pía_ZenaidaVirginia

Hi, good morning, I really appreciate all you tell me. When I resize the navigator window (the first time) to see the mobile mode of shortlist app, my training example was open, so I didn´t see the title and subtitle. Later I realize that I can see them if I launch the application with the navigator window in small size. Now I know about refresh to see title.

I will add the instructions you feedback to me.

Thanks a lot.

Regards

Virginia

RupertEssinger

Hi Virginia
Regarding the issue in your customized Shortlist where you have changed it so that the single category of places in your Shortlist is shown as a tab, but in the mobile display an inactive < arrow appears next to this tab's name (see the screenshot above): We think you can hide that unwanted < arrow if you add a css rule:

.icon-arrow-left{
    display: none !important;
}

Pía_ZenaidaVirginia

Hi, I understand what do you tell me, but I would like to know where (before o after existing line of code) I have to write the rule.

Thanks for feedback

RupertEssinger

Hi Virginia

You could put that line of code into style.css file in the existing .icon-arrow-left sectionfile like this:

.icon-arrow-left{
     display: none !important;
     color: #ededed;
     position: absolute;
     left: 5px;
     top: 8px;
}

but we'd recommend adding it into the the Index.html file as a custom style (after line 33 - which is after where the other css files are specified) like this:

<style>
    .icon-arrow-left{
        display: none !important;
    }
</style>

In this way the changes you make to the code can be concentrated in the index.html which is specific to your particular Shortlist, which may make it easier for you to re-use your Shortlist code for other shortlists without having to remember what you changed in the CSS file.

RupertEssinger

I see your fix now in Index.html and that successfully hid the < arrow that your customization exposed in the black header bar above the Places list for your one tab in the small display mode: http://www.drivehq.com/file/df.aspx/publish/vbehm/wwwshortlistcursosacoana/index.html

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.