So simply...
I'm sorry hezjing to don't have think about "!important".
(It permits to force the rule to apply instead of cascading mechanism...)
2009/6/30 Ian Bambury <ianbamb...@gmail.com>
>
> .my td
> {
> vertical-align: bottom !important;
> }
>
> Ian
>
> http://examples.roughian.com
>
>
> 2009/6/30 Damien Picard <picard.dam...@gmail.com>
>
> 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
>>
>>
>>
>
> >
>
--
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
-~----------~----~----~----~------~----~------~--~---
