This is a migrated thread and some comments may be shown as answers.

strange behavior with the grid pager css

2 Answers 74 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Anumeha
Top achievements
Rank 1
Anumeha asked on 08 Nov 2010, 08:17 PM
Hi,

I am seeing some strange behavior with how my grid pager is displayed in different scenarios. It might have something to do with the css on my page but I am not able to figure out what.

I have a search text box on my page which loads the grid with the results.
I also have a button on my page that loads up an additional search panel and populates grid based on the information provided in additional search.

When the page is loaded if I do a basic search the frid pager shows all aligned as shown in the attached file pager_Aligned.
But if I first open the additional search panel and load the grid based on that info the pager becomes centered as shown in attached file pager_centered.

I am not able to understand this behavior. The panel and the grid are not part of the same table so the css of the panel should not be affecting the grid css.

Below is the different css I am using on my page. Please let me know what could be the cause of this.

<div style="width: 100%; text-align: center;">        
        <table border="0px" cellspacing="0" style="margin-left: auto; margin-right: auto; text-align: right;">
            <tr>
                <td style="width: 180px; text-align: left">
                    <telerik:RadTextBox ID="RadTextBoxName" runat="server" TabIndex="4" SelectionOnFocus="CaretToEnd"
                        Width="175px" ForeColor="#898a8c" Font-Names="Tahoma" Font-Size="10pt" OnTextChanged="RadTextBoxName_OnTextChanged"
                        Height="16px" EmptyMessage="Enter the Contact Name">
                    </telerik:RadTextBox>
                </td>
                <td>
                    <asp:ImageButton ID="BtnSearch" runat="server" OnClick="BtnSearch_Click" TabIndex="5"
                        ImageUrl="~/App_Themes/MLightning/Layout/search_btn.png" />
                </td>
                <td style="padding-left: 5px">
                    <asp:LinkButton ID="LinkButtonAdvancedSearch" runat="server" Font-Size="Small" OnClick="LinkButtonAdvancedSearch_Click">Advanced Search</asp:LinkButton>
                </td>
            </tr>
        </table>
        <asp:Panel ID="PanelAdvancedSearch" runat="server" Visible="false" DefaultButton="ButtonAdvancedSearch">
            <table border="0" class="activity" style="padding: 0px; margin: 0px">
                <tr>
                    <th class="activity" style="height: 23px;">
                        Advanced Search
                    </th>
                </tr>
                <tr>
                    <td align="center" style="padding: 5px">
                        <div style="border-color: Gray; border: 1px; border-style: solid; padding: 3px; width: 725px">
                            <table border="0" style="margin-left: auto; margin-right: auto; width: 720px font-family: Tahoma;
                                font-size: 10pt;">
                                <tr>
                                    <td style=" text-align: left; color: Black">
                                        <fieldset>
                                            <legend>Find Contacts that contain (primary search) ... </legend>
                                            <table>
                                                                                               <tr>
                                                    <td style="text-align: right">
                                                        Name:
                                                    </td>
                                                    <td>
                                                        <telerik:RadTextBox ID="RadTextBoxAdvanvedSearchName" Width="120px" runat="server">
                                                        </telerik:RadTextBox>
                                                    </td>
                                                    <td width="15px">
                                                           
                                                    </td>
                                                    <td>
                                                        Employer:
                                                    </td>
                                                    <td>
                                                        <telerik:RadTextBox ID="RadTextBoxAdvanvedSearchEmployer" Width="120px" runat="server">
                                                        </telerik:RadTextBox>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style="text-align: right">
                                                        Greeting:
                                                    </td>
                                                    <td>
                                                        <telerik:RadTextBox ID="RadTextBoxAdvanvedSearchGreeting" Width="120px" runat="server">
                                                        </telerik:RadTextBox>
                                                    </td>
                                                    <td width="15px">
                                                           
                                                    </td>
                                                    <td style="text-align: right">
                                                        DBA:
                                                    </td>
                                                    <td>
                                                        <telerik:RadTextBox ID="RadTextBoxAdvanvedSearchDBA" Width="120px" runat="server">
                                                        </telerik:RadTextBox>
                                                    </td>
                                                </tr>
                                                                                            </table>
                                        </fieldset>
                                    </td>
                                    <td colspan="2" width="1px">
                                           
                                    </td>
                                                                                 </tr>
                                <tr>
                                    <td colspan="3" style="text-align: left; padding: 10px">
                                        (Partial entries will yield results, e.g. rich, son)
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="3" style="text-align: center">
                                        <table width="100%" style="text-align: center">
                                            <tr>
                                                <td style="width: 45%; text-align: right">
                                                    <asp:Button ID="ButtonAdvancedSearch" runat="server" Text="Search" OnClick="ButtonAdvancedSearch_Click" />
                                                </td>
                                                <td style="width: 10%; text-align: center">
                                                    <asp:Button ID="ButtonCancelAdvancedSearch" runat="server" Text="Cancel" CausesValidation="false"
                                                        OnClick="ButtonCancelAdvancedSearch_Click" />
                                                </td>
                                                <td style="width: 45%; text-align: left">
                                                    <asp:Button ID="ButtonClearAdvancedSearch" runat="server" Text="Clear" CausesValidation="false"
                                                        OnClick="ButtonClearAdvancedSearch_Click" />
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </td>
                </tr>
            </table>
        </asp:Panel>
        <table border="0px" style="margin-left: auto; margin-right: auto; text-align: center">
            <tr>
                <td>
                    <asp:Label ID="errorLabel" runat="server" Visible="false" Font-Size="Small" ForeColor="#ff3300"></asp:Label>                </td>
            </tr>
        </table>
    </div>
    <div style="width: 99%; text-align: center;">
          
        <telerik:RadGrid ID="RadGridContact" runat="server" GridLines="Vertical" AllowPaging="true"
            OnPreRender="RadGridContact_PreRender" AutoGenerateColumns="False" EnableLinqExpressions="false"
            AllowSorting="true" AllowFilteringByColumn="false" AllowCustomPaging="false"
            Width="950px" OnNeedDataSource="RadGridContact_NeedDataSource" OnItemDataBound="RadGridContact_ItemDataBound"
            OnColumnCreated="RadGridContact_ColumnCreated" OnItemCreated="RadGridContact_ItemCreated"
            OnItemCommand="RadGridContact_ItemCommand" PageSize="25" TabIndex="7">
            <ExportSettings IgnorePaging="true" OpenInNewWindow="true" ExportOnlyData="false"
                FileName="ContactsExport">
                <Pdf AllowAdd="false" AllowCopy="true" AllowModify="true" AllowPrinting="true" Author="Anonymous"
                    Keywords="None" PageBottomMargin="1in" PageLeftMargin="1in" PageRightMargin="1in"
                    PageTopMargin="1in" PageTitle="Contacts" Subject="Contacts Grid Export" Title="Contacts"
                    PaperSize="Letter" />
            </ExportSettings>
            <MasterTableView TableLayout="Fixed" HierarchyDefaultExpanded="true" ClientDataKeyNames="ContactID"
                CommandItemDisplay="Top" DataKeyNames="ContactID, Name, Addresses, PreferredAddress, LastName, ContactType"
                Name="Contact">
                <Columns>
                    <telerik:GridTemplateColumn HeaderText="ContactID" Visible="false" UniqueName="ContactID"
                        HeaderStyle-Width="0%">
                        <ItemTemplate>
                            <%# Eval("ContactID")%>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn HeaderText="Name" UniqueName="ContactName" HeaderStyle-Width="23%"
                        FilterControlWidth="140px" DataField="LastName" CurrentFilterFunction="StartsWith"
                        AutoPostBackOnFilter="true">
                        <ItemTemplate>
                            <asp:LinkButton ID="SOLink" runat="server" ForeColor="#73abc9" Font-Size="10pt" Font-Bold="true"
                                Text='<%# Eval("Name")%>'></asp:LinkButton>
                            <asp:Label ID="LabelContactName" runat="server" CssClass="label" Visible="false"><%# Eval("Name")%></asp:Label>
                            <br />
                                                       <asp:Label ID="Label2" runat="server" CssClass="label" Visible='<%# !Convert.IsDBNull(Eval("Type")) %>'><br /><b>Type</b>: </asp:Label><%# Eval("Type")%>
                                                   </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn HeaderText="Title/Employer" UniqueName="Employer" HeaderStyle-Width="13%"
                        CurrentFilterFunction="StartsWith" AutoPostBackOnFilter="true" DataField="Employer">
                        <ItemTemplate>
                            <%# Eval("JobTitle")%>
                                                   </ItemTemplate>
                    </telerik:GridTemplateColumn>
                                       <telerik:GridTemplateColumn HeaderText="Phone" UniqueName="Phone" HeaderStyle-Width="20%"
                        AllowFiltering="false">
                        <ItemTemplate>
                            <%# Eval("Phone")%> 
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                   </Columns>
      <CommandItemTemplate>
                    <asp:LinkButton ID="LinkButtonExport" runat="server" CommandName="ExportToPdf" CausesValidation="false">
                    <img style="border:0px;vertical-align:middle;" alt="" src="App_Themes/MLightning/Layout/Reader.gif" />
                            <span class="printTop" > Export</span></asp:LinkButton>  
                </CommandItemTemplate>
                <PagerStyle Position="TopAndBottom" PrevPageText="Prev" NextPageText="Next" Mode="NextPrev" />
            </MasterTableView>
        </telerik:RadGrid>
    </div>

Grid css
/*Telerik RadGrid Default Skin*/
  
/*global*/
  
.RadGrid_MLightning
{
    background-position: #F9F9F9;
    background: #FFF;
    border: 0px !important;
    border-collapse: collapse !important;
    color: #000;
    border-right-width: 0px;
    border-bottom-width: 0px;
      
}
  
.RadGrid_MLightning,
.RadGrid_MLightning .rgMasterTable,
.RadGrid_MLightning .rgDetailTable,
.RadGrid_MLightning .rgGroupPanel table,
.RadGrid_MLightning .rgCommandRow table,
.RadGrid_MLightning .rgEditForm table,
.RadGrid_MLightning .rgPager table,
.GridToolTip_MLightning
{
    font: Tahoma;
    border-right: 0px;
    border-bottom: 0px;
    border-top: 0px;
      
}
  
.RadGrid_MLightning .rgAdd,
.RadGrid_MLightning .rgRefresh,
.RadGrid_MLightning .rgEdit,
.RadGrid_MLightning .rgDel,
.RadGrid_MLightning .rgFilter,
.RadGrid_MLightning .rgPagePrev,
.RadGrid_MLightning .rgPageNext,
.RadGrid_MLightning .rgPageFirst,
.RadGrid_MLightning .rgPageLast,
.RadGrid_MLightning .rgExpand,
.RadGrid_MLightning .rgCollapse,
.RadGrid_MLightning .rgSortAsc,
.RadGrid_MLightning .rgSortDesc,
.RadGrid_MLightning .rgUpdate,
.RadGrid_MLightning .rgCancel,
.RadGrid_MLightning .rgUngroup,
.RadGrid_MLightning .rgExpXLS,
.RadGrid_MLightning .rgExpDOC,
.RadGrid_MLightning .rgExpPDF,
.RadGrid_MLightning .rgExpCSV
{
    background-image:url('Grid/sprite.gif');
}
  
/*header*/
  
.RadGrid_MLightning .rgHeaderDiv
{
    background:#ededed 0 -7550px repeat-x url('Grid/sprite.gif');
}
.rgTwoLines .rgHeaderDiv
{
    background-position:0 -7050px;
}
  
.RadGrid_MLightning .rgHeader,
.RadGrid_MLightning th.rgResizeCol
{
    border-right: solid 1px #FFFFFF;
    background: #003e7e repeat-x 0 100%;
    border-bottom: solid 1px #003e7e;
    border-top: solid 1px #003e7e;
    height: 16px;
    color: #ffffff;
    font-family:Tahoma;
    padding : 0px 5px 0px 5px;
}
  
.RadGrid_MLightning th.rgSorted
{
    background-color:#c4c4c4;
    background-position:0 -2600px;
}
  
.RadGrid_MLightning .rgHeader,
.RadGrid_MLightning .rgHeader a
{
    color: #ffffff;
    text-decoration: none;
}
  
/*rows*/
  
.RadGrid_MLightning .rgRow td,
.RadGrid_MLightning .rgAltRow td,
.RadGrid_MLightning .rgEditRow td,
.RadGrid_MLightning .rgFooter td
{
    border-style:solid;
    border-width: 0 0 1px 0;
    border-right-width : 1px;   
    border-color: #828282;
}
  
.RadGrid_MLightning .rgRow td
{
    border-color:#ffffff;
    padding : 0 0 5px 0;
}
  
  
.RadGrid_MLightning .rgSelectedRow .rgSorted,
.RadGrid_MLightning .rgActiveRow .rgSorted,
.RadGrid_MLightning .rgHoveredRow .rgSorted,
.RadGrid_MLightning .rgEditRow .rgSorted
{
    background-color:transparent;
}
  
.RadGrid_MLightning .rgRow a,
.RadGrid_MLightning .rgAltRow a,
.RadGrid_MLightning .rgEditRow a,
.RadGrid_MLightning tr.rgEditRow a,
.RadGrid_MLightning tr.rgHoveredRow a,
.RadGrid_MLightning tr.rgActiveRow a,
.RadGrid_MLightning .rgFooter a,
.RadGrid_MLightning .rgEditForm a
{
    color:#000000;
}
  
.RadGrid_MLightning .rgEditForm td
{
    color:#000;
    font-family: Tahoma;
    font-size: 9pt;
}
  
.RadGrid_MLightning .rgSelectedRow
{
    background:#828282 0 -3900px repeat-x url('Grid/sprite.gif');
    color:#ffffff;
}
*+html .RadGrid_MLightning .rgSelectedRow .rgSorted{background-color:#828282}
* html .RadGrid_MLightning .rgSelectedRow .rgSorted{background-color:#828282}
  
.RadGrid_MLightning .rgSelectedRow a
{
    color:#ffffff;
}
  
.RadGrid_MLightning .rgActiveRow,
.RadGrid_MLightning .rgHoveredRow
{
    background:#c4c4c4 0 -2900px repeat-x url('Grid/sprite.gif');
    color:#333333;
}
*+html .RadGrid_MLightning .rgActiveRow .rgSorted,
*+html .RadGrid_MLightning .rgHoveredRow .rgSorted{background-color:#c4c4c4}
* html .RadGrid_MLightning .rgActiveRow .rgSorted,
* html .RadGrid_MLightning .rgHoveredRow .rgSorted{background-color:#c4c4c4}
  
.RadGrid_MLightning .rgEditRow
{
    background:#ffffff 0 -4900px repeat-x url('Grid/sprite.gif');
    white-space: normal;
    text-align: center;
    color: #898a8c;
    font-family: Tahoma;
    font-size: 8pt;
    padding: 10px 0px 10px 0px;
    border: solid 1px #C4C4C4;
}
*+html .RadGrid_MLightning .rgEditRow .rgSorted{background-color:#ffffff}
* html .RadGrid_MLightning .rgEditRow .rgSorted{background-color:#ffffff}
  
.RadGrid_MLightning .rgActiveRow td,
.RadGrid_MLightning .rgActiveRow td.rgSorted,
.RadGrid_MLightning .rgHoveredRow td,
.RadGrid_MLightning .rgHoveredRow td.rgSorted
{
    border-bottom-color:#9e9e9e;
}
  
.RadGrid_MLightning .rgSelectedRow td,
.RadGrid_MLightning .rgSelectedRow td.rgSorted
{
    border-bottom-color:#6b6b6b;
}
  
/*footer*/
  
.RadGrid_MLightning .rgFooterDiv,
.RadGrid_MLightning .rgFooter
{
    background:#ededed;
}
  
.RadGrid_MLightning .rgFooter td
{
    border-top:1px solid #828282;
    border-bottom:1px solid #ffffff;
}
  
/*status*/
  
.RadGrid_MLightning .rgPager .rgStatus
{
    border:1px solid;
    border-color:#828282 #c9c9c9 #ededed #c9c9c9;
    border-left:0;
}
  
.RadGrid_MLightning .rgStatus div
{
    background-image:url('Common/loading_small.gif');
}
  
/*pager*/
  
.RadGrid_MLightning .rgPager
{
    background:#ededed;
}
  
.RadGrid_MLightning td.rgPagerCell
{
    border:1px solid;
    border-color:#828282 #ededed #ededed;
    border-right:0;
}
  
.RadGrid_MLightning .rgInfoPart
{
    color:#ffffff;
}
  
.RadGrid_MLightning .rgInfoPart strong
{
    color:#ffffff;
}
  
.RadGrid_MLightning .rgPageFirst
{
    background-position:0 -550px;
}
.RadGrid_MLightning .rgPageFirst:hover
{
    background-position:0 -600px;
}
.RadGrid_MLightning .rgPagePrev
{
    background-position:0 -700px;
}
.RadGrid_MLightning .rgPagePrev:hover
{
    background-position:0 -750px;
}
.RadGrid_MLightning .rgPageNext
{
    background-position:0 -850px;
}
.RadGrid_MLightning .rgPageNext:hover
{
    background-position:0 -900px;
}
.RadGrid_MLightning .rgPageLast
{
    background-position:0 -1000px;
}
.RadGrid_MLightning .rgPageLast:hover
{
    background-position:0 -1050px;
}
  
.RadGrid_MLightning .rgPager .rgPagerButton
{
    border-color:#d1d1d1 #adadad #8c8c8c;
    background:#e8e8e8 repeat-x 0 -1550px url('Grid/sprite.gif');
    color:#000000;
    font-family:"segoe ui",arial,sans-serif;
}
  
.RadGrid_MLightning .rgNumPart a:hover,
.RadGrid_MLightning .rgNumPart a:hover span,
.RadGrid_MLightning .rgNumPart a.rgCurrentPage,
.RadGrid_MLightning .rgNumPart a.rgCurrentPage span
{
    background:no-repeat url('Grid/sprite.gif');
}
  
.RadGrid_MLightning .rgNumPart a
{
    color:#000000;
}
  
.RadGrid_MLightning .rgNumPart a:hover
{
    background-position:100% -1250px;
}
  
.RadGrid_MLightning .rgNumPart a:hover span
{
    background-position:0 -1150px;
}
  
.RadGrid_MLightning .rgNumPart a.rgCurrentPage,
.RadGrid_MLightning .rgNumPart a.rgCurrentPage:hover
{
    background-position:100% -1450px;
}
  
.RadGrid_MLightning .rgNumPart a.rgCurrentPage span,
.RadGrid_MLightning .rgNumPart a.rgCurrentPage:hover span
{
    background-position:0 -1350px;
}
  
/*sorting, reordering*/
  
.RadGrid_MLightning .rgHeader .rgSortAsc
{
    background-position:3px -248px;
    height:10px;
}
  
.RadGrid_MLightning .rgHeader .rgSortDesc
{
    background-position:3px -198px;
    height:10px;
}
  
.GridReorderTop_MLightning,
.GridReorderBottom_MLightning
{
    background:0 0 no-repeat url('Grid/sprite.gif');
}
  
.GridReorderBottom_MLightning
{
    background-position:0 -50px;
}
  
/*filtering*/
  
.RadGrid_MLightning .rgFilterRow
{
    background:#ededed;
}
  
.RadGrid_MLightning .rgFilterRow td
{
    border-bottom:1px solid #828282;
}
  
.RadGrid_MLightning .rgFilter
{
    background-position:0 -300px;
}
  
.RadGrid_MLightning .rgFilter:hover
{
    background-position:0 -350px;
}
  
.RadGrid_MLightning .rgFilterActive,
.RadGrid_MLightning .rgFilterActive:hover
{
    background-position:0 -400px;
}
  
.RadGrid_MLightning .rgFilterBox
{
    border-color:#8f8f8f #c9c9c9 #c9c9c9 #8f8f8f;
    font-family:"segoe ui",arial,sans-serif;
    color:#333333;
}
  
/*filter context menu*/
  
.RadMenu_MLightning .rgHCMClear,
.RadMenu_MLightning .rgHCMFilter
{
    border-color:#d1d1d1 #a8a8a8 #8c8c8c;
    background:#e8e8e8 center -23px repeat-x url('FormDecorator/ButtonSprites.gif');
    color:#000000;
    font-family:"segoe ui",arial,sans-serif;
}
  
.RadMenu_MLightning .rgHCMClear:hover,
.RadMenu_MLightning .rgHCMFilter:hover
{
    border-color:#d1d1d1 #bababa #a3a3a3;
    background-position:center -67px;
    background-color:#e6e6e6;
}
  
/*grouping*/
  
.RadGrid_MLightning .rgGroupPanel
{
    background-color: #e8e8e8;
    width: 100%;
    border-collapse: collapse;
    border-bottom: 1px solid #b1b1b1;
}
  
.RadGrid_MLightning .rgGroupPanel td
{
    padding: 2px 4px;
}
  
.RadGrid_MLightning .rgGroupPanel td td
{
    padding:0;
}
  
.RadGrid_MLightning .rgGroupPanel .rgSortAsc
{
    background-position:4px -144px;
}
  
.RadGrid_MLightning .rgGroupPanel .rgSortDesc
{
    background-position:4px -94px;
}
  
.RadGrid_MLightning .rgUngroup
{
    background-position:0 -6998px;
}
  
.RadGrid_MLightning .rgGroupItem
{
    background: #efefef;
    color: #999999;
    border: solid 1px white;
    border-right: solid 1px #c6c6c6;
    border-bottom: solid 1px #c6c6c6;
    white-space:  nowrap;
    font-size: 10px;
}
  
.RadGrid_MLightning .rgMasterTable td.rgGroupCol,
.RadGrid_MLightning .rgMasterTable td.rgExpandCol
{
    border-color:#d9d9d9;
      
}
  
.RadGrid_MLightning .rgGroupHeader
{    
    height:15px;
}
  
.RadGrid_MLightning .rgGroupHeader td
{
    border-left:0px solid #fff;
    border-right:0;
    border-bottom: solid 1px #c2c2c2;   
    font-family: Tahoma;
    font-size: 10pt;
    vertical-align: text-bottom !important;
}
  
.RadGrid_MLightning .rgGroupHeader td.rgGroupCol
{
    border-top-color:#828282;
      
}
  
.RadGrid_MLightning .rgExpand
{
    background-position:5px -496px;
}
  
.RadGrid_MLightning .rgCollapse
{
    background-position:3px -444px;
}
  
/*editing*/
  
.RadGrid_MLightning .rgEditForm
{
    border-bottom:1px solid #828282;
}
  
.RadGrid_MLightning .rgUpdate
{
    background-position:0 -1800px;
}
  
.RadGrid_MLightning .rgCancel
{
    background-position:0 -1850px;
}
  
/*hierarchy*/
  
.RadGrid_MLightning .rgDetailTable
{
    border-color:#828282;
}
  
/*command row*/
  
.RadGrid_MLightning .rgCommandRow
{
    background: #a7a7a9;
    color: #ffffff;
}
  
.RadGrid_MLightning .rgCommandCell
{
    background: #a7a7a9;
    border: solid 1px #c7c7c7;
    color: #ffffff;
    height: 16px;
    padding-top: 1px;
    padding-bottom: 1px;
    font-family: Tahoma;
    font-size: 9pt;
    text-align:right;
      
}
  
.RadGrid_MLightning tfoot .rgCommandCell
{
    border-top:1px solid;
    border-bottom:0;
}
  
.RadGrid_MLightning .rgCommandTable td
{
    border:0;
    padding:2px 7px;
}
  
.RadGrid_MLightning .rgCommandTable
{
    border:0;
    border-top:1px solid #fcfcfc;
    border-bottom:1px solid #e8e8e8;
}
  
.RadGrid_MLightning .rgCommandRow a
{
    color:#000000;
    text-decoration:none;
}
  
.RadGrid_MLightning .rgAdd
{
    margin-right:3px;
    background-position:0 -1650px;
}
  
.RadGrid_MLightning .rgRefresh
{
    margin-right:3px;
    background-position:0 -1600px;
}
  
.RadGrid_MLightning .rgEdit
{
    background-position:0 -1700px;
}
  
.RadGrid_MLightning .rgDel
{
    background-position:0 -1750px;
}
  
.RadGrid_MLightning .rgSelected .rgDel
{
    background-position:0 -1775px;
}
  
.RadGrid_MLightning .rgExpXLS,
.RadGrid_MLightning .rgExpDOC,
.RadGrid_MLightning .rgExpPDF,
.RadGrid_MLightning .rgExpCSV
{
    background-image:url('Grid/export.gif');
}
  
.RadGrid_MLightning .rgExpXLS
{
    background-position:0 0;
}
.RadGrid_MLightning .rgExpDOC
{
    background-position:0 -50px;
}
.RadGrid_MLightning .rgExpPDF
{
    background-position:0 -100px;
}
.RadGrid_MLightning .rgExpCSV
{
    background-position:0 -150px;
}
  
/*multirow select*/
  
.GridRowSelector_MLightning
{
    background:#545454;
}
  
/*row drag n drop*/
  
.GridItemDropIndicator_MLightning
{
    border-top:1px dashed #666666;
}
  
/*tooltip*/
  
.GridToolTip_MLightning
{
    border:1px solid #828282;
    padding:3px;
    background:#ffffff;
    color:#333333;
}
  
/*rtl*/
  
.RadGridRTL_MLightning .rgPageFirst
{
    background-position:0 -1000px;
}
.RadGridRTL_MLightning .rgPageFirst:hover
{
    background-position:0 -1050px;
}
.RadGridRTL_MLightning .rgPagePrev
{
    background-position:0 -850px;
}
.RadGridRTL_MLightning .rgPagePrev:hover
{
    background-position:0 -900px;
}
.RadGridRTL_MLightning .rgPageNext
{
    background-position:0 -700px;
}
.RadGridRTL_MLightning .rgPageNext:hover
{
    background-position:0 -750px;
}
.RadGridRTL_MLightning .rgPageLast
{
    background-position:0 -550px;
}
.RadGridRTL_MLightning .rgPageLast:hover
{
    background-position:0 -600px;
}
  
  
 DIV.RadGrid_MLightning TH.rgResizeCol {
  
    BACKGROUND-COLOR: #003E7E;
  
}
  
 DIV.RadGrid_MLightning .rgHeader {
  
    BACKGROUND-COLOR: #003E7E;
  
}
  
 DIV.RadGrid_MLightning .rgCommandRow {
  
    BACKGROUND-IMAGE: none;
    BACKGROUND-COLOR: #A7A7A9;
  
}
  
 DIV.RadGrid_MLightning .rgCommandCell {
  
    FONT-FAMILY: Tahoma;
    COLOR: #FFFFFF;
  
}
  
 DIV.RadGrid_MLightning TH.rgResizeCol {
  
    BACKGROUND-IMAGE: none;
  
    BORDER-TOP-COLOR: #00A1D6;
  
}
  
 DIV.RadGrid_MLightning .rgHeader {
  
    border-right: solid 1px #FFFFFF;
    border-bottom: solid 1px #003e7e;
    border-top: solid 1px #003e7e;
    background: #003e7e;
    font: bold 10pt Tahoma;
    color: #ffffff;
    height: 16px;
    vertical-align:middle;
  
}
  
 DIV.RadGrid_MLightning .rgHeader A {
  
    color: #ffffff;
    text-decoration: none;
    font: bold 11px Verdana, Arial, Sans-serif;
}
  
DIV.RadGrid_MLightning .rgRow TD,
DIV.RadGrid_MLightning .rgAltRow TD,
DIV.RadGrid_MLightning .rgSelectedRow TD,
DIV.RadGrid_MLightning .rgActiveRow TD,
DIV.RadGrid_MLightning .rgEditRow TD
{
    padding-top:2px;
    padding-bottom:2px;
}
  
 DIV.RadGrid_MLightning .rgFilterRow TD {
  
    FONT-FAMILY: Tahoma;
  
}
  
 DIV.RadGrid_MLightning .rgRow TD A,
 DIV.RadGrid_MLightning .rgAltRow TD A {
  
    color: #73abc9;
    font-family:Tahoma;
    font-size:8pt;
  
}
  
DIV.RadGrid_MLightning .rgRow TD,
DIV.RadGrid_MLightning .rgAltRow TD {
  
    BACKGROUND-COLOR: #FFFFFF;
    white-space: normal;
    text-align: center;
    color: #898a8c;
    font-family: Tahoma;
    font-size: 8pt;
    padding: 10px 0px 10px 0px;
    border: solid 1px #C4C4C4;
      
}
  
DIV.RadGrid_MLightning .rgRow TD DIV,
DIV.RadGrid_MLightning .rgAltRow TD DIV{
      
    padding-left: 5px ;
}
  
 DIV.RadGrid_MLightning .rgRow,
 DIV.RadGrid_MLightning .rgAltRow {
  
    COLOR: #898A8C;
    background: #ffffff;
}
  
 DIV.RadGrid_MLightning TR.rgSelectedRow {
  
    BACKGROUND-COLOR: #707070;
  
}
  
 DIV.RadGrid_MLightning TABLE .rgActiveRow {
  
    BACKGROUND-COLOR: #EDF2D9;
  
}
  
 DIV.RadGrid_MLightning TABLE TR.rgHoveredRow {
  
    BACKGROUND-COLOR: #FFFFFF;
  
}
  
  
  
 DIV.RadGrid_MLightning .rgPager {
  
    BACKGROUND-COLOR: #898A8C;
    border-right: 0;
    color: #999;
  
}
  
 DIV.RadGrid_MLightning .rgPager .rgPagerCell {
      
    COLOR: #FFFFFF; 
    font-family: Tahoma;
    border: 1px solid #c7c7c7;
    height: 14px;
    padding-top: 1px;
    padding-bottom: 1px;
    font-family: Tahoma;
    font-size: 8pt;
}
  
DIV.RadGrid_MLightning .rgPager .rgPagerCell A{
  
    FONT-FAMILY: Tahoma;
    COLOR: #FFFFFF;
    padding-left : 5px;
    padding-right : 5px;
}
  
 DIV.RadGrid_MLightning {
  
    PADDING-BOTTOM: 5px;
  
    MARGIN-TOP: 0px;
  
}
  
 DIV.RadGrid_MLightning TH.rgResizeCol {
  
    BORDER-LEFT-COLOR: transparent;
  
}
  
 DIV.RadGrid_MLightning .rgHeader {
  
    BORDER-LEFT-COLOR: transparent;
  
}
  
 DIV.RadGrid_MLightning .rgFilterRow TD {
  
    BORDER-BOTTOM: transparent 0px solid;
  
    BORDER-LEFT: #FFFFFF 1px solid;
  
    PADDING-BOTTOM: 0px;
  
    BACKGROUND-COLOR: #8FBCD1;
  
    BORDER-TOP-COLOR: transparent;
  
    PADDING-LEFT: 0px;
  
    PADDING-RIGHT: 0px;
  
    BORDER-RIGHT-COLOR: transparent;
  
    PADDING-TOP: 0px;
  
}
  
   
  
 DIV.RadGrid_MLightning .rgSelectedRow TD {
  
    PADDING-BOTTOM: 2px;
  
    PADDING-TOP: 2px;
  
}  
  
 DIV.RadGrid_MLightning .rgFooter {
  
    COLOR: #FFFFFF;
}
  
 DIV.RadGrid_MLightning .rgPager {
  
    COLOR: #FFFFFF;
  
}
  
   
  
 DIV.RadGrid_MLightning .rgFooter TD {
  
    BACKGROUND-COLOR: #8FBCD1;
  
}


Additional css on page:

body
{
    background-color: #ffffff;
    font-family: Tahoma;
    font-size: medium;
    margin: 0px;
    text-align: center;
}
  
  
.RadGrid table
{
    margin: 0;
}
  
/*td {
  border:           #999999 solid thin;
  outline:          black solid thin;
  padding:       6px 6px 6px 6px;
}
  
th 
  padding:  5px;
  outline:  black solid thin;  
  }*/
  
.RadGrid td
{
    padding:  0px 0px 3px 0px;
    border-collapse: collapse !important;
}
  
.RadGrid .rgGroupHeader td
{
    padding-top:  12px !important;    
    padding-bottom: 1px !important;
}
  
  
th.inner
{
    font-size: 11px;
    border-right-color: #c0c0c0;
    border-left-color: #c0c0c0;
}
  
.linkButton
{
    color: #73abc9;
    font-size: 10pt;
    font-family: Tahoma;
}
  
.label
{
    color: #898a8c;
    font-size: 8pt;
    font-family: Tahoma;
}
  
.rgGroupCol  
{  
    padding-left: 3px !important;  
    padding-right: 3px !important;  
}  
  

2 Answers, 1 is accepted

Sort by
0
Anumeha
Top achievements
Rank 1
answered on 08 Nov 2010, 08:48 PM
I forgot to add the files
0
Dimo
Telerik team
answered on 10 Nov 2010, 12:43 PM
Hi Anumeha,

It seems that you are losing the RadGrid base stylesheet. Is the problem seen only in IE? If yes, then refer to:

http://blogs.telerik.com/kamenbundev/posts/10-05-03/internet_explorer_css_limits.aspx

If not, then please send full runnable demo.

Kind regards,
Dimo
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
Grid
Asked by
Anumeha
Top achievements
Rank 1
Answers by
Anumeha
Top achievements
Rank 1
Dimo
Telerik team
Share this question
or