css calc() not producing expected result

Question

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

score 2 · Accepted Answer · edited May 23 '17 at 10:24

2

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.

edited May 23 '17 at 10:24

Community

1
1

answered Apr 29 '15 at 14:51

Josh Crozier

233,099
56
391
304

I just updated my answer to signify that I am using border-box, but will look into your answer, as you got it working. – Ilja Apr 29 '15 at 14:52
@Ilja Then whitespace is the issue. See the last portion of my answer. – Josh Crozier Apr 29 '15 at 14:56
I applied what you said in my fiddle it works fine, yet in production, that uses same code, whenever I take say -10px away, it seems to grab larger chunk off is calc calculating 100% from parent or element itself? – Ilja Apr 29 '15 at 15:00
@Ilja It would be 100% of the parent element. Not sure why that's occurring for you if it works in the fiddle though. – Josh Crozier Apr 29 '15 at 15:01
I inspected the element it seems that whenever I do -10px it calculates to 90% width and if I do -20px it calculates to 80%, so it does not respect px or something? – Ilja Apr 29 '15 at 15:04
never mind, I was using less and it compiles it weirdly for some reason – Ilja Apr 29 '15 at 15:05
Ah, that makes sense. If you're using LESS you need to escape it, otherwise the addition/subtraction will be evaluated. Surround it with `~".."`.. for instance, `~"calc(100% - 110px)"` – Josh Crozier Apr 29 '15 at 15:06
Oh wow, never encountered this before, it does fix the issue. Thank you! – Ilja Apr 29 '15 at 15:11

css calc() not producing expected result

1 Answers1