As you can see in the generated HTML code, the css class "my" is applied to
the DOM element "table".
Nevertheless, each "td" node of this table is applied the css style
"vertical-align" with the setted "VerticalAlignment".
And, in the XHTML/CSS definition, the style order applied is :
- "style" attribute of the node
- "class" attribute of the node
- if there is no style or class attribute, inherits from parents
Then, the style applied here is the one contained in the "style" attribute
of td node, which override the one contained in the "my" class of table
node.
Regards,
2009/6/30 hezjing <hezj...@gmail.com>
> Hi Damien
> Yes, it is working now and the following is what the HTML generated!
>
> <table class="my" cellspacing="0" cellpadding="0">
> <tbody>
> <tr>
> <td align="left" style="vertical-align: bottom;">
> <div class="big">BIG</div>
> </td>
> <td align="left" style="vertical-align: bottom;">
> <div class="small">small</div>
> </td>
> </tr>
> </tbody>
> </table>
>
>
> Hmmm ... I thought I tried
> setVerticalAlignment(HasVerticalAlignment.ALIGN_BOTTOM) too!
> I don't know what was in my head at that time!
>
>
> But I'm still don't understand why my approach doesn't work?
>
>
>
> On Tue, Jun 30, 2009 at 4:38 PM, Damien Picard <picard.dam...@gmail.com>wrote:
>
>> Hi,
>>
>> Could you try something like :
>>
>> public void onModuleLoad() {
>>
>> Label bigTitle = new Label("BIG");
>> bigTitle.setStyleName("big");
>>
>> Label smallTitle = new Label("small");
>> smallTitle.setStyleName("small");
>>
>> HorizontalPanel panel = new HorizontalPanel();
>> // this style will set vertical-align: bottom
>> *panel.setVerticalAlignment(HasVerticalAlignment.VerticalAlignmentConstant.ALIGN_BOTTOM);
>> *
>> panel.setStyleName("my");//Probably not useful (cause the classe is
>> applied to "table" DOM node instead of "td" DOM node)
>>
>> panel.add(bigTitle);
>> panel.add(smallTitle);
>>
>> RootPanel root = RootPanel.get();
>> root.add(panel);
>> }
>>
>> Regards,
>>
>> 2009/6/30 hezjing <hezj...@gmail.com>
>>
>> Hi
>>>
>>> I have a big label and a small label, and I want to "align-bottom" these
>>> labels when added in HorizontalPanel:
>>>
>>> public void onModuleLoad() {
>>>
>>> Label bigTitle = new Label("BIG");
>>> bigTitle.setStyleName("big");
>>>
>>> Label smallTitle = new Label("small");
>>> smallTitle.setStyleName("small");
>>>
>>> HorizontalPanel panel = new HorizontalPanel();
>>> // this style will set vertical-align: bottom
>>> panel.setStyleName("my");
>>>
>>> panel.add(bigTitle);
>>> panel.add(smallTitle);
>>>
>>> RootPanel root = RootPanel.get();
>>> root.add(panel);
>>> }
>>>
>>>
>>> and here is my CSS:
>>>
>>> .my {
>>> vertical-align: bottom;
>>> background: yellow;
>>> }
>>>
>>> .big {
>>> font-size: 15px;
>>> font-weight: bold;
>>> background: red;
>>> }
>>>
>>> .small {
>>> font-size: xx-small;
>>> background: blue;
>>> }
>>>
>>>
>>> The problem is the smallTitle is always top aligned.
>>>
>>>
>>> The following is what I observed in Firebug, and it seems that both
>>> labels are set to style="vertical-align: top"
>>>
>>> <table class="my" cellspacing="0" cellpadding="0">
>>> <tbody>
>>> <tr>
>>> <td align="left" style="vertical-align: top;">
>>> <div class="big">BIG</div>
>>> </td>
>>> <td align="left" style="vertical-align: top;">
>>> <div class="small">small</div>
>>> </td>
>>> </tr>
>>> </tbody>
>>> </table>
>>>
>>>
>>> It doesn't help if I
>>> panel.setVerticalAlignment(HasVerticalAlignment.ALIGN_BOTTOM).
>>>
>>> How can I align the labels to the bottom of HorizontalPanel?
>>>
>>>
>>> --
>>>
>>> Hez
>>>
>>>
>>>
>>
>>
>> --
>> Damien Picard
>> Open Source BPM : http://code.google.com/p/osbpm
>>
>>
>>
>
>
> --
>
> Hez
>
> >
>
--
Damien Picard
Open Source BPM : http://code.google.com/p/osbpm
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
To post to this group, send email to Google-Web-Toolkit@googlegroups.com
To unsubscribe from this group, send email to
google-web-toolkit+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/Google-Web-Toolkit?hl=en
-~----------~----~----~----~------~----~------~--~---
