bonzo
bonzo copied to clipboard
.css('padding') isn't working
For example:
#example {
padding:10px;
font-size:14px;
}
bonzo(document.getElementById('example')).css('padding'); //Returns a blank string
bonzo(document.getElementById('example')).css('font-size'); //Returns 14px
I did some testing outside of bonzo and I'm pretty sure this is because the browsers are converting padding:10px
to padding-top:10px
, padding-bottom:10x
, etc
I just threw this in hoping it'd work because i didn't want to write out the utility function myself in my library, but once i write it ill send you a pull request. I believe for margin (didn't test), padding, and other short-hand styles you'll need to see if .css('X') returns a blank string, if so, does padding-top, if padding-top !== blank string then return the value of padding-top back.
the shorthands are tricky. especially for ones like background
or font
-- in the meantime, stick to using padding-left
& padding-top
etc... which ever ones you need specifically.
In my case though i needed all of them because I had a textarea with padding inside of a fixed width/height div (or rather, needed to make sure i supported that use case) and if you added padding to the textarea it'd break outside the div. I wanted to get the padding for it all the way around so i could subtract that from the width/height.
Instead im just going to check top/bottom, add those, then check left right, add those, than subtract those two combined from the width/height.
Thanks though!
@ded is it ok to close this, now? also — do we want to address how the shorthands are handled at all? i fear that might get kind of gross, but i've also run into this issue. i can see both sides of the argument, just wanted to hear what you thought.