Forums Ultimate UI for ASP.NET Web Forms
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Boyd Petrie
205
Right Align Headers, Footer, and Cell Data don't line up
posted

I've applied right-align styling to the header, footer, and cells of a grid (currency values, so it lines up better right-aligned). However, the cell data is skewed off from the header and footer alignments. I've used CSS to align the header and footers, but what I've noticed is that the header and footer use a static width value (e.g. 1040px) while the table containing the cell data uses a percentage (100%). I don't know if this is what causes the misalignment, but no amount of CSS I've attempted has helped.

<ig:BoundDataField Header-Text="121-180" DataFieldName="121-180" Key="121-180" CssClass="igCellsAlignRight" Header-CssClass="igHeaderAlignRight" Footer-CssClass="igHeaderAlignRight" DataFormatString="{0:c}" Width="10%" >
<Header Text="121-180" CssClass="alignRight"></Header></ig:BoundDataField>

<ig:BoundDataField Header-Text="180+" DataFieldName="180+" Key="180+" CssClass="igCellsAlignRight" Header-CssClass="igHeaderAlignRight" Footer-CssClass="igHeaderAlignRight" DataFormatString="{0:c}" Width="10%" >
<Header Text="180+" CssClass="alignRight"></Header></ig:BoundDataField>

<ig:BoundDataField Header-Text="Balance" DataFieldName="Balance" Key="Balance" CssClass="igCellsAlignRight" Header-CssClass="igHeaderAlignRight" Footer-CssClass="igHeaderAlignRight" DataFormatString="{0:c}" Width="10%" >
<Header Text="Balance" CssClass="alignRight"></Header></ig:BoundDataField>

CSS:

tbody>tr>th.igHeaderAlignRight
{
text-align: right;
}
tbody>tr>td.igCellsAlignRight{
text-align: right;
}

See the attachment for the results. The right alignment of the cells doesn't match the right alignment of the header and footer. Visually, this is very jarring.

Parents
  • 205
    Offline posted

    <ig:WebDataGrid ID="wdgAR" runat="server" Width="100%" ShowFooter="True" AutoGenerateColumns="False" OnInitializeRow="wdgAR_InitializeRow">
    <Behaviors>
    <ig:Selection CellClickAction="Row" RowSelectType="Single">
    </ig:Selection>
    <ig:Activation>
    </ig:Activation>

    </Behaviors>
    <Columns>

    <ig:BoundDataField Header-Text="121-180" DataFieldName="121-180" Key="121-180" CssClass="igCellsAlignRight" Header-CssClass="igHeaderAlignRight" Footer-CssClass="GridFooter" DataFormatString="{0:c}" Width="10%" >
    <Header Text="121-180"></Header></ig:BoundDataField>
    <ig:BoundDataField Header-Text="180+" DataFieldName="180+" Key="180+" CssClass="igCellsAlignRight" Header-CssClass="igHeaderAlignRight" Footer-CssClass="GridFooter" DataFormatString="{0:c}" Width="10%" >
    <Header Text="180+"></Header></ig:BoundDataField>
    <ig:BoundDataField Header-Text="Balance" DataFieldName="Balance" Key="Balance" CssClass="igCellsAlignRight" Header-CssClass="igHeaderAlignRight" Footer-CssClass="GridFooter" DataFormatString="{0:c}" Width="10%" >
    <Header Text="Balance"></Header></ig:BoundDataField>
    </Columns>
    </ig:WebDataGrid>

    I noticed my initial post had an extra CSS reference inside the <Header> tags. I removed those, but it didn't affect the outcome. I'd edit the post, but apparently you can't.

Reply Children