Hello! I am looking for support on learning custom CSS options for the Nearby Instant App.
These are some customizations we would like to have in our app. Would it be possible to:
1) Change the font size and bold text in some areas i.e., "Clear search location"
2) Change the background (secondary) color behind just the "Filter" button. We want to make this more apparent and easy to see.
3) Change the text in the filter widget to "Close Filter".
Any suggestions or help appreciated. I have only used custom CSS where Esri staff or others on this forum have suggested, so limited knowledge on this.
Solved! Go to Solution.
Thank you again @KellyHutchins, I understand that. On that same topic, would you be able to share the code with me to change the text/wording of those buttons?
It's not a simple task using css only due to the fact that the filter is a component. It might be possible but it would be hacky and I haven't had time to dig into it yet.
Hello @KellyHutchins ! Thanks again for your help on these custom CSS in my nearby app.
I have a question about the "Zoom" text. I changed the visual text to "Zoom" instead of "Zoom to Feature" due to accessibility recommendations. Can I have the text be vertically aligned in the middle? I tried adding vertical-align: middle to the next line, but that did not work.
You should be able to align the button using this css
calcite-action.directions-button.left.calcite-mode-light.zoom-action:after {
color:#007ac2;
content: "Zoom";
background: #fff;
width: 80px;
line-height:48px;
}
Thanks so much! I used a combination of this and the previous CSS code and was able to achieve what I needed, plus making the font weight bold should help as well.
Hi again @KellyHutchins, thanks so much for all your help. We received some accessibility testing for this same app and I have a few more questions that I wonder if are related to CSS or anything else we can do?
Thank you very much. Any input or insight is appreciated!
@Tiff we did some testing on the issue with your second bullet and we are not able to repro the accessibility violation with the slider. We tested with a screen reader and it reads out the "Search Distance Slider". I also took a look at the slider using the Accessibility developer tools in Chrome and the slider does have text associated along with the number. I've attached screenshots showing the output of Voice Over screen reader and the accessibility tools.