Guriddo » Topic: CSS changes in jQuery UI 1.12.1 affects icons colours on jqGrid

Participant

Hello,

The link does not show exactly what you post.

This is very basic change and I think there is a misunderstanding.

Just checked the changes for 1.12.0 click here

and changes for 1.12.1 click here

nothing is mentioted that these classes are drop.

Please check if you have copied correct the jquery UI css file. Of course you can experiment with different theme in order to see if everything is correct.

Kind Regards,

Will

Guriddo Support Team

September 19, 2016 at 5:42 pm #125541

Keymaster

Hello,

We will check this and replay to you ASAP.

Thanks

Kind Regards,

Tony

September 20, 2016 at 11:06 am #125542

Keymaster

Hello,

I have checked what you describe, but does not found any problem.

Here is a test case with the new jquery ui (css and js) 1.12.1

Kind Regards,

Tony

September 20, 2016 at 4:30 pm #125543

Participant

Hello Tony,

I redownloaded jQuery UI 1.12.1 again but I’m having the same problem. Please test with “UI lightness” theme. I tried other themes like “Le frog” and “Excite Bike” where the colour of the icons also change. I didn’t notice the colour difference using base and UI Darkness theme. I guess it depend’s on how the image sprites are set for each theme.

Thanks in advance.

September 21, 2016 at 12:52 pm #125544

Participant

@Will: The change is not listed in the changelog since it may be a minor fix for them. The same happens with “fractional removal detection” for example. If you compare version 1.12 with 1.12.1 you’ll notice those changes.

September 22, 2016 at 6:56 am #125547

Participant

mdp,
Thanks for the clarification.

We have just changed the theme in the example with UI lightness and it work fine for us. Please use the link provided from Tony in order to see the result.

I think it is a problem with loading in browser. You may need to clear your browser cache and try.

Kind Regards,
Will

Guriddo Support Team

September 22, 2016 at 1:20 pm #125552

Participant

Will,

In that demo you can clearly see what I’m refering to. See the buttons on the pager grid in the default state. They appear black. The same happens with sort order icons. Take a look to this old demo where the icons are orange:

http://jsfiddle.net/Lgy7ae3h/2/

Maybe was some unexpected behaviour but I think it made the grid looks better.

Also edit a row and see the buttons in edit form…they look bad in black colour and it’s not consistent with the style of the jquery-ui buttons in that theme.

September 22, 2016 at 2:14 pm #125553

Participant

I may add that the removal of that css property affects not only jqGrid but all the code and plugins that use the icons outside of a html button.As the title of the commit states “Theme: Fix icon default color when not within a button”.

September 23, 2016 at 4:09 pm #125555

Keymaster

Hello,

Sorry, that we do not understand what you mean initially.

I think this is not a jqGrid problem, but rather a jQuery UI.

I will try to test if reverting back this change to the new jQuery UI release will fix the problem. If this is the case we can easy fix it in jqGrid css file, but it will not be fixed in other implementations, which in all cases is not good solution.

Maybe you will need to post this problem to the jQuery UI team.

Kind Regards,

Tony

September 23, 2016 at 5:46 pm #125558

Participant

Hello Tony,

Reverting that change in the stylesheet should work, at least in my case did. I Think jQuery UI will not consider this a problem, since the removal of that property was made to allow customization of the icon colour, which aparently never worked as expected when customizing available themes. Here’s the issue which motivated that modification:
https://github.com/jquery/jqueryui.com/issues/159

Anyway, I think the solution is to adjust the plugins css accordingly instead of revert that change in jQuery UI stylesheet

This reply was modified 9 years, 9 months ago by mdp.

September 26, 2016 at 12:43 pm #125562

Keymaster

Hello,

Just looked at the fix carefully – it is like this:

–.ui-button:focus .ui-icon,

–.ui-state-default .ui-icon {

+.ui-button:focus .ui-icon {

 background-image: url(“images/ui-icons_555555_256x240.png“)/*{iconsHover}*/;

}

Note what is changed! The change applies only to the base theme : images/ui-icons_555555_256x240.png

This means that is not applicable to the other one.

At first look it seems that the fix in jqGrid is easy, but it is not. The reason for this is that the jqGrid css file can reside on one place, while the jQuery UI css file can reside on other very different place and we can not find the where the images directory of jQuery UI.

I feel that not the other plugins should change the css according to the new jQuery UI change, but jQuery UI should change this. Hope you understand me.

We will not apply any fix related to this problem in jqGrid – sorry.

Kind Regards,

September 26, 2016 at 2:58 pm #125563

Participant

Tony, Thanks for your reply.

Althought it can’t be seen in github (I don’t know why other themes aren’t there) that change was applied to all themes. The difference is the sprite image used. Some examples:

https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css
https://code.jquery.com/ui/1.12.1/themes/ui-darkness/jquery-ui.css
https://code.jquery.com/ui/1.12.1/themes/blitzer/jquery-ui.css

https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css

https://code.jquery.com/ui/1.12.1/themes/ui-darkness/jquery-ui.css

https://code.jquery.com/ui/1.12.1/themes/blitzer/jquery-ui.css

Anyway, as you correctly stated, you can’t just add that definition in jqGrid css since, beforehand, you don’t know in which path is jQuery UI. I think the solutions involves replacing hyperlinks and divs/spans with real buttons (which gets styled correctly by jQuery UI) and then adjust their size/appearance in jqGrid CSS. I understand that it’s not a simple change and maybe it can’t be done or you can’t make it since you have other priorities.

In my case I place the fix directly in jQuery UI CSS (reverted the change) since it’s affecting other plugins as well, so I can live whith that.

Thanks!

September 27, 2016 at 9:19 am #125567

Participant

Hello,

Thank you for the recommendation. We will take in account this possible solution.
For now we will stay in the current position, hoping the jQuery UI will fix the problem.

Kind Regards,
Will

Guriddo Support Team

October 19, 2016 at 1:50 pm #125607

Participant

jQuery UI team solved the issue in github by replacing the missing definition for default icons. Here’s the commit

https://github.com/jquery/jquery-ui/commit/dde9b83df61d1d676e66cb2a2f7970dd44a05137

Thanks.

October 20, 2016 at 9:19 am #125609