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

Grid alignment

5 Answers 656 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.

Grid alignment

5 Answers, 1 is accepted