CODEWITHSUNDEEP
htmlcsscalc
Ilja
Ilja

Reputation: 46537

css calc() not producing expected result

I am trying to achieve a specific look of responsive search bar where I display search input, select option for filters and submit button in one row. Submit button and select have defined widths of 44px and 110px respectively and I want search input field to occupy rest of available space, therefore I use width: calc(100% - 154px);. But it is not working as intended. Please see example here https://jsfiddle.net/t97fqqxu/

HTML:

<div id="main-search">
    <form>
        <input type="text" placeholder="Search.." />
        <select>
            <option>Option</option>
        </select>
        <input type="submit" value="Submit"/>
    </form>
</div>

CSS

#main-search {
    background-color: @palette-white;
}
#main-search form {
    width: 100%;
    background: green;
}

#main-search input[type="text"] {
    width: calc(100% - 154px);
}

#main-search select {
    width: 110px;
}

#main-search input[type="submit"] {
    text-indent: -9999px;
    width: 44px;
    height: 44px;
}

EDIT: I'm taking advantage of bootstrap 3's box-model, thus no mater margins and paddings, widths will always be 44px and 110px

Upvotes: 1

Views: 266

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 241198

You didn't account for the border on the input elements. By default, the border/padding is added to the element's width/height. In other words, even if you give an element a width of 110px, you still need to account for the element padding/border.

Updated Example

You could either remove the border, or use box-sizing: border-box to account for the border in the element's width/height calculation:

input[type="text"] {
  border: none;
}

or..

input[type="text"] {
  box-sizing: border-box;
}

In addition, it's worth pointing out that inline elements respect the whitespace in the markup, you also needed to remove that too. See the updated example above.

Upvotes: 2

Related Questions