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

[Solved] Grid alignment

5 Answers 712 Views

Grid

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

newbie asked on 11 Aug 2010, 07:02 PM

I have a scrollable grid and I am having trouble with the alignment of grid on IE7 and IE8.

I have attached a screenshot of what the page looks like in IE 7 and IE 8. I am using the latest RadControls for ASPNET AJAX
Below is my aspx:

<style type="text/css">

.rgExpand, .rgCollapse

{

display: none !important;

}

/*remove group splitter column padding*/

.rgGroupCol

{

padding-left: 0 !important;

padding-right: 0 !important;

}

</style>

<br />

<div style="width: 100%; text-align: center;">

<table border="0" cellspacing="0" class="calendar" style="margin-left: auto; margin-right: auto;

width: 980px; table-layout: fixed; border-style: none; text-align: left">

<tr>

<td colspan="8">

<br />

</td>

</tr>

<tr>

<th colspan="8" style="height: 23px; text-align: left; background: gray; width: 980px">

<table width="980px">

<tr>

<td style="color: #000000; font-size: 10pt; width: 100px">

User Calendar

</td>

<td style="width: 200px">

</td>

<td style="width: 650px">

<asp:Label ID="DateLabel" runat="server" ForeColor="White"></asp:Label>

</td>

</tr>

</table>

</th>

</tr>

<tr style="background-color: #a7a7a9;">

<td colspan="8">

<table width="980px">

<tr>

<td style="color: Black; text-align: right">

Date Range

</td>

<td style="text-align: left;">

<table >

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

</table>

</td>

<td style="color: Black; text-align: right">

Activity Type

</td>

<td style="text-align: left">

</td>

<td style="color: Black; text-align: right">

Status

</td>

<td style="text-align: left">

</td>

<td style="color: Black; text-align: right">

Participant Level

</td>

<td>

</td>

</tr>

</table>

</td>

</tr>

<tr >

<td colspan="8" style="text-align: left; vertical-align: middle; font-size: 11pt">

<telerik:RadGrid ID="RadGridCalendar" runat="server" GridLines="None" AllowPaging="true"

PageSize="20" AllowFilteringByColumn="true" Width="980px" ShowHeader="true" OnColumnCreated="RadGridCalendar_ColumnCreated"

OnItemCreated="RadGridCalendar_ItemCreated" OnItemDataBound="RadGridCalendar_ItemDataBound"

OnPreRender="RadGridCalendar_PreRender" AutoGenerateColumns="False" EnableLinqExpressions="false"

ShowGroupPanel="false" OnItemCommand="RadGridCalendar_ItemCommand" AllowSorting="true"

AllowCustomPaging="false" OnNeedDataSource="RadGridCalendar_NeedDataSource">

<ClientSettings Resizing-AllowColumnResize="true">

<ClientEvents OnGridCreated="GridCreated" />

<Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="450px" />

</ClientSettings>

<MasterTableView TableLayout="Fixed" HierarchyDefaultExpanded="true" ClientDataKeyNames="ActivityID"

Width="100%" CommandItemDisplay="Top" DataKeyNames="ActivityID">

<GroupByExpressions>

<telerik:GridGroupByExpression>

<SelectFields>

<telerik:GridGroupByField FieldName="ToDoType" HeaderText=" " HeaderValueSeparator=""

FormatString="{0}" SortOrder="Ascending"></telerik:GridGroupByField>

</SelectFields>

<GroupByFields>

<telerik:GridGroupByField FieldName="ToDoType"></telerik:GridGroupByField>

</GroupByFields>

</telerik:GridGroupByExpression>

<telerik:GridGroupByExpression>

<SelectFields>

<telerik:GridGroupByField FieldName="ActivityDate"></telerik:GridGroupByField>

</SelectFields>

<GroupByFields>

<telerik:GridGroupByField FieldName="Date" FormatString="{0:d}" SortOrder="Descending">

</telerik:GridGroupByField>

<telerik:GridGroupByField FieldName="ActivityDate" FormatString="{0:D}" SortOrder="None">

</telerik:GridGroupByField>

</GroupByFields>

</telerik:GridGroupByExpression>

</GroupByExpressions>

<Columns>

<telerik:GridTemplateColumn UniqueName="DateColumn" HeaderText="Date">

<ItemStyle Width="60px" BorderStyle="None"></ItemStyle>

<HeaderStyle Width="60px" HorizontalAlign="Center" />

<ItemTemplate>

<div>

</div>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="TimeColumn" HeaderText="Time">

<ItemStyle Width="110px" BorderStyle="None"></ItemStyle>

<HeaderStyle Width="110px" HorizontalAlign="Center" />

<ItemTemplate>

<div>

<%# DataBinder.Eval(Container.DataItem, "StartTime") %>

<asp:Label ID="Label1" runat="server" Visible='<%# !Convert.IsDBNull(Eval("EndTime")) %>'>-</asp:Label>

<%# DataBinder.Eval(Container.DataItem, "EndTime") %>

</div>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="Subject" HeaderText="Subject">

<ItemStyle BorderStyle="None" Width="200px"></ItemStyle>

<HeaderStyle Width="200px" HorizontalAlign="Center" />

<ItemTemplate>

<div>

<asp:Label ID="LabelSubject" runat="server" CssClass="label" Width="1px" Visible="false"><%# Eval("Subject")%></asp:Label>

</div>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="Location" HeaderText="Location">

<ItemStyle Width="100px" BorderStyle="None"></ItemStyle>

<HeaderStyle Width="100px" HorizontalAlign="Center" />

<ItemTemplate>

<div>

<asp:Label ID="LabelLocation" runat="server" Text='<%# Eval("Location")%>'></asp:Label>

</div>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="DueDate" HeaderText="Due Date">

<ItemStyle Width="100px" BorderStyle="None"></ItemStyle>

<HeaderStyle Width="100px" HorizontalAlign="Center" />

<ItemTemplate>

<div>

<asp:Label ID="LabelDueDate" runat="server" Text='<%# Eval("DueDate")%>'></asp:Label>

</div>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="Contact" HeaderText="Contact">

<ItemStyle Width="100px" BorderStyle="None"></ItemStyle>

<HeaderStyle Width="100px" HorizontalAlign="Center" />

<ItemTemplate>

<div>

<asp:Label ID="LabelContact" runat="server" Text='<%# Eval("Contact")%>'></asp:Label>

</div>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="Description" HeaderText="Description">

<ItemStyle Width="100px" BorderStyle="None"></ItemStyle>

<HeaderStyle Width="100px" HorizontalAlign="Center" />

<ItemTemplate>

<div>

<asp:Label ID="LabelDescription" runat="server" Text='<%# Eval("Description")%>'></asp:Label>

</div>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="ActivityStatus" HeaderText="Status" Visible="false"

DataField="ActivityStatus" AllowFiltering="true">

<ItemStyle Width="100px" BorderStyle="None"></ItemStyle>

<HeaderStyle Width="100px" HorizontalAlign="Center" />

<ItemTemplate>

<div>

<asp:Label ID="LabelStatus" runat="server" Text='<%# Eval("ActivityStatus")%>'></asp:Label>

</div>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="ActivityType" HeaderText="Type" Visible="false"

AllowFiltering="true" DataField="ActivityType">

<ItemStyle Width="100px" BorderStyle="None"></ItemStyle>

<HeaderStyle Width="100px" HorizontalAlign="Center" />

<ItemTemplate>

<div>

<asp:Label ID="LabelType" runat="server" Text='<%# Eval("ActivityType")%>'></asp:Label>

</div>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="ActivitySubType" HeaderText="Sub-Type" Visible="false">

<ItemStyle Width="100px" BorderStyle="None"></ItemStyle>

<HeaderStyle Width="100px" HorizontalAlign="Center" />

<ItemTemplate>

<div>

<asp:Label ID="LabelSubType" runat="server" Text='<%# Eval("ActivitySubType")%>'></asp:Label>

</div>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="Keywords" HeaderText="Keywords" Visible="false">

<ItemStyle Width="100px" BorderStyle="None"></ItemStyle>

<HeaderStyle Width="100px" HorizontalAlign="Center" />

<ItemTemplate>

<div>

<asp:Label ID="LabelKeyword" runat="server" Text='<%# Eval("Keyword")%>'></asp:Label>

</div>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="Priority" HeaderText="Priority" Visible="false">

<ItemStyle Width="100px" BorderStyle="None"></ItemStyle>

<HeaderStyle Width="100px" HorizontalAlign="Center" />

<ItemTemplate>

<div>

<asp:Label ID="LabelPriority" runat="server" Text='<%# Eval("Priority")%>'></asp:Label>

</div>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="Company" HeaderText="Company" Visible="false">

<ItemStyle Width="100px" BorderStyle="None"></ItemStyle>

<HeaderStyle Width="100px" HorizontalAlign="Center" />

<ItemTemplate>

<div>

<asp:Label ID="LabelEmployer" runat="server" Text='<%# Eval("Employer")%>'></asp:Label>

</div>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="Phone" HeaderText="Phone" Visible="false">

<ItemStyle Width="100px" BorderStyle="None"></ItemStyle>

<HeaderStyle Width="100px" HorizontalAlign="Center" />

<ItemTemplate>

<div>

<asp:Label ID="LabelPhone" runat="server" Text='<%# Eval("Phone")%>'></asp:Label>

</div>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="Participants" HeaderText="Participants">

<ItemStyle Width="100px" BorderStyle="None"></ItemStyle>

<HeaderStyle Width="100px" HorizontalAlign="Center" />

<ItemTemplate>

<div>

<asp:Label ID="LabelParticipants" runat="server" Text='<%# Eval("Participants")%>'></asp:Label>

</div>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="TimeSpent" HeaderText="TimeSpent" Visible="false">

<ItemStyle Width="100px" BorderStyle="None"></ItemStyle>

<HeaderStyle Width="100px" HorizontalAlign="Center" />

<ItemTemplate>

<div>

<asp:Label ID="LabelTimeSpent" runat="server" Text='<%# Eval("TimeSpent")%>'></asp:Label>

</div>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="PercentComplete" HeaderText="% Complete"

Visible="false">

<ItemStyle Width="100px" BorderStyle="None"></ItemStyle>

<HeaderStyle Width="100px" HorizontalAlign="Center" />

<ItemTemplate>

<div>

<asp:Label ID="LabelPercentComplete" runat="server" Text='<%# Eval("PercentComplete")%>'></asp:Label>

</div>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="SmartPadNote" HeaderText="Latest SmartPad Note"

Visible="false">

<ItemStyle Width="100px" BorderStyle="None"></ItemStyle>

<HeaderStyle Width="100px" HorizontalAlign="Center" />

<ItemTemplate>

<div>

<asp:Label ID="LabelSmartPadNote" runat="server" Text='<%# Eval("LatestSmartPadNote")%>'></asp:Label>

</div>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="ActivityID" Visible="false" UniqueName="ActivityID">

</telerik:GridBoundColumn>

<telerik:GridDateTimeColumn DataField="Date" AllowFiltering="true" Visible="false"

DataFormatString="{0:MM/dd/yyyy}" UniqueName="Date">

</telerik:GridDateTimeColumn>

<%-- <telerik:GridBoundColumn DataField="ActivityStatus" AllowFiltering="true" Visible="false"

UniqueName="Status">

</telerik:GridBoundColumn>--%>

<telerik:GridBoundColumn DataField="ActivityParticipant" AllowFiltering="true" Visible="false"

UniqueName="ActivityParticipant">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="ActivityParticipantPrimary" AllowFiltering="true"

Visible="false" UniqueName="ActivityParticipantPrimary">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="PrimaryParticipant" Visible="false" UniqueName="PrimaryParticipant">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="ActivityParticipantCreatedBy" Visible="false"

UniqueName="CreatedBy">

</telerik:GridBoundColumn>

</Columns>

<HeaderStyle Width="125px" />

<CommandItemTemplate>

<asp:ImageButton ID="ImageButtonAdd" runat="server" ImageUrl="~/App_Themes/MLightning/Layout/plus-icon.png"

AlternateText="Add" PostBackUrl="~/Calendar/CalendarActivityAddSettings.aspx" />

<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>

</td>

</tr>

<tr style="width: 980px">

<td colspan="8" align="center">

<br />

<asp:Button ID="btnCancel" runat="server" OnClientClick="location.href='../Lookup.aspx';return false;"

Text="Cancel" /> </td>

</tr>

</table>

</div>

If I change anything to adjust it according to one browser, it starts affecting the other browser. This is really bothering me. Please help.
Let me know if you need more info.

[Solved] Grid alignment

5 Answers, 1 is accepted