Pager icon displaying white

8 posts, 0 answers
  1. HArjit
    HArjit avatar
    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.

     

     

     

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2063 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!
     
  3. HArjit
    HArjit avatar
    13 posts
    Member since:
    Jan 2013

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

    Here you go
  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2063 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!
     
  5. HArjit
    HArjit avatar
    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

  6. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2063 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 {
        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!
     
  7. HArjit
    HArjit avatar
    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

  8. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2063 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!
     
Back to Top