White space above RadGrid Scrollbar

9 posts, 0 answers
  1. Vargis
    Vargis avatar
    44 posts
    Member since:
    Jan 2013

    Posted 24 Jan 2013 Link to this post

    Hi
    Firstly I am facing so many rendering problems in IE8 (We are ignoring IE7 so no need to support in that bug browser).

    Here I am attaching an image please refer.
    To remove this white space I had try this property in CSS

    #rgVessel_GridHeader, .rgHeaderDiv {margin-right:0!important}

    It works but the alignment of Grid vertical line disturbed. Is it right hack for removing this white space? Then
    How we can restore the Grid Vertical Lines.?

    Please help us.
    Thanks in Advanve

    vargis
    mailtovargis@gmail.com
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 24 Jan 2013 Link to this post

    Hi,

    With reference to this forum thread, I am afraid that there is no way to avoid the alignment issue which is cause by the Css code you used. The only possible workaround for this problem is to create a custom background image, which looks like the header background and set it as a background of the outer RadGrid <div>.

    Thanks,
    Shinu
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 24 Jan 2013 Link to this post

    Hello,

    As per shinu's Comments there is no way to avoid but please try with below code snippet.


    <style type="text/css">
    .RadGrid
     {
      background-color: Gray !important;  // Your skin color
     }

    </style>


    Thanks,
    Jayesh Goyani
  5. Vargis
    Vargis avatar
    44 posts
    Member since:
    Jan 2013

    Posted 25 Jan 2013 Link to this post

    But it will not works fine in the telerik theme change :(
  6. Eric Bradley
    Eric Bradley avatar
    5 posts
    Member since:
    Apr 2006

    Posted 25 Jan 2013 Link to this post

    Hi, I'm also having the same problem using telerik Office2010Blue. I've looked at the online demo and it also has the same issue.

    I've been able to correct the issue when the page loads using below style but problem continues when paging. It seems like a styling issue within the grid control and not related to how we style the our page.

    .rgHeaderDiv

    {

     

    overflow:visible !important;

    }

     
  7. Vargis
    Vargis avatar
    44 posts
    Member since:
    Jan 2013

    Posted 28 Jan 2013 Link to this post

    White space above RadGrid Scrollbar

    Here is my solution Boss :)

    .rgHeaderDiv

    {
    margin-right:0!important;
    padding-right:17px!important;
    }

    Dont try this in your main CSS. Paste it individually in all pages you want to treat the

    white space above RadGrid Scrollbar

  8. Eric Bradley
    Eric Bradley avatar
    5 posts
    Member since:
    Apr 2006

    Posted 28 Jan 2013 Link to this post

    Perfect, that solved the problem with paging as well, thanks
  9. Elena
    Elena avatar
    11 posts
    Member since:
    Oct 2012

    Posted 14 Mar 2014 Link to this post

    This solves our problem with misaligned headers and columns while scrolling horizontally in IE, but breaks the alignment in Firefox. Any suggestion will be appreciated.

  10. Venelin
    Admin
    Venelin avatar
    352 posts

    Posted 19 Mar 2014 Link to this post

    Hi all,

    I wouldn't recommend to use such styles like

    #rgVessel_GridHeader, .rgHeaderDiv {margin-right:0!important}

    or

    .rgHeaderDiv
    {
    margin-right:0!important;
    padding-right:17px!important;
    }

    because they will break the grid's layout. The margin above the scroll is calculated dynamically and this rule with !important will break this functionality. Don't do it.

    The white gap above the grid was due to a rendering design limitation in the older versions of telerik rad controls. In order to workaround this you have to use the approach that Shinu referred to. If you bother about skin changing runtime you can easily attach a specific for every skin class programmatically in code-behind and change it depending on the skin.

    Regards,
    Venelin
    Telerik
     

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017