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 -~--~~~~--~~--~--~---
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" 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 --~--~-~--~~~---~--~~ 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 -~--~~~~--~~--~--~---