Group text alignment

[Darren]

For some reason the grouping text is not aligned properly and I can't figure out why. The text is shifting up. I attached an image of what is happening, and here is the grid definition for the first grid. Can someone please advise on what I can do? Thanks!

<telerik:RadGrid ID="rgSelections" runat="server" AllowPaging="False" AllowSorting="False"
                        AllowMultiRowSelection="false" AutoGenerateColumns="False"
                        HorizontalAlign="NotSet" AllowAutomaticDeletes="False" AllowAutomaticInserts="False"
                        AllowAutomaticUpdates="false" AllowFilteringByColumn="false" ShowGroupPanel="False"
                        Skin="Metro" Height="800">
                        <ClientSettings ReorderColumnsOnClient="false" AllowDragToGroup="false" AllowColumnsReorder="false"
                            AllowRowsDragDrop="false">
                            <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="true" ScrollHeight="800px">
                            </Scrolling>
                            <Selecting AllowRowSelect="true"></Selecting>
                            <Resizing AllowRowResize="False" AllowColumnResize="False" EnableRealTimeResize="False">
                            </Resizing>
                            <ClientEvents OnRowMouseOver="onRowMouseOver" />
                        </ClientSettings>
                        <MasterTableView DataKeyNames="SlotCode" GridLines="None" AllowMultiColumnSorting="True"
                            AutoGenerateColumns="False" HorizontalAlign="NotSet" CommandItemDisplay="Top"
                            GroupLoadMode="Client">
                            <GroupByExpressions>
                                <telerik:GridGroupByExpression>
                                    <SelectFields>
                                        <telerik:GridGroupByField FieldAlias="ClassDate" FieldName="ClassDate" FormatString="{0:dddd MMMM d}"
                                            HeaderText="Date"></telerik:GridGroupByField>
                                    </SelectFields>
                                    <GroupByFields>
                                        <telerik:GridGroupByField FieldName="ClassDate" SortOrder="Ascending"></telerik:GridGroupByField>
                                    </GroupByFields>
                                </telerik:GridGroupByExpression>
                            </GroupByExpressions>
                            <Columns>
                                <telerik:GridBoundColumn UniqueName="ClassDate" SortExpression="ClassDate" HeaderText="Date"
                                    DataField="ClassDate" DataFormatString="{0:M/dd}" Display="false">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn UniqueName="StartTime" SortExpression="StartTime" HeaderText="Start"
                                    DataField="StartTime" DataFormatString="{0:hh:mm tt}" ItemStyle-Width="60px"
                                    HeaderStyle-Width="60px" ItemStyle-Wrap="false">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn UniqueName="ClassTitleFull" SortExpression="ClassTitleFull"
                                    HeaderText="Class" DataField="ClassTitleFull" ItemStyle-Width="100%" HeaderStyle-Width="100%">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn UniqueName="Seg" SortExpression="Seg" HeaderText="Segment"
                                    DataField="Seg" ItemStyle-Width="60px" HeaderStyle-Width="60px">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn HeaderText="ClassSchedulingID" DataField="ClassSchedulingID"
                                    SortExpression="ClassSchedulingID" UniqueName="ClassSchedulingID" Display="False">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn UniqueName="SlotCode" SortExpression="SlotCode" HeaderText="SlotCode"
                                    DataField="SlotCode" Display="False">
                                </telerik:GridBoundColumn>
                                <telerik:GridButtonColumn UniqueName="Remove" CommandName="Remove" ButtonType="ImageButton"
                                    ImageUrl="images/delete.gif" ItemStyle-Width="30px" HeaderStyle-Width="30px">
                                </telerik:GridButtonColumn>
                            </Columns>
                            <ExpandCollapseColumn Resizable="False" Visible="False">
                                <HeaderStyle Width="20px" />
                            </ExpandCollapseColumn>
                            <RowIndicatorColumn ItemStyle-Width="0px" HeaderStyle-Width="0px" />
                            <CommandItemTemplate>
                            </CommandItemTemplate>
                        </MasterTableView>
                    </telerik:RadGrid>

[Kostadin]

Hi Darren,

I was not able to reproduce the issue. I prepared a small sample based on your code and attached it to this forum post. Could you please give it a try and let me know how it behaves on your end?

Kind regards,
Kostadin
the Telerik team

[Darren]

I will try it out shortly and let you know. Is there a way to use css to force a margin or something to make it line up? Thanks.

[Darren]

I found that the issue is that I am using a CSS Reset, and the following was the culprit:

vertical-align: baseline

Is there a way to still use my reset but override the grouping css style?

Thanks!

[Kostadin]

Hello,

Could you please try the following CSS rule and let me know about the result?

.RadGrid .rgGroupHeader td div div div {
    margin-top: 15px;
}

All the best,
Kostadin
the Telerik team