Applying CSS to an ImageField in a GridView

Question

User1062069858 posted

I have 3 small images being displayed in my GridView. One image is too tall for a row and so the row height is bigger then I would like it to be. Of course CSS is the answer. And before the adapters, I had a solution that worked (shorten for your viewing pleasure).

<asp:GridView ID="GridView1" runat="server" DataSourceID="ObjectDataSource1" OnRowDataBound="GridView1_RowDataBound" EnableViewState="false" CssClass="GridView">
<Columns>
<asp:ImageField ... ControlStyle-CssClass="GridView-ControlStyle" />

This creates a nice tag like <img class="GridView-ControlStyle" ... />

But when I switched to the adapters, my ControlStyle CSS specification was lost. I tried doing something like

.GridView table tbody tr td image
{
    height:32px;
}

but this doesn't work because I have other images in other columns of the GridView.

 

So is there a solution to this? Is this a bug? Or am I missing something?

Thanks.

Answer 1

User1754323106 posted

adapater shouldn't effect the control inside i'd think? as it has nothign to do with the adapater...  I never used "controlStyle-cssclass".. what if you just try CssClass?

 

Answer 2

User1062069858 posted
CssClass cannot be set from ImageField in a GridView. In said ImageField, ItemStyle-CssClass sets the style for the <td> element, ControlStyle-CssClass sets the style for the <img> tag.

Answer 3

User-1385398420 posted
You could make a version of the image that is of the appropriate height and use that image in your GridView. Relying on CSS to resize an image is generally preferable to having the image the size you want in the first place.

Answer 4

User1062069858 posted

I get my image URLs from an external source and do not store a local copy. Given that, I have no control over the image size. So while you present a possibly reasonable workaround for some developers, it isn't one that I can execute and more importantly, it's a workaround, not a solution.

BTW: It also strips the HeaderStyle-CssClass and the FooterStyle-CssClass. HeaderStyle-CssClass is useful to me if I want to have one header cell look different than the others because it is sortable.

Answer 5

User1754323106 posted
what you can do is to use a templateField and inside the templatefield, use a regular asp:image with the css you want. that ought to fix it.

Answer 6

User-476270201 posted

 Hi,

 

I see this is a rather old post but this is the correct sollution

<asp:ImageField ControlStyle-CssClass="img" />