Thanks Damien and Ian, you have been helping me a lot!
On Tue, Jun 30, 2009 at 8:45 PM, Damien Picard <picard.dam...@gmail.com>wrote:
> 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
>
> >
>
--
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
-~----------~----~----~----~------~----~------~--~---
