Jquery css style not being applied

Question

I feel like an idiot, but I'm going to ask anyway because I am going crazy.

I have an image element on the page that I need to dynamically change the padding on based on a users selection. The only way to do so it to amend the style tag that is on this image since there could be multiple of the page.

To do so I am grabbing the image and then adding a .css() to it.

var currentImg = $(this.$el.find('.form_control').find('img'));
var imagePadding = props ? JSON.parse(props)['ImagePadding']: '';

and then

$(currentImg ).css("padding", imagePadding+'!important');

Seems simple. But it's not applying the css to the element.

The image is coming back looking like this

[<img class="mCS_img_loaded" src="img/kiosk/placeholder.jpg" style="font-family: Helvetica; border: 1px solid rgb(0, 65, 120); color: rgb(255, 255, 255); font-size: 1.25em; background-color: rgb(0, 93, 171);">]

My first thought was because it is coming back in an array (with the []) and tried to drill down using a [0] however that just threw type errors. So I am at a loss. I do not have any other padding styles coming back on it.

@Varun Yes, all the sectors work fine. I'm using them in multiple other places, just here where it hates me. — zazvorniki, Apr 12 '16 at 17:55
@ochi, other than the type error I mentioned when I dig in using the [0] no I am not. — zazvorniki, Apr 12 '16 at 17:56
I do not have full understanding of jQuery so I do not have the complete answer but I can suggest a debugging method, Run the selector in the console and see if it will come back as the string you wanted, do the same with the `imagePadding` variable. Hope this was helpful to you. — , Apr 12 '16 at 17:57
You have not added a 'px' or '%' value in the padding ? @zazvorniki — Varun, Apr 12 '16 at 17:57
If imagePadding does not have trialing space you have to add here : $(currentImg ).css("padding", imagePadding +' !important'); Notice space before !important — Mahesh Chavda, Apr 12 '16 at 17:57
I suppose we would need to see the HTML as well to figure it out then... not enough info with the code above at this point - better yet, can you create a [mcve] in a fiddle (http://jsfiddle.net)? — blurfus, Apr 12 '16 at 17:58
@MegaXLR, I have done so in the console and everything comes back as it should. The Style is just not changing. — zazvorniki, Apr 12 '16 at 17:58
@MaheshChavda, I have tried with a space and without. I have tried with and without the important as well. — zazvorniki, Apr 12 '16 at 18:00
@ochi The html is in my post above. It is the img tag that I posted. — zazvorniki, Apr 12 '16 at 18:00
Then you have to check is var currentImg = $(this.$el.find('.form_control').find('img')); is returning any object ? And what is the value of the variable imagePadding after this statement ? var imagePadding = props ? JSON.parse(props)['ImagePadding']: ''; — Mahesh Chavda, Apr 12 '16 at 18:02
Well but that's not *all* the HTML necessary because I cannot verify the first selector as I do not know how `.form_control` is in relation to the image - I suppose I can always *guess* but I'd rather be certain — blurfus, Apr 12 '16 at 18:03
@MaheshChavda the current image returns [] As stated above. Ans the value coming back from imagePadding is '.5em' — zazvorniki, Apr 12 '16 at 18:04
@A.Wolff, that is why I have tried this with and without the important. Neither works. — zazvorniki, Apr 12 '16 at 18:06
You need to provide JS fiddle. Otherwise there will be endless discussion without any output. — Mahesh Chavda, Apr 12 '16 at 18:06
@zazvorniki but if you use important statement somewhere else, inline style wont override it. First thing you should do is stopping using this statement any/every where, if you do. — A. Wolff, Apr 12 '16 at 18:09
I was able to reproduce some of it to make it work http://jsfiddle.net/wrkfwrb1/1/ - first I needed to remove `!important` as others pointed out - then there seems to be an issue with the parsing of the JSON (but that could be my format being wrong) - if I hard-code the padding value it works so (this would have been much easier if you just provided a fiddle to begin with) — blurfus, Apr 12 '16 at 18:20

score 0 · Answer 1 · answered Apr 12 '16 at 18:09

0

You can use $(currentimage).attr('style','padding:'+vatiablename+'px');

answered Apr 12 '16 at 18:09

Chetan

115
6

This is doing exactly the same as the `.css` method. This is not useful information. – Apr 12 '16 at 18:16

Fabricio · Answer 2 · 2016-04-12T18:13:13.080

-1

You should add a space before '!important', and also you should be sure that imagePadding contains px or %:

Also use attr() instead of css() to use !important.

Edit 1:

$(currentImg ).attr('style', 'padding: ' + imagePaddgin + ' !important');

I hope that helps :D

(thanks @mhodges)

edited Apr 12 '16 at 18:13

answered Apr 12 '16 at 18:00

Fabricio

3,248
2
16
22

I have tried with and without a space before the important and neither have worked. I have also tried without the important all together. The variable imagePadding does have the em inside of it. – zazvorniki Apr 12 '16 at 18:02
You cannot apply !important using jQuery's .css(). Here's an explanation http://stackoverflow.com/a/2655976/4987197 – mhodges Apr 12 '16 at 18:06
1

Thanks @mhodges, I fixed the answer ;) – Fabricio Apr 12 '16 at 18:14
1

But this removes any other inline style. See in link second answer to just append it instead – A. Wolff Apr 12 '16 at 18:15
@A.Wolff Yes, and that is the drawback of this solution. Adding a class with an !important style rule would be the preferred way to do this. – mhodges Apr 12 '16 at 18:16
@mhodges ya but the best imho would be to investigate to why inline padding isnt applied – A. Wolff Apr 12 '16 at 18:18

Jquery css style not being applied

2 Answers2

Edit 1: