topic Re: Search Bar Styling in Classic Esri Story Maps Questions

Search Bar Styling

BrandonPrice — Thu, 04 Jan 2018 22:48:24 GMT

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‌

Re: Search Bar Styling

RobertScheitlin__GISP — Fri, 05 Jan 2018 00:10:49 GMT

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.

Re: Search Bar Styling

BrandonPrice — Fri, 05 Jan 2018 15:17:41 GMT

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

Re: Search Bar Styling

RobertScheitlin__GISP — Fri, 05 Jan 2018 15:26:41 GMT

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.

Re: Search Bar Styling

BrandonPrice — Fri, 05 Jan 2018 15:36:54 GMT

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

Re: Search Bar Styling

RobertScheitlin__GISP — Fri, 05 Jan 2018 15:45:52 GMT

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.

Re: Search Bar Styling

OwenGeo — Fri, 05 Jan 2018 16:11:27 GMT

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

Re: Search Bar Styling

BrandonPrice — Fri, 05 Jan 2018 16:20:42 GMT

Unfortunately not the case for me ☹

Re: Search Bar Styling

OwenGeo — Fri, 05 Jan 2018 17:33:12 GMT

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?

Re: Search Bar Styling

AlisonSizer — Fri, 05 Jan 2018 17:54:34 GMT

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

Re: Search Bar Styling

BrandonPrice — Fri, 05 Jan 2018 18:08:55 GMT

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:

Re: Search Bar Styling

BrandonPrice — Fri, 05 Jan 2018 18:12:52 GMT

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

Re: Search Bar Styling

BrandonPrice — Fri, 05 Jan 2018 18:14:00 GMT

I haven't been posting in this space recently because I gave up. Looks more active now based on the screenshot. I will try posting this site again in the future.

Re: Search Bar Styling

BrandonPrice — Fri, 05 Jan 2018 18:43:30 GMT

Thanks Ricky. I think Robert was right. It is something with the other buttons and the way I have them styled. That’s why I just moved the suggestions box over.