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.
Wow. I can't believe I didn't think of that. Thank you for your help!
Hello Boyd Petrie,
Thanks for posting in our community!
The right shifting is cause by the padding of the cells which is 5px. If you want to align cells with footers and headers, then change CSS to:
tbody>tr>th.igHeaderAlignRight { text-align: right; padding-right: 5px; }
-OR-
tbody>tr>td.igCellsAlignRight { text-align: right; padding-right: 0; }
This should do the work!
<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.