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

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.