[Solved] Columns not aligned

[Eduardo]

Hi All!!
How can I set the same width columns when I'm editing in InLine Mode??
The gridview picture show the width columns correct, but when I'm editing (gridedit picture), the width of the columns are not the same ....
The source code of the view is :

<div id="gridh3">
    <%  Html.Telerik().Grid(Model)
            .Name("GridH3")
            .Localizable("es-ES")
            .ToolBar(comandos => comandos.Insert().ButtonType(GridButtonType.Image).HtmlAttributes(new{style="width: 20px; min-width: 20px;"}))
            .DataKeys(keys => keys.Add(h3 => h3.TextosH3Id))
            .DataBinding(databinding => databinding.Ajax()
                .Select("Seleccionar", "H3Texto")
                .Insert("Insertar", "H3Texto")
                .Update("Editar", "H3Texto")
                .Delete("Borrar", "H3Texto"))
            .Columns(columnas =>
                {
                    columnas.Bound(c => c.TextosH3Id).Width(10).Title("Id").Sortable(false).HtmlAttributes(new { style = "width: 10px; min-width: 10px;" });
                    columnas.Bound(c => c.ContenidoH3).Width(115).Title("Contenido").Sortable(false).HtmlAttributes(new { style = "width: 115px; min-width: 115px;" });
                    columnas.Bound(c => c.NombrePagina).Width(75).Title("Página").Sortable(true).HtmlAttributes(new { style = "width: 75px; min-width: 75px;" });
                    columnas.Bound(c => c.Posicion).Width(50).Title("Posición").Sortable(false).HtmlAttributes(new { style = "width: 50px; min-width: 50px;" });
                    columnas.Command(comando =>
                    {
                        comando.Edit().ButtonType(GridButtonType.Image).HtmlAttributes(new { style = "width: 20px; min-width: 20px;" });
                        comando.Delete().ButtonType(GridButtonType.Image).HtmlAttributes(new { style = "width: 20px; min-width: 20px;" });
                    }).Width(80).Title("");
                })
            .Editable(editar => editar.Mode(GridEditMode.InLine))
            .Pageable(pagina => pagina.PageSize(10))
            .Sortable(orden => orden.SortMode(GridSortMode.SingleColumn))
            .Render();
        %>
</div>

Any idea what i'm missing ?????..

Thanks

Eduardo

[Andrew]

I have exactly the same issue. I've removed all of my style sheets to make sure its not any custom formatting I'm applying, but I get exactly the same issue with mis-aligned columns in the inline edit view.

[Tobias Rodewi]

Same here, also mis-aligned..

[Tobias Rodewi]

Sorted it out by setting the width's of the columns (all but one). I had the first column (a datetime property) of the table which was wrapped on two rows due to being to long, after setting the column widths so that the data kept onto one row, the edit template got sorted out

[Andrew]

My problem was caused by the columns being "cramped" by constrained surround div. I set overflow to auto on this, to allow scrolling, then did as suggested and set widths on all but 1 column which solved the issue. The learning here being that if the browser forces the column widths because the space is too narrow to fit the columns in, it all falls apart.

[Rene]

Try setting the column width to one of your columns to "*" (include the double quotes)

As in .width("*")