1

I'm trying to set the minimum height of some element to the minimum width of another. That minimum width of some element is given using some calc formula in less, and that formula might change later on. I tried setting the min-height to the min-width using JQuery, but it simply inserted the calc equation that didn't give the same output because 20% of the width is not 20% of the height. I was looking at css width: calc(100% -100px); alternative using jquery, but the solutions for that equation requre knowing what the formula was in the jquery, and I want to write my code such that it works no matter how much you change the calc formula in the less.

Example: http://jsfiddle.net/n6DAu/2116/

$(element).width() returns the width in pixels
$(element).css('min-width') returns the equation
Community
  • 1
  • 1
Ofek Gila
  • 693
  • 1
  • 10
  • 21
  • Be aware, there must be a space next to `-`, otherwise it won't work, so the syntax should be `width: calc(100% - 100px);` – Stickers Jul 06 '15 at 17:45
  • 1
    I apologize in advance for responding before I completely understand your question. I found this which might be helpful, however: http://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout . – Jon Edwards Jul 06 '15 at 17:45
  • @Jon Thanks for your reply, but I tried with that answer and it still doesn't work with the calc equation. using the JQuery css function, it returns the whole calc function, and appending 'px' to that just doesn't work: http://jsfiddle.net/n6DAu/2109/ – Ofek Gila Jul 06 '15 at 18:09
  • @JonEdwards, my previous jsfiddle was bad, that code works when using .width(). However when using .css('min-width') it does not give the px yet the calc equation http://jsfiddle.net/n6DAu/2116/ – Ofek Gila Jul 06 '15 at 18:35
  • I guess I don't understand, but you do know width and min-width are not the same thing, regardless of how you come up with the value? – Waxi Jul 06 '15 at 18:39
  • @BuzzotheSplitter, yes, all I want is a way to get the current min width in pixels when the min-width is defined by a calc equation – Ofek Gila Jul 06 '15 at 18:47
  • Well jQuery is doing what you're asking, get the value of the min-width property, but it doesn't do the calculation itself, because only the browser understands that code. One option would be to do the math manually in javascript by getting the width of the parent, then 20% of that, then add the remaining pixels. – Waxi Jul 06 '15 at 19:08
  • @BuzzotheSplitter, yeah, that's what I ended up doing, but now if people change the equation later on, they'll also have to change the javascript. Ideally it would be able to calculate based off of the equation – Ofek Gila Jul 06 '15 at 20:34
  • You can still use js to read the property, but then break apart the text so the values can be used in the calculation. – Waxi Jul 06 '15 at 20:45
  • @BuzzotheSplitter, Thanks, but I think that's a bit messy. I might have to do it though – Ofek Gila Jul 06 '15 at 22:27

1 Answers1

3

Seems to be browser-specific to me. Chrome reports min-width as the calculation, and in the developer tools DOM inspector, it's also reported as the calculation.

Firebug, on the other hand, reports it as the value in pixels, both in the javascript and in the DOM inspector (using your fiddle). Firefox's built in dom inspector also reports it as the pixel size, not the calculation.

I didn't bother testing in IE.

So my answer would be - Possibly - you can't do it. (or at least you can't do it in a generic reliably cross-browser way) The value of min-width is going to change anyway, based on the enclosing element, so it may be something you'd just have to calculate on the fly, since you can find out how wide the enclosing element is at any given point in time.

Dave Thomas
  • 425
  • 2
  • 10