I think I'm a bit slow here :-P
Probably I should ask how can we achieve this effect by setting CSS,
without setVerticalAlignment()?
On Tue, Jun 30, 2009 at 5:19 PM, Damien Picard <picard.dam...@gmail.com>wrote:
> 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
>
> >
>
--
Hez
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
