I have a web application that is published on my computer.
If I execute the web application on my computer, it looks fine (mimaquina.jpg), but if I run the same application on others computers, it looks bad (other.jpg).
Example: Explorer 8, same screen resolution.
The web application looks different.
I send you an example, the 2 pictures, one of my computer and other in the other computer.
1-My Computer. (mimaquina.jpg)
2-Other Computer (other.jpg)
I will really apreciate if you can send me a solution or at least, what is happening.
3 Answers, 1 is accepted
mimaquina.jpg - this is seen in IE8
other.jpg - this is seen in IE7 or IE8 Compatibility mode
IE 6 and 7 have a different way to apply column widths. They add the cell paddings to the set width and the columns appear wider. You should keep that in mind when setting column widths.
In addition, IE8 does not support the text-overflow CSS property, which produces the ellipsis ("...") if the text cannot fit.
Best wishes,
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.
Are the exactly the same.
Do you have any idea?
The only difference is if a execute the web application on my computer. (ok) (machine.jpg)
if I run the same application on others computers, it looks bad (other.jpg).
I am not using the text-overflow CSS property, which produces the ellipsis.
I send you the code of HTML.
<%
@ Reference Control="~/ascx/box.ascx"%>
<%
@ Register TagPrefix="sol2008" TagName="sala_scripts" Src="~/ascx/estados_maq_sala_scripts.ascx" %>
<%
@ Register TagPrefix="sol2008" TagName="Box" Src="~/ascx/box.ascx" %>
<%
@ Register TagPrefix="sol2008" TagName="MsgBox" Src="~/ascx/msgbox.ascx" %>
<%
@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%
@ Page Language="C#" Inherits="sol2008.estados_maq_sala_cad" CodeFile="~/estados_maq_sala_cad.aspx.cs" EnableEventValidation="false" %>
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml" >
<
head id="Head1" runat="server">
<title>Sistema sol2008</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<link href="Comunes/estilos/sol2008.css" rel="stylesheet" type="text/css"/>
<link href="Comunes/estilos/Grid.MyCustomSkin.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="Comunes/Script/Funciones.js" type ="text/javascript" ></script>
<script language="javascript" src="Comunes/Script/Validaciones2.js" type ="text/javascript" ></script>
<script language="javascript" src="Comunes/Script/validaciones.js" type ="text/javascript" ></script>
<script type="text/javascript">
//Elimina el cartel de Esperando.
function TratamientoTable() {
parent.document.getElementById(
'DivEsperando').style.display = 'none';
}
window.onload = TratamientoTable;
function fnMostrarDescripciones() {
if (parent.document.getElementById('DivColumnas').style.display == '') {
window.document.getElementById(
'<%=btnDescripciones.ClientID%>').value = '<%= sol2008.Utils.GetRecursoCultura("comunes_Mostrar_Descripciones")%>';
parent.document.getElementById(
'DivColumnas').style.display = 'none';
}
else {
window.document.getElementById(
'<%=btnDescripciones.ClientID%>').value = '<%= sol2008.Utils.GetRecursoCultura("comunes_Ocultar_Descripciones")%>';
parent.document.getElementById(
'DivColumnas').style.display = '';
}
}
</script>
</
head>
<
body>
<
form runat="server" id="frm">
<
telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
<asp:label id="estados_maq_sala_scripts" runat="server"></asp:label>
<sol2008:sala_scripts id="Salas_Scripts" runat="server" />
<sol2008:Box id="BoxBegin" action="begin" runat="server" Width="100%"/>
<table cellpadding="0" cellspacing="0" width="100%" style="table-layout:auto">
<tr style="height:25px">
<td align="right">
<input type="button" id="btnDescripciones" runat="server" value="Mostrar Descripciones" onclick="fnMostrarDescripciones();"/>
</td>
</tr>
<tr>
<td valign="top" align="center">
<telerik:RadGrid ShowGroupPanel="false" AutoGenerateColumns="false" OnItemDataBound="RadGrid1_ItemDataBound" ID="RadGrid1" AllowFilteringByColumn="False" runat="server" Skin="MyCustomSkin" EnableEmbeddedSkins="false" OnDetailTableDataBind="RadGrid1_DetailTableDataBind">
<ClientSettings>
<Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="350px" />
<Resizing AllowColumnResize="true"/>
</ClientSettings>
<MasterTableView DataKeyNames="C_ID" TableLayout="Fixed" Width="100%">
<Columns>
<telerik:GridBoundColumn DataField="C_ID" HeaderText="CAD" UniqueName="C_ID" HeaderStyle-HorizontalAlign="Center"></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="CantMaq" HeaderText="CantMaq" UniqueName="CantMaq" HeaderStyle-HorizontalAlign="Center"></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="CantMaqSinDatos" HeaderText="CantMaqSinDatos" UniqueName="CantMaqSinDatos" HeaderStyle-HorizontalAlign="Center"></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Eventos" HeaderText="Eventos" UniqueName="Eventos" HeaderStyle-HorizontalAlign="Center"></telerik:GridBoundColumn>
</Columns>
<DetailTables>
<telerik:GridTableView>
<Columns>
<telerik:GridBoundColumn DataField="UID" HeaderText="UID" UniqueName="UID" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderStyle-Width="60"></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="m_id" HeaderText="MID" UniqueName="MID" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderStyle-Width="30"></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="CUIM" HeaderText="CUIM" UniqueName="CUIM" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderStyle-Width="50"></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="ubicacionisla" HeaderText="N Interno" UniqueName="ubicacionisla" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Fabricante" HeaderText="Fabricante" UniqueName="Fabricante" HeaderStyle-HorizontalAlign="Center" ></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Juego" HeaderText="Juego" UniqueName="Juego" HeaderStyle-HorizontalAlign="Center" ></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="FechaHora" HeaderText="FechaHora" UniqueName="FechaHora" HeaderStyle-HorizontalAlign="Center" DataFormatString="{0: dd/MM/yyyy HH:mm:ss}" HeaderStyle-Width="80" ItemStyle-HorizontalAlign="center" ItemStyle-Wrap="false"></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="C_In" HeaderText="C.In" UniqueName="C_In" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="C_Out" HeaderText="C.Out" UniqueName="C_Out" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="C_Jkp" HeaderText="C.Jkp" UniqueName="C_Jkp" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="C_Cre" HeaderText="C.Cre" UniqueName="C_Cre" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="PPrincipal" HeaderText="PPrincipal" UniqueName="PPrincipal" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderStyle-Width="25"></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="PLogica" HeaderText="PLogica" UniqueName="PLogica" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderStyle-Width="25"></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="PDrop" HeaderText="PDrop" UniqueName="PDrop" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderStyle-Width="25"></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="PStacker" HeaderText="PStacker" UniqueName="PStacker" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderStyle-Width="25"></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Habilitada" HeaderText="Habilitada" UniqueName="Habilitada" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Center" HeaderStyle-Width="28"></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="EnLinea" HeaderText="EnLinea" UniqueName="EnLinea" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderStyle-Width="25"></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="pagomanpend" HeaderText="pagomanpend" UniqueName="pagomanpend" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Center" HeaderStyle-Width="30"> </telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Ver" HeaderText="Ver" UniqueName="Ver" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" HeaderStyle-Width="100"></telerik:GridBoundColumn>
</Columns>
</telerik:GridTableView>
</DetailTables>
</MasterTableView>
</telerik:RadGrid>
</td>
</tr>
</table>
<sol2008:Box action="end" runat="server" id="BoxEnd" />
<sol2008:MsgBox title="Advertencia" runat="server" id="MsgError" visible="false" />
</
form>
</
body>
</
html>
I will really apreciate if you can send me a solution or at least, what is happening.
Thank´s!
Even if you are using IE8 on all computers, it is obvious that the rendering mode is different - IE8 Standards Mode in one case and IE8 Compatibility Mode in the other case. The latter mode is pretty much the same as IE7.
In order to achieve exactly the same column widths in IE7 and IE8, you must remove all cell paddings from the RadGrid cells, which will greatly reduce readability. You can use template columns with <div>s with side padding to compensate for the removed cell paddings, but this will be a big overhead.
The text-overflow property is used automatically by RadGrid to add dots, but this is supported only by IE6 and IE7.
Greetings,
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.
