In our WHDG we have several columns that contain ImageButtons. Those buttons are contained in TemplateDataFields. The WHDG renders perfectly in both Firefox and IE, but when we render the same page in either Safari or Chrome there is a problem.
What happens is that the images seem to have shifted all the way to the right and only a sliver of the image can be seen, if at all. How can we make sure that we can see the whole image, instead of just a small part of it.
Tweaking with the size of the button seems to help, but then the buttons get much larger than intended, so that is hardly a valid solution.
HI dvanmil,
What exactly is your template for the item? If you can attach a working sample showing this problem, we can check it out. It could just be a styling issue. Maybe trying messing with the padding, margin, or float-left on the template's image button.
regards,David Young
This is the code we use for the WHDG in our project. I am sorry that I can't provide any sample data right now, but I hope the code of the grid might be enough information for you to see if anything we are doing might be causing this effect in Chrome and Safari. (We are using version 10.3 of the WHDG).
<ig:WebHierarchicalDataGrid ID="WarningWebHierarchicalDataGrid" runat="server" Height="600px" DataKeyFields="PersonID" InitialDataBindDepth="1" StyleSetName="Default" AutoGenerateBands="False" AutoGenerateColumns="False" EnableAjax="true"> <Columns> <ig:TemplateDataField Key="EditPersonButton" Width="10px"> <ItemTemplate> <asp:ImageButton ID="EditPersonImageButton" runat="server" ImageUrl="~/Resources/Edit.png" Visible='<%# DataBinder.Eval(CType(Container, Infragistics.Web.UI.TemplateContainer).DataItem, "Editable") %>' CommandArgument='<%# DataBinder.Eval(CType(Container, Infragistics.Web.UI.TemplateContainer).DataItem, "PersonID") %>' ToolTip="Bewerk persoon" CausesValidation="false" /> </ItemTemplate> </ig:TemplateDataField> <ig:TemplateDataField Key="AddButton" Width="10px"> <ItemTemplate> <asp:ImageButton ID="AddImageButton" runat="server" ImageUrl="~/Resources/Add.png" CommandArgument='<%# DataBinder.Eval(CType(Container, Infragistics.Web.UI.TemplateContainer).DataItem, "PersonID") %>' ToolTip="Voeg opmerking toe" CausesValidation="false" /> </ItemTemplate> </ig:TemplateDataField> <ig:BoundDataField DataFieldName="FullName" Key="FullName"> <Header Text="Naam" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="Address" Key="Address"> <Header Text="Adres" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="BSN" Key="BSN" Width="100px"> <Header Text="BSN" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="DateOfBirth" DataType="System.DateTime" Key="DateOfBirth" Width="100px"> <Header Text="Geboortedatum" /> </ig:BoundDataField> </Columns> <Bands> <ig:Band AutoGenerateColumns="False" Key="WarningBand" DataMember="Warnings"> <Columns> <ig:TemplateDataField Key="EditButton" Width="10px"> <ItemTemplate> <asp:ImageButton ID="EditImageButton" runat="server" ImageUrl="~/Resources/Edit.png" CommandArgument='<%# DataBinder.Eval(CType(Container, Infragistics.Web.UI.TemplateContainer).DataItem, "ID") %>' ToolTip="Bewerk opmerking" CausesValidation="false" /> </ItemTemplate> </ig:TemplateDataField> <ig:BoundDataField DataFieldName="StartDate" DataType="System.DateTime" Key="StartDate" Width="100px"> <Header Text="Startdatum" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="EndDate" DataType="System.DateTime" Key="EndDate" Width="100px"> <Header Text="Einddatum" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="Content" Key="Content"> <Header Text="Inhoud" /> </ig:BoundDataField> <ig:TemplateDataField Key="WarningPopUpButton" Width="10px"> <ItemTemplate> <asp:ImageButton ID="WarningPopUpLinkButton" runat="server" CommandArgument='<%# DataBinder.Eval(CType(Container, Infragistics.Web.UI.TemplateContainer).DataItem, "ID") %>' ToolTip="Toon opmerking" CausesValidation="false" ImageUrl="~/Resources/MagnifyingGlass.png" /> </ItemTemplate> </ig:TemplateDataField> <ig:TemplateDataField Key="UrgentField" Width="10px"> <ItemTemplate> <asp:Image ID="Image1" runat="server" ImageUrl="~/Resources/ExclamationMark.png" Visible='<%# DataBinder.Eval(CType(Container, Infragistics.Web.UI.TemplateContainer).DataItem, "Urgent") %>' /> </ItemTemplate> </ig:TemplateDataField> </Columns> </ig:Band> </Bands> <Behaviors> <ig:Selection CellClickAction="Row" RowSelectType="Single"> </ig:Selection> <ig:Sorting Enabled="true" EnableInheritance="true"> </ig:Sorting> </Behaviors> </ig:WebHierarchicalDataGrid>
Hi,
I am sort of seeing what you're describing, but I had to use my picture as I didn't have yours. I'm thinking maybe the width of your column is too small. Or you need to apply some other style via a css class. You could try contacting Developer Support to work through this step by step.
-Dave
The images we used are 16x16 png files.
For now we increased the width of the columns to 25px and that allows us to see the whole image.