Pager icon displaying white in Kendo UI for jQuery Grid

HArjit

13 posts

Member since:
Jan 2013

Posted 01 Mar 2016 Link to this post

Hi there,

I Created my own custom theme with my custom colors, but for some reasons my pager controls are not displaying correct results. Here is a Screen shot of how it looks. I tried searching for this colors in the CSS but I wasn't able to find the color. How can I fix the pager icons so that they are displayed correctly.

Screen Shot 2016-03-01 at 3.07.56 PM

Ivan Danchev

Admin

2187 posts

Posted 02 Mar 2016 Link to this post

Hello Harjit,

Could you please attach your custom theme's CSS rules? This will allow us to test it and find which styles are responsible for the observed behavior.

Regards,
Ivan Danchev
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

HArjit

13 posts

Member since:
Jan 2013

Posted 02 Mar 2016 in reply to Ivan Danchev Link to this post

Here you go

kendo-custom.css

Ivan Danchev

Admin

2187 posts

Posted 03 Mar 2016 Link to this post

Hello Harjit,

I am afraid, I was not able to reproduce the issue. Are there any other CSS styles that you apply to your page in addition to the ones posted in your previous reply?
Here's a dojo example, which contains a grid using your styles. Could you modify it or link another example, which demonstrates the issue with the buttons?

Regards,
Ivan Danchev
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

HArjit

13 posts

Member since:
Jan 2013

Posted 03 Mar 2016 in reply to Ivan Danchev Link to this post

I'm using Bootstrap so to use bootstrap with Kendo, we have to use the css in he follwing order

bootstrap-supoerhero
kendo.common-bootstrap.min
kendo.bootstrap.min
kendo-custom

So the culprit in this is kendo.bootstrap.min. After I remove that, everything works fine, but I'm not sure what other issues the removal may cause because that's what has been mentioned on how to use Bootstrap with Kendo. My version of kendo.bootstrap.min is Kendo UI v2014.2.1008. Let me know if I have to use a different version or change the order

Ivan Danchev

Admin

2187 posts

Posted 07 Mar 2016 Link to this post

Hello Harjit,

Thank you for the additional information provided.

We found that the following CSS rule is responsible for the missing icons as it overrides the default ones:

.k-icon,

.k-tool-icon,

.k-grouping-dropclue,

.k-drop-hint,

.k-column-menu .k-sprite,

.k-grid-mobile .k-resize-handle-inner:before,

.k-grid-mobile .k-resize-handle-inner:after,

.k-pager-numbers .k-current-page .k-link:after,

.k-scheduler-toolbar > ul.k-scheduler-views > li.k-current-view > .k-link:after {

background-image: url('http://da7xgjtj801h2.cloudfront.net/2015.1.318/styles/MetroBlack/sprite.png');

border-color: transparent;

}

You can remove the ".k-icon" class from the selector, so that the rule does not get applied to the Grid's paging buttons.

Regards,
Ivan Danchev
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

HArjit

13 posts

Member since:
Jan 2013

Posted 07 Mar 2016 in reply to Ivan Danchev Link to this post

From which file should I remove this ? I tried removing it from kendo-custom.css but I get this error in the console. Also nothing happened to the pager.

GET http://localhost:8090/irma-508/assets/Bootstrap/sprite.png 404 (Not Found)

curCSS @ jquery.js?compile=false:6123jQuery.extend.css @ jquery.js?compile=false:6761isHidden @ jquery.js?compile=false:4078showHide @ jquery.js?compile=false:6524jQuery.fn.extend.hide @ jquery.js?compile=false:6917jQuery.fn.(anonymous function) @ jquery.js?compile=false

:7606a.ui.DataBoundWidget.extend._fixedHeader @ kendo.all.min.js:21a.ui.DataBoundWidget.extend.setDataSource @ kendo.all.min.js:21a.ui.DataBoundWidget.extend.init @ kendo.all.min.js:21a.ui.DataBoundWidget.extend._initList @ kendo.all.min.js:20o.extend.init @ kendo.all.min.js:22(anonymous

function) @ kendo.all.min.js:10jQuery.extend.each @ jquery.js?compile=false:384jQuery.fn.jQuery.each @ jquery.js?compile=false:137e.fn.(anonymous function) @ kendo.all.min.js:10(anonymous function) @ irma-i.js?compile=false:6168fire @ jquery.js?compile=false:3099self.fireWith @ jquery.js?compile=false:3211done @ jquery.js?compile=false:9310callback @ jquery.js?compile=false:9720<br>jquery.js?compile=false:9666 XHR finished loading: GET "http://localhost:8090/irma-508/irma/ajaxGetULOSummary?_=1457362089186".send @ jquery.js?compile=false:9666jQuery.extend.ajax @ jquery.js?compile=false:9211IRMA.ULO.initULOSummary @ irma-i.js?compile=false:6260IRMA.ULO.init @ irma-i.js?compile=false:6195jQuery.event.dispatch @ jquery.js?compile=false:4624elemData.handle @ jquery.js?compile=false:4292jQuery.event.trigger @ jquery.js?compile=false:4533(anonymous function) @ jquery.js?compile=false:5235jQuery.extend.each @ jquery.js?compile=false:384jQuery.fn.jQuery.each @ jquery.js?compile=false:137jQuery.fn.extend.trigger @ jquery.js?compile=false:5234IRMA.handleULO @ irma-i.js?compile=false

:690i.Class.extend.callback @ kendo.all.min.js:10i.Class.extend.worksWith @ kendo.all.min.js:10o.extend._urlChanged @ kendo.all.min.js:10o @ kendo.all.min.js:10i.extend.trigger @ kendo.all.min.js:9l.Observable.extend._checkUrl @ kendo.all.min.js:10proxy @ jquery.js?compile=

false:556jQuery.event.dispatch @ jquery.js?compile=false:4624elemData.handle @ jquery.js?compile=false:4292

Ivan Danchev

Admin

2187 posts

Posted 08 Mar 2016 Link to this post

Hello Harjit,

The rule is from the custom css file you attached. Here's the modified dojo example, which loads the bootstrap css files, kendo.common.min.css, and after them the custom CSS rules with the .k-icon class removed from the rule I mentioned in my previous reply (located in the /* icons */ section).

Regards,
Ivan Danchev
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!