How to align the labels to the bottom of HorizontalPanel?
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=bigBIG/div
/td
td align=left style=vertical-align: top;
div class=smallsmall/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
--~--~-~--~~~---~--~~
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 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=bigBIG/div
/td
td align=left style=vertical-align: top;
div class=smallsmall/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
--~--~-~--~~~---~--~~
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!
table class=my cellspacing=0 cellpadding=0
tbody
tr
td align=left style=vertical-align: bottom;
div class=bigBIG/div
/td
td align=left style=vertical-align: bottom;
div class=smallsmall/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.comwrote:
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=bigBIG/div
/td
td align=left style=vertical-align: top;
div class=smallsmall/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
--~--~-~--~~~---~--~~
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 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=bigBIG/div
/td
td align=left style=vertical-align: bottom;
div class=smallsmall/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.comwrote:
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=bigBIG/div
/td
td align=left style=vertical-align: top;
div class=smallsmall/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
--~--~-~--~~~---~--~~
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 picard.dam...@gmail.comwrote:
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=bigBIG/div
/td
td align=left style=vertical-align: bottom;
div class=smallsmall/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.comwrote:
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=bigBIG/div
/td
td align=left style=vertical-align: top;
div class=smallsmall/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
--~--~-~--~~~---~--~~
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 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.comwrote:
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=bigBIG/div
/td
td align=left style=vertical-align: bottom;
div class=smallsmall/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.comwrote:
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=bigBIG/div
/td
td align=left style=vertical-align: top;
div class=smallsmall/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
-~--~~~~--~~--~--~---
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 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.comwrote:
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=bigBIG/div
/td
td align=left style=vertical-align: bottom;
div class=smallsmall/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=bigBIG/div
/td
td align=left style=vertical-align: top;
div class=smallsmall/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
-~--~~~~--~~--~--~---
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 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.comwrote:
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=bigBIG/div
/td
td align=left style=vertical-align: bottom;
div class=smallsmall/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=bigBIG/div
/td
td align=left style=vertical-align: top;
div class=smallsmall/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
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 picard.dam...@gmail.comwrote:
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=bigBIG/div
/td
td align=left style=vertical-align: bottom;
div class=smallsmall/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=bigBIG/div
/td
td align=left style=vertical-align: top;
div class=smallsmall/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
