Hi Please find the attached screenshot

Hi Tsanna,

As per our discussion, I hace supplied  HeaderCaptionCssClass  which has the same attribute set of other headers.But it does not make any difference in the alignment.

But the alignment found to be set fine,

When I  selected the HTML code part of the header using developer tool  ,the inline style  width is given  in  px.

When I selected the HTML code part of the data column using developer tool ,the inline style width is given in percentage.

when I reduced the width in px ,alignment became correct.

But in the aspx page , the width of all column are specified in percentage. is there any alternate to solve this issue?

Thanks,

Hello Dhaval,

When you specify the width of the columns in percentage, then the width of the header is calculated automatically through the server and is rendered in pixels. Please note also that the header and the data columns are nested in separate tables, which causes the discrepancy between them. In this case if you want to correct the alignment between the header and the data columns, then you can set a Header-CssClass to every column and set a border rule which has to be equal to the border rule in the tbody.igg_Item>tr>td default class of the grid control. For instance is attached a sample with similar scenario. If you have any further questions regarding this matter please feel free to contact me.

Sincerely,

Tsanna

Hi Tsanna,

There is already a Header-CssClass to every column and set a border rule .All the web data grid in the application uses same Header-CssClass .

The alignment is broken only for few grids.

Given below is the sample code used for the grid.Border rule is same for both header and data columns.

<LinkGrid:WebDataGrid ID="XXXX" EnableDataViewState="false" Height="0px"

OnInitializeRow="xxxx" OnItemCommand=" XXXXXX "

AltItemCssClass="docGrd_Alternate" ItemCssClass="docGrd_Row" Width="100%" AutoGenerateColumns="false"

CssClass="doc_GridStyle" runat="server" DataKeyFields="XXXX">

<Columns>

<LinkGrid:BoundDataField CssClass="docGrd_Border" DataFieldName="XXXX" DataFormatString="{0:dd-MMM-yyyy}"

Width="10%" Key="XXXX" Header-CssClass="ig_Header">

<Header Text="Date" />

</LinkGrid:BoundDataField>

<LinkGrid:BoundDataField CssClass="docGrd_Border" DataFieldName="XXXX" Width="5%"

Key="XXX" Header-CssClass="ig_Header">

<Header Text="XXXX" />

</LinkGrid:BoundDataField>

Thanks,

Hello Dhaval,

Thank you for your update. Can you please let me know if there is any specific difference between the grids on which the border is applied and the other on which it is not like  usage of master page or grids are in user control. Also does it help if you force the border with !important attribute? The class you have assigned to every column is ig_header. Is this class defined in a css file which you reference in all the pages? If so can you please confirm that this file is referenced on the pages on which you are facing visual issues. It would be also great appreciated if you can provide a working sample in order to be reproduced the actual behavior. Looking forward to hearing from you.

Sincerely,

Tsanna

i Tsanna,

The page does not use master page and grid is not inside user control.Also important attribute has been used in css class.

I have attached working sample with the css classes used in grid.

Thanks,

Hi Tsanna,

I am using IE9 browser

Thanks,

Hi Tsanna,

I am using IE9 browser.

Thanks,

Hello Dhaval,

Could you please provide me information about under which browser/browser mode/browser version you're facing this issue in order we are able to reproduce it. Looking forward to your reply.

Sincerely,

Tsanna

Hello Dhaval,

Thank you for the provided sample. I'm currently investigating this scenario and keep you posted of any available information. Please let me know for any additional questions in the meantime.

Sincerely,

Tsanna