[Solved] AllowScroll giving odd result

[Clarence Klopfstein]

I have the following RadGrid:

<telerik:RadGrid ID="grdContractItems" runat="server"
    CssClass="grdContractItems" AutoGenerateColumns="False" GridLines="Both"
     ShowHeader="true"
    onitemdatabound="grdContractItems_ItemDataBound" Height="250px">
    <ClientSettings>
        <Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true" FrozenColumnsCount="1" />
    </ClientSettings>

With the following CSS:

.grdContractItems
{
    position: relative;
    width: 600px;
    float: left;
    clear: left;
    background-color: White;
    border: solid 0px black;
}

But the resulting grid has a grey background, a border, and when a scroll appears it seems to show a grey area where the horizontal scroll would show if it is needed... though its not in my code.

What am I doing wrong?

[Pavlina]

Hello Clarence,

Thanks for the code snippet. Here are some notes on the issue:

1. custom styles not being applied - the problem is caused by the fact that your custom CSS rule has a specificity of 10 (1 CSS class). In order to override the corresponding styles in the embedded skin, the CSS selector should have a specificity of 11 or more, for example:

/* 1 HTML element + 1 CSS class = 1 + 10 = 11 */
div.grdContractItems 
{ 
    position: relative; 
    width: 600px; 
    float: left; 
    clear: left; 
    background-color: White; 
    border: 0; 
}

For more information on specificity and overriding styles, please refer to:

How to override styles in embedded skins


2. gray area at the horizontal scrollbar position - I am not sure whether this is related to the previous point or not. If the issue persists after fixing the above, please send us a screenshot and/or a runnable page, which demonstrates the undesired visual glitch.


All the best,
Pavlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.