2

I'm trying to set dimensions of an autocomplete dropdown using

 .ui-autocomplete.ui-menu {
    width: 16.666667% !important;
    width: -moz-calc(100%/6 - 24px) !important;
    width: -webkit-calc(100%/6 - 24px) !important;
    width: -o-calc(100%/6 - 24px) !important;
    width: calc(100%/6 - 24px) !important;
}

This is written in less. The compiled output is not as expected 16.667% - 24px but instead it ignores the px dimension and outputs -7.333px. Is my calculation wrong? Tried any combination of brackets etc.

gco
  • 1,670
  • 7
  • 24
  • 46
  • Not adding an answer because I feel this is a duplicate (though it maybe tough to find) but Less always does this. The choice is either to make it as `width: calc(100%/6 ~"- 24px") !important;` (or) set `strict-math` setting on and then use `width: calc((100%/6) - 24px)`. – Harry Aug 26 '15 at 13:01
  • Got it. What is best practice? Additionally, what is better fashion: in `calc(100%/6 ~"- 24px")` vs `~"calc(100%/6 - 24px)"`? – gco Aug 26 '15 at 13:05
  • [Please remove those prefix(es)](http://caniuse.com/#search=calc) (or don't care about them anymore with the help of Autocomplete) – FelipeAls Aug 26 '15 at 13:07
  • 1
    Hmm that depends and is more an opinion I think. Strict Math is good (and is my choice) but as Fabricio points out in his other answer (look at the bottom of the linked thread), it can affect other areas and can be troublesome when using external libraries. Between the other two, I have no preference really :) – Harry Aug 26 '15 at 13:07

2 Answers2

3

Use the following syntax to escape the Less rendering:

calc(100%/6 ~"- 24px") !important

This will then output as:

calc(16.66666667% - 24px) !important

http://lesscss.org/functions/#string-functions-e

Curtis
  • 101,612
  • 66
  • 270
  • 352
2

Do this:

~"calc(100%/6 - 24px)"

It's just a strange formatting LESS requires.

i7nvd
  • 1,318
  • 2
  • 10
  • 24