Long Search Bar doesn't work with IE

899
3
Jump to solution
03-24-2017 10:43 AM
KevinDunlop
Occasional Contributor III

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.

0 Kudos
1 Solution

Accepted Solutions
KlaraSchmitt
Esri Contributor

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.

View solution in original post

0 Kudos
3 Replies
KlaraSchmitt
Esri Contributor

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.

0 Kudos
KevinDunlop
Occasional Contributor III

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:

<style>
h2.single-sb-heading {margin-bottom: 0px; padding: 0px; font-size: 20px; color: #005eb8;}
.ember-application .jumbotron {padding: 0px auto; margin: 0px auto;}
.ember-application .jumbotron h1 {font-size: 28px;text-shadow:none;}
.ember-application .jumbotron p {padding-bottom: 0px;}
.ember-application .jumbotron form input {width:500px;}
</style>
KlaraSchmitt
Esri Contributor

Thank you! I will add your solution to my tips post.

0 Kudos