Column width on webgrid lost after postback

Question

I have a very simple webgrid with 3 columns:

View

            columns: grid.Columns(
        grid.Column("Applicant Name",
        format: (item) => @Html.ActionLink((string)item.Name, "EditApplicant", "Applicant", new { id = item.ApplicantId },
                 null), style: "AppName")
                 , grid.Column("Role", "Role", style: "Role") 
        , grid.Column("ApplicantSkills", "Skills", style: "AppSkills")

I want to set my columns to a fixed width. I have tried using percentage widths here and exact widths like 500px, 100px etc, and they all work initially, but are lost after postback.

css:

.AppSkills {
    width: 70%;
}
.AppName {
    width: 20%;
}

.Role {
    width: 10%;
}

My grid is a results grid, which is populated from a number of filters, so every time the user selects different filters and clicks search the results are changed and the grid re-populated. What im finding is the grid column width style is being lost. Here is what my screen looks like. Initially it looks fine, but after selecting different filters and hitting search, the grid column widths are lost.

enter image description here

I have tried posting my form as a GET and a POST to see if it was the Get that was losing the formatting. But both yield the same results.

  @using (Html.BeginForm("Search", "Home", FormMethod.Post))
        {

Is there anything obvious I'm doing wrong here? Or is there any way I can ensure a fixed width on my grid columns so they don't move about?

the css you show is tied to a class. The widths being lost implies that the class is being lost from the grid. If you look at the grid after postback do you still see the classes? — Matt Bodily, May 09 '14 at 17:31
Hi Matt, thanks for the reply, good point , yes i checked with the developer tools after page was posted and the style was still applied, this is why im really confused. — Alicia, May 12 '14 at 09:31

score 0 · Answer 1 · answered May 11 '14 at 23:56

Make sure that after postback that the grids still have the classes applied to them.

Also, please post the HTML for us to view so we can diagnose the problem since we are not to sure if they are styled divs or a table.

If it is a table, try running the following CSS. Basically, it will target the columns individually without class names, just in case the classes are lost during postback.

td:nth-child(3) {
    width: 70%;      /* targeting the skills column */
}
td:nth-child(1) {
    width: 20%;      /* targeting the name column */
}
td:nth-child(2) {
    width: 10%;      /* targeting the role column */
}

score 0 · Accepted Answer · answered May 12 '14 at 09:32

0

You're missing spaces after the commas, so it's probably treating one of the entries as a big unbreakable word. If you can't change the underlying data, assuming it isn't the code doing the concatenation, you might be able to use the css word-break property to sort it.

answered May 12 '14 at 09:32

Eoin Connolly

150
7

I can see what you mean, i checked the data in my skills column and for one entry it was really long string with no spaces so the style couldn't be applied to this particular field and so pushed the column width out. Thanks for this, i wasted a lot of time on this and i wouldn't have thought of checking for that. – Alicia May 12 '14 at 09:43

Column width on webgrid lost after postback

2 Answers2