Pager icon displaying white

[HArjit]

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

 

 

 

[Ivan Danchev]

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

 

 

[HArjit]

Here you go

[Ivan Danchev]

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

 

 

[HArjit]

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

 

bootstrap-
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]

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

 

 

[HArjit]

From which file should I remove 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]

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