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

Search Bar Styling

BrandonPrice

Does anyone know the css styling to get this to show over the buttons? I already tried applying various z-indexes to certain classes but none worked.

Thanks,

Brandon

https://community.esri.com/community/developers/web-developers/arcgis-api-for-javascript?sr=search&searchId=9e8383c7-ac73-4fc2-84ca-f7f475125825&searchIndex=0‌

https://community.esri.com/groups/web-appbuilder-custom-themes?sr=search&searchId=907e281e-76ec-43a7-8a46-70301981e6fc&searchIndex=2‌

Find more posts tagged with

Accepted answers

BrandonPrice

Hi Owen,

I was able to correct the issue with these css changes:

.arcgisSearch .showSuggestions .suggestionsMenu {
display: block;
z-index: 1001;
left: 35px;
width: 100%;
}

Thanks for your help. I appreciate the response. I couldn't get the z-value method to work. The story map is not public currently unfortunately. Hopefully it will be in the future.

Brandon

All comments

RobertScheitlin__GISP

Brandon,

Just to be sure this is a WAB App right? Because When I test a new vanilla WAB app it does not exhibit this issue.

BrandonPrice

This is an arcgis api 3.22 story map tabbed series app.

RobertScheitlin__GISP

Brandon,

OK, I see you post a lot of questions tagging this space or actually in this space, but you need to understand that Configurable apps like story map are not WAB apps. There is a https://community.esri.com/community/gis/web-gis/storymaps?sr=search&searchId=2f4ccb1e-d204-40b5-affd-ebefb163da87&searchIndex=0‌ space. I would recommend you setting the z-index of the other elements (those buttons in the screenshot) to a lower number.

BrandonPrice

Hi Robert,

I already understand WAB, storymap, api, etc. I post mainly in the api and wab due to lack of activity in other spaces. However, seldom have I have posted in the wrong space on purpose (example: configurable in wab).

Brandon

RobertScheitlin__GISP

OK, I just wanted to be sure that you know that a story map app was not a WAB app. Sorry to hear that there is a lack of activity in the story maps space. I personally am not a story maps user but I can normally provide general JS advice. If you had a public story map app that could be debugged it would make helping you out even easier.

oevans_storymaps

I would say there is certainly no lack of activity in the Story Maps space...as you can see over the last few weeks (even with holidays) there have been several threads per week that are getting 10s or 100s of views, and almost all questions are already marked as resolved. 🙂

BrandonPrice

Unfortunately not the case for me ☹

oevans_storymaps

Brandon -- Let's try to get this resolved for you then... 🙂

Did you already try changing the z-indexes on the buttons to be lower than the z-index of the search dropdown as Robert suggested above? On which classes did you try changing the z-index?

Is that just a map in the main stage of that section or is it another story map or app embedded as a web page?

Are you able to share a link to your app so we can take a look at exactly what's going on or do you just have this locally?

AlisonSizer

Hi Brandon,

Are you sure your custom buttons are within the map's container? The search and location buttons have been added to map.container, and a quick rearranging of those buttons shows the search result dropdown will hide the location button. If you inspect the html of your page, your custom buttons should be siblings of these buttons.

Here is where the location button is being added:

storymap-journal/MapCommand.js at master · Esri/storymap-journal · GitHub

and where the search itself is being added:

storymap-journal/Geocoder.js at master · Esri/storymap-journal · GitHub

Here is a screenshot of the rearranged buttons, and the search results covering the button below it:

If your app is publicly available, or if you just want to shoot one of the members of the Story Maps team an email with its location so you don't have to post it here, we could take a look at it for you.

As Owen mentioned, the Story Maps team really does try to be responsive to our space on GeoNet. I hope you feel like you can post Story Maps related questions to our space in the future.

Alison

Story Maps dev

BrandonPrice

Thanks Alison. I posted multiple times a few months ago and got several no responses. Maybe the community is more active now. I will try this space again. My map app is not public. What is the email for the story maps team just so have it in the future?

My buttons I don't think are in the map's container. I am using the story map tabbed series. I am not sure how to place them in the container. I have them in:

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.