I am using the code provided in the Dev Summit's Deep Customize to increase size of the open data search bar. Using the code described in this post, Tips: Styling the Search Bar , works fine in Chrome but makes the search bar unusable in Internet Explorer. The search bar text box doesn't display the text at all when typing.
Hi Kevin,
I'm sorry you ran into that issue. I will have to add that caveat to my document you referenced.
Unfortunately, because styling the search bar involves some CSS hacking that is not officially supported, we might not have a solution for that beyond using the default. We do hope to allow toggle options for increasing the size via the settings in the future. As I mentioned in my post, all those search bar examples were implemented by other customers, so I did not verify that they worked cross-browser. I checked just now and I see what you're saying about IE11. For what it's worth, it does work in Edge. Perhaps, others will have an idea how to solve for the older Internet Explorers.
Thank you! I will add your solution to my tips post.
Hi Klara,
Thanks for the response. With the help of one our other developers, I was able to solve the issue with the code. The problem lies with the padding element in the CSS. By removing it, the bar works again. Here is our code:
<SPAN class="language-css style token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>style</SPAN><SPAN class="punctuation token">></SPAN></SPAN> <SPAN class="selector token">h2.single-sb-heading</SPAN> <SPAN class="punctuation token">{</SPAN><SPAN class="property token">margin-bottom</SPAN><SPAN class="punctuation token">:</SPAN> 0px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN> 0px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">font-size</SPAN><SPAN class="punctuation token">:</SPAN> 20px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">color</SPAN><SPAN class="punctuation token">:</SPAN> #005eb8<SPAN class="punctuation token">;</SPAN><SPAN class="punctuation token">}</SPAN> <SPAN class="selector token">.ember-application .jumbotron</SPAN> <SPAN class="punctuation token">{</SPAN><SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN> 0px auto<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">margin</SPAN><SPAN class="punctuation token">:</SPAN> 0px auto<SPAN class="punctuation token">;</SPAN><SPAN class="punctuation token">}</SPAN> <SPAN class="selector token">.ember-application .jumbotron h1</SPAN> <SPAN class="punctuation token">{</SPAN><SPAN class="property token">font-size</SPAN><SPAN class="punctuation token">:</SPAN> 28px<SPAN class="punctuation token">;</SPAN><SPAN class="property token">text-shadow</SPAN><SPAN class="punctuation token">:</SPAN>none<SPAN class="punctuation token">;</SPAN><SPAN class="punctuation token">}</SPAN> <SPAN class="selector token">.ember-application .jumbotron p</SPAN> <SPAN class="punctuation token">{</SPAN><SPAN class="property token">padding-bottom</SPAN><SPAN class="punctuation token">:</SPAN> 0px<SPAN class="punctuation token">;</SPAN><SPAN class="punctuation token">}</SPAN> <SPAN class="selector token">.ember-application .jumbotron form input</SPAN> <SPAN class="punctuation token">{</SPAN><SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN>500px<SPAN class="punctuation token">;</SPAN><SPAN class="punctuation token">}</SPAN> <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>style</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
