Long Search Bar doesn't work with IE

[KevinDunlop]

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.

[KlaraSchmitt · Accepted solution]

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.

[KevinDunlop]

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]

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