[Solved] Grid width edit-mode Alignment issue

[Kuangyi]

Hi, I'm having alignment issues in my telerik grid.  i'm not sure what the problem is.

In my app I have a list of objects, and that object has a list that I want to render as columns (for various reasons we don't use a datatable for automatic columns).  When I go into edit mode, it looks ok if the browser is wide, however the alignment of the columns in the edit row get weird when I make the browser smaller.  Seems like the min-widths of the edit columns and headers are different.  I played around with setting min-widths and widths but nothing didn't work out.  I tried googling different solutions and none of them seem to work (I did not try the solution in which they change the telerik css file).  I have all widths set except one column, a string column).

Basically I would just like the header columns + edit-columns to resize the same, instead of one resizing more than the other when you make the browser smaller. 

Please see the simple sample project.  I actually have part of the grid commented out (a loop that renders a list as multiple columns) for simpler reproduction of the weird grid alignment issue where there's just an int, 2 dates, a string and a command button.

[Dimo]

Hi Kuangyi,

There are two CSS rules in Site.css, which cause the edit textboxes to become too wide:

input[type="text"] {
    border: 1px solid #CCCCCC;
    width: 200px;
}

/* and */

.text-box {
    width: 30em;
}

After you remove these, the textboxes will become about 120px wide, which is the browser's default setting. If you want to control the width further (or override the above styles without removing them), set some value according to your preferences. Usually, a percentage width gives the greatest flexibility if your Grid can shrink and expand:

.t-grid  input.text-box {
       width: 80%;
}

Note that long unspaced strings are normally not splitted by browsers, unless you use the word-wrap CSS property.

All the best,
Dimo
the Telerik team

[Kuangyi]

Hi, that doesn't seem to work.  Those 2 css rules are being overwritten by something in asset.axd anyway:

.t-grid-edit-row .text-box, .t-grid-edit-row .t-numerictextbox, .t-grid-edit-row .t-datepicker {

1. vertical-align: middle;
2. width: 5em;
3. max-width: 90%;
4. min-width: 90%;
5. margin: -.4em -.3em -.15em;

}

input[type="text"] {

1. width: 200px;
2. border: 1px solid #CCC;
3. border-image: initial;

}

Site.css:280

.text-box {

1. width: 100em;

}


I did try changing the width to 90% but the inputs still shrink way more than the headers when I resize the browser.

[Dimo]

Hello Kuangyi,

The problem shown in the attached project seems to be different from the one in the second post, so my advice was not relevant. The first CSS rule in your second post does play any role in the project.

When using server editing, the edit (and insert) rows are rendered inside a separate <table> element, which may lead to misalignment in extreme cases of resizable Grid and/or narrow columns. If this is your issue, I can suggest you to switch to Ajax binding - in this case the edit row is part of the same table as the other data rows.

On the other hand, if only the 5em width is the problem, there is no other way, but to set another more appropriate value and/or override the min/max width styles.

If you need further assistance, please provide an updated demo, which replicates your real scenario, so that I can be more specific in my suggestions.

All the best,
Dimo
the Telerik team

[Kuangyi]

Hi, the project in the OP replicates our scenario.  Just uncomment out Index.cshtml's line 27-40

The grid in edit mode looks fine until it reaches a certain minimum value; if you could show me how to make the grid not resize smaller than that, then that'd be fine too.

[Dimo]

Hello Kuangyi,

There is nothing commented on the mentioned lines:

int index = 0;
for (int i = 0; i < 5; i++)
{
    columns.Template(
    @<text>
        @{
            string str = Model.rows[0].strings[index];
            index++;
            // Real app would check if edit/display mode.
            @Html.EditorFor(m => str);
        }
    </text>
    ).Title(Model.headers[i]).Width(150);
}

The resulting layout is shown in the attached screenshot. The bottom Grid layout is achieved after commenting out the width styles mentioned in my previous reply.

Even if I enable scrolling, the header and data cells from a given column, are equally wide.

Let me know if I am missing something.

Generally, in order to limit the ability of the Grid to expand and shrink horizontally, you can apply a min-width and max-width styles via HtmlAttributes or via external styles for the .t-grid CSS class.


All the best,
Dimo
the Telerik team

[Kuangyi]

Hi; sorry for the confusion, I thought I had commented out those lines that you quoted in the last post.

I did try commenting out those 2 width CSS styles, however the problem occurs in edit mode, not in display mode, please see attached.

I've managed to fix the width-problems by setting the minimum-width on the grid's parent div.

I calculate this width by adding every width I set for a column (ie columns.bound().width(n), adding all the n's) and then adding 200px for the one column that has a variable width (I got this through trial/error).  I then have to make sure the widths I set for each column is longer than the minimum width allowed for the header, which is constrained by length of the header strings.  I figure this out by just taking the max header length * 10 and it seems to work fine.

Figuring out the correct min-width is a hack to me as I have to constrain the font-size to make sure nothing crazy happens.  Is there a better way of figuring out the min-width I should apply?  This is mainly a problem as I have a dynamic number of columns.

[Dimo]

Hello,

I see. Basically the problem is lack of horizontal space. Generally, in your case I would do one of the following:

1) enable Grid scrolling and set some large-enough column widths for ALL columns, OR a large-enough width to the Grid table via TableHtmlAttributes().

2) Set table-layout:fixed style to the table elements inside the Grid, so that you ensure that no matter what, the header table will align with the edit table.

.t-grid table {

    table-layout: fixed;
}

3) leave the Grid configuration as is, but set small-enough widths for all edit textboxes and components.

Kind regards,
Dimo
the Telerik team