Radgrid width in I.E

[Juan]

Hi it is my problem:


I have one radgrid in one div this:

<div style="width:920px; min-width:920px; max-width:920px;">  
                                            <telerik:RadGrid ID="griddirectorio" runat="server" Skin="Office2010Silver"
                                                              AutoGenerateColumns="False"
                                                              PageSize="10"
                                                              ClientSettings-Resizing-AllowColumnResize="false"
                                                              GroupingSettings-ShowUnGroupButton="true"
                                                              GroupHeaderItemStyle-CssClass="txt10333"
                                                              GroupPanel-PanelItemsStyle-CssClass="txt10333"
                                                              GroupPanel-PanelStyle-CssClass="txt10333"
                                                              GroupPanel-PanelStyle-Width="100%"
                                                              ShowGroupPanel="true"
                                                              Culture="es-CO"
                                                              EnableLinqExpressions="false"
                                                              AllowFilteringByColumn="true"
                                                              AllowPaging="True"
                                                              AllowSorting="True"
                                                              OnItemCreated="RegistrarAjax"
                                                              OnSortCommand="reordenargrid"
                                                              OnPageIndexChanged="cargarpagegrid"
                                                              OnPageSizeChanged="cambiopagesizegrid"
                                                              OnGroupsChanging="agrupargridinicial"
                                                              OnItemCommand="cambioflitrogrid">
                                                <FilterItemStyle CssClass="txt11333"/>
                                                <HeaderStyle CssClass="txt10333"/>
                                                <ItemStyle CssClass="txt10333" />
                                                <FooterStyle CssClass="txt10333"/>
                                                <PagerStyle Mode="NextPrevAndNumeric" CssClass="txt10333"/>
                                                <AlternatingItemStyle BackColor="#EEEEEE" CssClass="txt10333"/>
                                                <MasterTableView TableLayout="Fixed" AllowMultiColumnSorting="true" CssClass="txt10333">
                                                    <Columns>
                                                        <telerik:GridBoundColumn HeaderText="Nombre" Resizable="true" DataField="nompersona" UniqueName="nompersona" SortExpression="nompersona" FilterControlWidth="145">
                                                            <ItemStyle Width="190" VerticalAlign="Middle" CssClass="txt10333"/>
                                                            <HeaderStyle Width="190"/>
                                                        </telerik:GridBoundColumn>
                                                        <telerik:GridBoundColumn HeaderText="Teléfono" Resizable="true" DataField="telefono" UniqueName="telefono" SortExpression="telefono" FilterControlWidth="145">
                                                            <ItemStyle Width="190" VerticalAlign="Middle" CssClass="txt10333"/>
                                                            <HeaderStyle Width="190"/>
                                                        </telerik:GridBoundColumn>
                                                        <telerik:GridBoundColumn HeaderText="Celular" Resizable="true" DataField="celular" UniqueName="celular" SortExpression="celular" FilterControlWidth="145">
                                                            <ItemStyle Width="190" VerticalAlign="Middle" CssClass="txt10333"/>
                                                            <HeaderStyle Width="190"/>
                                                        </telerik:GridBoundColumn>
                                                        <telerik:GridBoundColumn HeaderText="Cargo" Resizable="true" DataField="cargo" UniqueName="cargo" SortExpression="cargo" FilterControlWidth="145">
                                                            <ItemStyle Width="190" VerticalAlign="Middle" CssClass="txt10333"/>
                                                            <HeaderStyle Width="190"/>
                                                        </telerik:GridBoundColumn>
                                                        <telerik:GridBoundColumn HeaderText="Estado" Resizable="true" DataField="estadoregistro" UniqueName="estadoregistro" SortExpression="estadoregistro" FilterControlWidth="25">
                                                            <ItemStyle Width="70" VerticalAlign="Middle" CssClass="txt10333"/>
                                                            <HeaderStyle Width="70"/>
                                                        </telerik:GridBoundColumn>  
                                                        <telerik:GridTemplateColumn AllowFiltering="false" HeaderText="Acción" Groupable="false">
                                                            <ItemTemplate>
                                                                <asp:LinkButton ID="linkseleccionar" runat="server" Text="seleccionar" CssClass="txt10333" CommandArgument='<%# Eval("directorioID") %>' OnCommand="seleccionardirectorio"></asp:LinkButton>
                                                                <cc1:ConfirmButtonExtender runat="server" ID="Confirmlinkseleccionar" TargetControlID="linkseleccionar" ConfirmText="Realmente desea eliminar este directorio?"></cc1:ConfirmButtonExtender>
                                                            </ItemTemplate>
                                                            <ItemStyle Width="80" VerticalAlign="Middle"/>
                                                            <HeaderStyle Width="80"/>
                                                        </telerik:GridTemplateColumn>
                                                    </Columns>
                                                    <ItemStyle VerticalAlign="Top"/>
                                                </MasterTableView>
                                                <ClientSettings EnableRowHoverStyle="true" AllowDragToGroup="true">
                                                </ClientSettings>
                                            </telerik:RadGrid>
                                        </div>

this div is in a table with the property  " HorizontalAlign="Center" " but in I.E the radgrid not respect the width o the div.

I don't know what happend with this. Help me please. Thanks!!

[Juan]

sorry, here are the images attached to what happens

[Pavlina]

Hi,

You should keep in mind that the browser behavior with relation to column widths is different. Internet Explorer increases all column widths by the amount of table cell paddings, while the other browsers don't do that. As a result, the column widths in IE are visually larger. The solution for this is to use small or no left/right padding for the table cells. Also note that it is not recommended to set ItemStyle-Width for column widths. Only HeaderStyle-Width should be used.

Regards,
Pavlina
the Telerik team

[Tommy]

 
in IE 8,9,10 radgrid header cell widths are wider then column cell widths.  So it’s not the padding, or, at least, not just the padding Right?:

Header cell Layout in IE 10 F12
[Attached Pic1.PNG]



regular cell Layout in IE 10 F12
[Attached Pic2.PNG]


22.24 – 21.55 = .69 px difference.  Why?

[Pavlina]

Hi Tommy,

Could you please send us a live URL where we could observe the described issue?

Regards,
Pavlina
Telerik