I think it is not possible, because if you don't specify a
VerticalAlignment, the default (top) is applied, with
style="vertical-alignment: top".
And there is no way in CSS to override it...
A way to cheat with it could be :
.my {
background: yellow;
}
.my div{
height: 100%;
vertical-align: bottom;
}
.big {
font-size: 15px;
font-weight: bold;
background: red;
}
.small {
font-size: xx-small;
background: blue;
}
But I'm not sure it will work
2009/6/30 hezjing <hezj...@gmail.com>
> 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
>
> >
>
--
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
-~----------~----~----~----~------~----~------~--~---
