smerny smerny - 1 year ago 44
CSS Question

Full width input within dynamic full width container left of fixed width item

Sort of hard to explain in the title... but basically I need the item on the right (search button) to be of fixed width. The item on the left fills the rest of the space.

HTML:

<div class="ric-search-form">
<button id="ricSearchButton">Search</button>
<div class="ric-search-input-group"><span class="icon-search8"></span>
<input style="" placeholder="Search" id="ricSearchField">
</div>
</div>


Within the item on the left (
.rich-search-input-group
) there is a
span
and an
input
. How can I make sure that my
input
fills up the remaining of
.rich-search-input-group
?

JSFiddle demonstrating the issue.

You can see where the input ends if you hover and watch the cursor change or if you type to fill it out.

Answer Source

Assign display: flex; to your .ric-search-input-group class, and give your <input> a flex-grow: 1;.

CSS

.ric-search-form .ric-search-input-group {
    display: flex;
}

.ric-search-form .ric-search-input-group input {
    flex-grow: 1;
}

body {
  background-color:white;
}
.ric-search-form {
    font-family: "Knowledge Regular";
    overflow: hidden;
    margin-bottom: 23px;
}
.ric-search-form button {
    float: right;
    width: 120px;
    height: 32px;
    background-color: #ff8000;
    color: #fff;
    border-radius: 2px;
    border: none;
    font-size: 14px;
    font-weight: bold;
    margin-left: 15px;
}
.ric-search-form .ric-search-input-group {
    width: auto;
    overflow: hidden;
    border-bottom: 1px solid #c8c8c8;
    margin-right: 15px;
    display: flex;
}
.ric-search-form .ric-search-input-group span {
    font-size: 26px;
    color: #c8c8c8;
}
[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.ric-search-form .ric-search-input-group input {
    outline: none;
    border: none;
    font-size: 28px;
    padding-left: 15px;
    color: #9b9b9b;
    flex-grow: 1;
}
<div class="ric-search-form">
  <button id="ricSearchButton">Search</button>
  <div class="ric-search-input-group"><span class="icon-search8"></span>
    <input style="" placeholder="Search" id="ricSearchField">
  </div>
</div>

JSFiddle