Grid in High contrast mode

Thread is closed for posting
6 posts, 1 answers
  1. Madzie
    Madzie avatar
    65 posts
    Member since:
    Apr 2012

    Posted 26 Dec 2014 Link to this post

    It is found that some parts of the controls in grid are not visible in High contrast mode - please find attached the difference :
    especially the filter and paging links (next / previous)
  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 29 Dec 2014 Link to this post

    Hello Madzie,

    Thank you for bringing our attention to this. We will strive to update the themes for future releases -- as a workaround until then, consider adding the high-contrast styles via the styles on your page.

    Regards,
    Alex Gyoshev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. Madzie
    Madzie avatar
    65 posts
    Member since:
    Apr 2012

    Posted 29 Dec 2014 in reply to Alex Gyoshev Link to this post

    I tried few of them but nothing seems to work. Can you suggest what is the appropriate one to try for the page next image links ?
  4. Madzie
    Madzie avatar
    65 posts
    Member since:
    Apr 2012

    Posted 29 Dec 2014 in reply to Alex Gyoshev Link to this post

    I tried few of the options, but nothing seems to work right.
    could you suggest the appropriate one for all paging related controls (specifically the next/prev links here)
  5. Answer
    Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 30 Dec 2014 Link to this post

    Hello Madhuri,

    You need to set the background-image on the elements that you want to have icons, within a @media query:

    @media screen and (-ms-high-contrast: active) {
        .k-grid .k-icon, .k-grouping-dropclue, .k-drop-hint, .k-column-menu .k-sprite {
            background-image: url("http://cdn.kendostatic.com/2014.3.1119/styles/HighContrast/sprite.png");
        }
    }

    Regards,
    Alex Gyoshev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Madzie
    Madzie avatar
    65 posts
    Member since:
    Apr 2012

    Posted 30 Dec 2014 in reply to Alex Gyoshev Link to this post

    Thanks for the reply. This worked with a little changes to the earlier version of telerik grid :

    @media screen and (-ms-high-contrast: active) {
    .t-grid .t-pager, .t-pager .t-numeric, .t-pager .t-page-i-of-n, .t-pager .t-link, .t-pager span, .t-pager input, .t-pager .t-page-size, .t-grouping-row p{
    background-image: url("http://cdn.kendostatic.com/2014.3.1119/styles/HighContrast/sprite.png");
    }
    }
Back to Top