.my td
{
vertical-align: bottom !important;
}
Ian
http://examples.roughian.com
2009/6/30 Damien Picard <[email protected]>
> 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 <[email protected]>
>
>> 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
>> <[email protected]>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 <[email protected]>
>>>
>>>> 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 <[email protected]
>>>> > 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 <[email protected]>
>>>>>
>>>>> 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 [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/Google-Web-Toolkit?hl=en
-~----------~----~----~----~------~----~------~--~---
