Re: How to align the labels to the bottom of HorizontalPanel?
Thanks Damien and Ian, you have been helping me a lot!
On Tue, Jun 30, 2009 at 8:45 PM, Damien Picard 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
>
>
>> .my td
>> {
>> vertical-align: bottom !important;
>> }
>>
>> Ian
>>
>> http://examples.roughian.com
>>
>>
>> 2009/6/30 Damien Picard
>>
>> 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
>>>
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 >>> > 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
>
>> Hi Damien
>> Yes, it is working now and the following is what the HTML generated!
>>
>>
>>
>>
>>
>> BIG
>>
>>
>> small
>>
>>
>>
>>
>>
>>
>> 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
>>>
>>> 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"
BIG
small
It doesn't help if I
panel.setVerticalAlignment(HasVerticalAlig
Re: How to align the labels to the bottom of HorizontalPanel?
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
>
> .my td
> {
> vertical-align: bottom !important;
> }
>
> Ian
>
> http://examples.roughian.com
>
>
> 2009/6/30 Damien Picard
>
> 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
>>
>>> 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
>>> 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
> Hi Damien
> Yes, it is working now and the following is what the HTML generated!
>
>
>
>
>
> BIG
>
>
> small
>
>
>
>
>
>
> 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
>>
>> 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"
>>>
>>>
>>>
>>>
>>>
>>> BIG
>>>
>>>
>>> small
>>>
>>>
>>>
>>>
>>>
>>>
>>> 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
Re: How to align the labels to the bottom of HorizontalPanel?
.my td
{
vertical-align: bottom !important;
}
Ian
http://examples.roughian.com
2009/6/30 Damien Picard
> 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
>
>> 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
>> 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
>>>
Hi Damien
Yes, it is working now and the following is what the HTML generated!
BIG
small
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 >>> > 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
>
> 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"
>>
>>
>>
>>
>>
>> BIG
>>
>>
>> small
>>
>>
>>
>>
>>
>>
>> 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 Goog
Re: How to align the labels to the bottom of HorizontalPanel?
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
> 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 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
>>
>>> Hi Damien
>>> Yes, it is working now and the following is what the HTML generated!
>>>
>>>
>>>
>>>
>>>
>>> BIG
>>>
>>>
>>> small
>>>
>>>
>>>
>>>
>>>
>>>
>>> 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
>>> 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
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"
>
>
>
>
>
> BIG
>
>
> small
>
>
>
>
>
>
> 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
-~--~~~~--~~--~--~---
Re: How to align the labels to the bottom of HorizontalPanel?
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 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
>
>> Hi Damien
>> Yes, it is working now and the following is what the HTML generated!
>>
>>
>>
>>
>>
>> BIG
>>
>>
>> small
>>
>>
>>
>>
>>
>>
>> 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
>> 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
>>>
>>> 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"
BIG
small
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
-~--~~~~--~~--~--~---
Re: How to align the labels to the bottom of HorizontalPanel?
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
> Hi Damien
> Yes, it is working now and the following is what the HTML generated!
>
>
>
>
>
> BIG
>
>
> small
>
>
>
>
>
>
> 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 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
>>
>> 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"
>>>
>>>
>>>
>>>
>>>
>>> BIG
>>>
>>>
>>> small
>>>
>>>
>>>
>>>
>>>
>>>
>>> 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
--~--~-~--~~~---~--~~
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
-~--~~~~--~~--~--~---
Re: How to align the labels to the bottom of HorizontalPanel?
Hi Damien
Yes, it is working now and the following is what the HTML generated!
BIG
small
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 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
>
> 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"
>>
>>
>>
>>
>>
>> BIG
>>
>>
>> small
>>
>>
>>
>>
>>
>>
>> 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
--~--~-~--~~~---~--~~
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
-~--~~~~--~~--~--~---
Re: How to align the labels to the bottom of HorizontalPanel?
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
> 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"
>
>
>
>
>
> BIG
>
>
> small
>
>
>
>
>
>
> 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
--~--~-~--~~~---~--~~
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
-~--~~~~--~~--~--~---
