bonzo icon indicating copy to clipboard operation
bonzo copied to clipboard

.css('padding') isn't working

Open OscarGodson opened this issue 12 years ago • 3 comments

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.

OscarGodson avatar Dec 07 '11 07:12 OscarGodson

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.

ded avatar Dec 08 '11 00:12 ded

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!

OscarGodson avatar Dec 08 '11 21:12 OscarGodson

@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.

connor avatar Nov 25 '12 07:11 connor