Flex is best, but how to make this work on older IE?

[csdude55]

I'm kind of struggling with the CSS on this one, I'm hoping someone can help me figure it out.

I have a search section that looks like this:

<input type="text" style="float: left; width: 80%">
<div style="float: left; width: 75px; margin-left: 15px">SEARCH</div>

<div style="clear: left"></div>

I left off most of the irrelevant cosmetics, but that should explain my goal... input box on the left, search button on the right that's a fixed width, and the input box takes up the rest of the space.

This looks good on desktop and Android, but not in iPhone... the input box is much larger on iPhone, causing the search button to wrap.

This alternative works great on iPhone:

<div style="display: flex">
 <input type="text" style="width: 100%">
 <div style="flex: 0 0 75px; margin-left: 15px">SEARCH</div>
</div>

Buuuut, it doesn't work on IE < 11, and I have a significant amount of traffic using IE9.

I can combine the two and make it work, but the issue is with the width of the input box... with flex it needs to be 100%, without it then it needs to be something smaller.

I don't want to use Modernizr for this one thing, so can you guys suggest a way to make it cosmetically the same, at least down to IE9?

[lucy24]

Have you experimented with {display: inline-block} ?

[not2easy]

The <input> tag isn't the place to set its width. The block element that contains the <input> should be styled and you have styled that <div> with "display: flex" but then styled <input> with "width: 100%".

Try styling the container with width and display options (including "display: inline-block") that may work better for older IE and newer browsers too.

[csdude55]

I've poked and prodded, and can't quite get display: inline-block to do what I want, either.

But this seems to be working:

<div style="float: right; width: 75px">SEARCH</div>

<div style="margin-right: 95px; overflow: hidden: border: 1px solid #000">
 <input type="text" style="width: 100%; border: none">
</div>

<div style="clear: left"></div>

@not2easy was right about putting a container around the <input> tag, so I styled it to make the <input> basically invisible and take up the entire width of the container that's styled to look like an input. Without that, iOS was adding a huge, round border to the <input> that threw everything off.

And another easily-overlooked point is that I had to put the SEARCH button first and float it to the right, then add a margin to the <input> container> that's wider than the button.


For future readers, there IS another way I could have done this, but it's a CSS hack and I generally avoid those:

.container {
 display: flex
}

.input {
 width: 100%
}

.button {
 flex: 0 0 75px;
 margin-left: 15px
}

/* this is only recognized by IE 6 - 9, and somewhat in IE 10-11
@media \0screen\, screen\9 {
 .container {
  /* to break the floats */
  overflow: hidden
 }

 .input {
  float: left;
  width: 80% !important
 }

 .button {
  float: left;
  width: 75px;

  /* this isn't necessary because it would carry over from above, but for the sake of clarity... */
  margin-left: 15px
 }
}

<div class="container">
 <input type="text" class="input">
 <div class="button">SEARCH</div>
</div>

In the above I'm using @media \0screen\,screen\9 that's supposed to only be recognized by IE 6-9, but I've read that IE 10 and 11 might pick up some of it, too. But it uses flex by default, and then plugs in float and a different input width specifically on IE.

It could have also been done inline by adding /9 after the CSS that should only be on IE 6-9, like so:

<div style="display: flex; overflow: hidden\9">

I don't think it's a beautiful solution, and I think that using the float: right is going to be more browser-friendly in the future. But the hack really answers the original question better, so I'm including it in case it can help future readers.

[jane_eyre]

"I have a significant amount of traffic using IE9. "

At this point I'd suggest to not overly design < IE 10 / 11 cause you will be wasting a lot of time. Can the user access the input field? Can they access the 'search' button? If the answer is yes to both of them, leave it as it is. Remember, progressive enhancement is making the component work not making it work exactly as the best possible option.