This is a migrated thread and some comments may be shown as answers.

Gap Between Header and 1st row

1 Answer 217 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Justin
Top achievements
Rank 1
Justin asked on 05 Aug 2010, 08:07 PM
I have a RadGrid that is not using enabled themes, so I have made my own skin. This Grid looked perfect before I started making changes to that, but the customer wants it to look like previous grids.

So... there is an unexplained gap between the header row and the first data row now in my grid. (screenshot attached)
Can anyone help me figure out why, and how to close that gap?

Thanks in advance!

Here is the ASPX code:
<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" ShowGroupPanel="false" ShowStatusBar="false" EnableViewState="false" GridLines="Both" ShowFooter="false" EnableEmbeddedSkins="false" SkinID="radgridSkin" OnItemDataBound="RadGrid1_OnDataBound" OnPreRender="RadGrid1_PreRender">
  <MasterTableView EnableColumnsViewState="false" Width="100%" TableLayout="Auto" >
  <Columns>
  <telerik:GridBoundColumn DataField="TaxonName" HeaderText="Taxon" ItemStyle-Wrap="false" HeaderStyle-BorderWidth="0px" >
  </telerik:GridBoundColumn>
  <telerik:GridBoundColumn DataField="StrainNumber" HeaderText="Strain #" ItemStyle-Wrap="false" HeaderStyle-BorderWidth="0px">
  </telerik:GridBoundColumn>
  </Columns>
  </MasterTableView>
<HeaderStyle Wrap="true" BorderStyle="Solid" BorderWidth="1px" BorderColor="SlateGray" />
<ClientSettings>
  <Selecting AllowRowSelect="true" />
  <Scrolling AllowScroll="True" ScrollHeight="500px" FrozenColumnsCount="2" UseStaticHeaders="true" />
</ClientSettings>
</telerik:RadGrid>

Here is the Skin Code:
<telerik:RadGrid  runat="server" ShowGroupPanel="false" ShowStatusBar="false" SkinId="radgridSkin" ItemStyle-BackColor="GhostWhite" AlternatingItemStyle-BackColor="LightGray" HeaderStyle-BackColor="Transparent" HeaderStyle-Font-Bold="true" AlternatingItemStyle-CssClass="dgRow" ItemStyle-Height="28px" AlternatingItemStyle-Height="28px" ItemStyle-CssClass="dgRow" ItemStyle-BorderColor="LightSlateGray" ItemStyle-BorderStyle="Solid" ItemStyle-BorderWidth="1px" AlternatingItemStyle-BorderColor="LightSlateGray" AlternatingItemStyle-BorderStyle="Solid"  AlternatingItemStyle-BorderWidth="1px">
</telerik:RadGrid>

Here is the CSS Code:
.dgRow{}
.dgRow td
{
    height: 31px;
    padding: 0px 0px 0px 2px;
    border: solid 1px LightSlateGray;
}
TABLE.dgRow th
{
    padding-left:4px;
    padding-right:4px;
    padding-bottom:4px;
    max-height:60px;
    vertical-align:bottom;
    white-space:nowrap;
    text-align:left;
}

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 10 Aug 2010, 01:08 PM
Hi Justin,

The spacing is probably caused by margin or padding CSS styles in your web page, which are inherited by RadGrid. Please check for margin styles for <table>s and padding styles for <div>s. You can use Firebug for that.

If you need further assistance, please send a full runnable page, which reproduces the problem.

Greetings,
Dimo
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
Grid
Asked by
Justin
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or