C# GridView rows not vertically aligned

A recent project caused me grief until it dawned on me what the problem and the fix was. The GridView has a height property value and if it’s changed from the default (which is NULL), or to anything less than 25px (arbitrary number) you may experience an undesierable result where the GridView will vertically align the rows in the middle of the control. I did this inadvertantly, creating this undesireable result, and I wanted to share with you the fix and why does this.

GridView Middle Vertical AlignmentTo recreate the issue, follow these instructions:
* Create a new GridView control on your page
* Set the DataSoruce to an ObjectSource control (there is more work to do here, but won’t be explained here)
* Set the GridView height to 100px (arbitrary number), or resize it in height to be at least this number; again, this is a high arbitrary number for maximum visual effect. If it’s any smaller in height, you may not see the dramatic effect.
* Add ONE and only ONE row to the ObjectSource
* You will see that the GridView vertically aligns the row to the middle of the control.

GridView Top Vertical AlignmentTo fix the issue, do this:
* remove the Height value in the property

This situation presents itself when the Height property of the grid has been changed. Either by changing the Height property or resizing the height of the control. If it changes to a large value, more rows will be spaced apart. If you it’s a small number, then you probably haven’t experienced this problem, but could when you don’t add large values.

By default, there is no Height value so the problem doesn’t present itself. In my situation, I placed a GridView on my form inside of a Panel with a Vertical scroll on so I can scroll through the gridview rows. There are, I’m sure, other ways to accomplish this, but it was all that was required for the project.

When adding 5 or more rows to the GridView ObjectSource the rows were their optimal height and top-aligned. However, if I add 5 or less rows, the rows are expanded in height and are spread evenly across the height of the GridView. Especially when there is only one row … the row will show in the middle of the GridView vertically. I want it to be top-aligned. I tried everhthing, I changed properties, I added CSS styles and alignment attributes, but nothing changed the effect.

It dawned on me that the rows were expanding to fill the vertical height of the GridView. I checked the Height property and it was set to 88px (bolded to show that it wasn’t the default value). I changed it to 1px (again bolded, so I knew it wasn’t the default) and the problem went away. But knowing this wasn’t the default, I could possibly run in to other problems. I then assumed that a NULL Height value was the default. I erased any value in the Height property, tried it again, and it worked. I have thus left it at this value.

Lesson learned, when I created the control in the first place, I resized the GridView to fill the expanse of the Panel in it’s width and height. The Height property was set and the grid was trying to fill the height of the control automatically. An undesireable effect.

You may want this effect to exist, but just know it happens so it’s done on purpose and not by accident.

Leave a Reply

%d bloggers like this: