How to apply css at <td> in HorizontalPanel?

[Bhumika Thaker]

Hi,

I want to make center align element in horizontal panel. Look below code. It does what I want.

HorizontalPanel hp = new HorizontalPanel();

Image attachmentImg = new Image(GWT.getModuleBaseURL()

+ "/images/attachment.png");

attachmentImg.setTitle("Attach files");

hp.setWidth("100%");

hp.setHorizontalAlignment(HasAlignment.ALIGN_CENTER);

hp.add(attachmentImg);

As I find strange behaviour in one app. "Image" is still coming left align. 

When I see in firebug, it appy the css which is for common to project.

.block table tr td, .block table tr th {

    line-height: normal;

    text-align: left; //It make align left element

}

I created new css to make !important align property like 

.center-alignment

{

 text-align:center !important;  

}

And assign to hp like

 hp.setStylePrimaryName("center-alignment");

Still coming left align image and generate html in firebug like

<table class="center-alignment" cellspacing="0" cellpadding="0" style="width: 154px;">

<tbody>

<tr>

<td align="center" style="vertical-align: top;"> <!---I want to apply this css here  but don't know how?-->

<img class="gwt-Image" src="url" title="Attach files">

</td>

</tr>

</tbody>

</table

I want to apply it on <td> level.   I am really stuck here what should I do. I can not remove that block css as I don't know impact of it.  As app is very large. If I solve issue here,  It may create other place new issue.

[Jens]

You could do

Element imageContainer = DOM.getParent(imageWidget.getElement());

imageContainer.setClassName(....); //or maybe read the old one first and append your class name before setting so you don't remove current classes.

-- J.

[Bhumika Thaker]

Hi Jens,

Thanks a lot. I tried below as you suggest.

hp.add(attachmentImg);

Element imageContainer = DOM.getParent(attachmentImg.getElement());

imageContainer.setClassName("center-alignment");

It works :) 

Thanks,

Bhumika

O