Re: svn commit: r661096 - /ofbiz/trunk/framework/widget/
Locked
Re: svn commit: r661096 - /ofbiz/trunk/framework/widget/
 
|
hi adrian,
with this change you reverted my earlier change. The reason i put this change in is to be able to use the menu in a column. can you please have a look at the sfa application? there the menu causes the right form to be under the left hand form.... can you have a look at that? Regards, Hans On Wed, 2008-05-28 at 21:29 +0000, [hidden email] wrote: > Author: adrianc > Date: Wed May 28 14:29:05 2008 > New Revision: 661096 > > URL: http://svn.apache.org/viewvc?rev=661096&view=rev > Log: > Oops, missed one file in last commit. > > Modified: > ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java > > Modified: ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java > URL: http://svn.apache.org/viewvc/ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java?rev=661096&r1=661095&r2=661096&view=diff > ============================================================================== > --- ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java (original) > +++ ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java Wed May 28 14:29:05 2008 > @@ -259,7 +259,7 @@ > //String menuContainerStyle = modelMenu.getMenuContainerStyle(context); > buffer.append(" </ul>"); > appendWhitespace(buffer); > - buffer.append(" <br/>"); > + buffer.append(" <br class=\"clear\"/>"); > appendWhitespace(buffer); > buffer.append("</div>"); > appendWhitespace(buffer); > > > AntWebsystems.com: Quality OFBiz services for competitive rates..... |
Re: svn commit: r661096 - /ofbiz/trunk/framework/widget/
|
Hans,
Please give me a link and I will take a look at it. -Adrian Hans Bakker wrote: > hi adrian, > > with this change you reverted my earlier change. > > The reason i put this change in is to be able to use the menu in a > column. can you please have a look at the sfa application? there the > menu causes the right form to be under the left hand form.... > > can you have a look at that? > > Regards, > Hans > > > > On Wed, 2008-05-28 at 21:29 +0000, [hidden email] wrote: >> Author: adrianc >> Date: Wed May 28 14:29:05 2008 >> New Revision: 661096 >> >> URL: http://svn.apache.org/viewvc?rev=661096&view=rev >> Log: >> Oops, missed one file in last commit. >> >> Modified: >> ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java >> >> Modified: ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java >> URL: http://svn.apache.org/viewvc/ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java?rev=661096&r1=661095&r2=661096&view=diff >> ============================================================================== >> --- ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java (original) >> +++ ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java Wed May 28 14:29:05 2008 >> @@ -259,7 +259,7 @@ >> //String menuContainerStyle = modelMenu.getMenuContainerStyle(context); >> buffer.append(" </ul>"); >> appendWhitespace(buffer); >> - buffer.append(" <br/>"); >> + buffer.append(" <br class=\"clear\"/>"); >> appendWhitespace(buffer); >> buffer.append("</div>"); >> appendWhitespace(buffer); >> >> >> |
Re: svn commit: r661096 - /ofbiz/trunk/framework/widget/
|
|
In reply to this post by hans_bakker
Hans,
I put an example of how to fix this problem in the Find Accounts screen. You just need to make the same change to the other screens. Check out the new CSS style: no-clear. There is something I would like to mention on this subject so that it is on record: The developer community decided over a year ago to work on creating simpler HTML markup. The phrase used at the time was "CSS Zen Garden Like." We agreed upon some HTML element compounds that would be used to construct screens, and styled those HTML compounds accordingly. The result was dramatic - just compare the markup of the most recent trunk with a revision around January 2007. Since that decision, nearly the entire UI has been built around those HTML compounds. The screen widgets were changed to emit those compounds. The end result from the user's perspective is a layout that "flows" - HTML elements move around when the user resizes their screen or default font. The downside to this approach is that sometimes things don't land where we want them to. If that happens, the correct course of action is to understand why and change how we lay out the screen. Sometimes a CSS style change is needed. Mucking around with the screen widgets to output different HTML compounds is a bad idea. In this case, changing the widget code fixed the SFA screens, but at the expense of breaking the layout in most of the other components. (There will always be problems associated with setting up multi-column screens. If OFBiz took the "pixel perfect" approach and put everything in fixed positions on the screen, it would be much easier.) Having said that, let's analyze the SFA screens you are struggling with... The problem is the horizontal menu in the right column is causing the HTML elements below it to drop down to the bottom of the screen. Let's figure out why. Screen widget menus are unordered lists ( <ul> elements ) - which is a common practice. An unordered list is vertical by default, but we can make it horizontal by using some CSS magic - we float the line items in the list. The floated line items have to be "cleared" or else other HTML elements will "spill into" them. That is the purpose of the <br class="clear"/> element. Its effect is to block any other HTML elements from appearing to the right or left of the menu - which keeps them from "spilling into" it. This method works great if there are no columns. Inside a column, this method prevents HTML elements from appearing to the left or right of the unordered list - which (in the HTML markup) has appeared AFTER the left column. Oops, all remaining HTML elements will now be rendered below the left column. That's not what we wanted. Removing the <br class="clear"/> is a tempting fix, but as I said, all other menus will now have HTML elements spilling into them. The correct approach (the one that I mentioned in an earlier email) is to disable the clearing effect on this menu only: <style type="text/css"> .no-clear .clear { clear: none; } </style> <div class="no-clear"> <!-- menu widget code here --> ... </div> Inline styles aren't possible using screen widgets, so I put the no-clear CSS class in the maincss.css file. (On a side note, I despise having to create CSS classes to fix things like this, but sometimes it has to be done.) Now the no-clear style can be added to the menu container style: <menu name="AccountSubTabBar" menu-container-style="button-bar button-style-2 no-clear" default-selected-style="selected"> Tah-dah! Problem solved without changing the widget code. -Adrian Hans Bakker wrote: > hi adrian, > > with this change you reverted my earlier change. > > The reason i put this change in is to be able to use the menu in a > column. can you please have a look at the sfa application? there the > menu causes the right form to be under the left hand form.... > > can you have a look at that? > > Regards, > Hans > > > > On Wed, 2008-05-28 at 21:29 +0000, [hidden email] wrote: >> Author: adrianc >> Date: Wed May 28 14:29:05 2008 >> New Revision: 661096 >> >> URL: http://svn.apache.org/viewvc?rev=661096&view=rev >> Log: >> Oops, missed one file in last commit. >> >> Modified: >> ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java >> >> Modified: ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java >> URL: http://svn.apache.org/viewvc/ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java?rev=661096&r1=661095&r2=661096&view=diff >> ============================================================================== >> --- ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java (original) >> +++ ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java Wed May 28 14:29:05 2008 >> @@ -259,7 +259,7 @@ >> //String menuContainerStyle = modelMenu.getMenuContainerStyle(context); >> buffer.append(" </ul>"); >> appendWhitespace(buffer); >> - buffer.append(" <br/>"); >> + buffer.append(" <br class=\"clear\"/>"); >> appendWhitespace(buffer); >> buffer.append("</div>"); >> appendWhitespace(buffer); >> >> >> |
Re: svn commit: r661096 - /ofbiz/trunk/framework/widget/
|
|
Thank you Adrian for the extensive explanation. I implemented it in the
sfa manager.... Regards, Hans On Fri, 2008-05-30 at 09:50 -0700, Adrian Crum wrote: > Hans, > > I put an example of how to fix this problem in the Find Accounts screen. > You just need to make the same change to the other screens. Check out > the new CSS style: no-clear. > > There is something I would like to mention on this subject so that it is > on record: > > The developer community decided over a year ago to work on creating > simpler HTML markup. The phrase used at the time was "CSS Zen Garden > Like." We agreed upon some HTML element compounds that would be used to > construct screens, and styled those HTML compounds accordingly. > > The result was dramatic - just compare the markup of the most recent > trunk with a revision around January 2007. > > Since that decision, nearly the entire UI has been built around those > HTML compounds. The screen widgets were changed to emit those compounds. > > The end result from the user's perspective is a layout that "flows" - > HTML elements move around when the user resizes their screen or default > font. > > The downside to this approach is that sometimes things don't land where > we want them to. If that happens, the correct course of action is to > understand why and change how we lay out the screen. Sometimes a CSS > style change is needed. Mucking around with the screen widgets to output > different HTML compounds is a bad idea. In this case, changing the > widget code fixed the SFA screens, but at the expense of breaking the > layout in most of the other components. > > (There will always be problems associated with setting up multi-column > screens. If OFBiz took the "pixel perfect" approach and put everything > in fixed positions on the screen, it would be much easier.) > > Having said that, let's analyze the SFA screens you are struggling with... > > The problem is the horizontal menu in the right column is causing the > HTML elements below it to drop down to the bottom of the screen. Let's > figure out why. > > Screen widget menus are unordered lists ( <ul> elements ) - which is a > common practice. An unordered list is vertical by default, but we can > make it horizontal by using some CSS magic - we float the line items in > the list. The floated line items have to be "cleared" or else other HTML > elements will "spill into" them. That is the purpose of the <br > class="clear"/> element. Its effect is to block any other HTML elements > from appearing to the right or left of the menu - which keeps them from > "spilling into" it. > > This method works great if there are no columns. Inside a column, this > method prevents HTML elements from appearing to the left or right of the > unordered list - which (in the HTML markup) has appeared AFTER the left > column. Oops, all remaining HTML elements will now be rendered below the > left column. That's not what we wanted. > > Removing the <br class="clear"/> is a tempting fix, but as I said, all > other menus will now have HTML elements spilling into them. The correct > approach (the one that I mentioned in an earlier email) is to disable > the clearing effect on this menu only: > > <style type="text/css"> > .no-clear .clear { > clear: none; > } > </style> > > <div class="no-clear"> > <!-- menu widget code here --> > ... > </div> > > Inline styles aren't possible using screen widgets, so I put the > no-clear CSS class in the maincss.css file. (On a side note, I despise > having to create CSS classes to fix things like this, but sometimes it > has to be done.) Now the no-clear style can be added to the menu > container style: > > <menu name="AccountSubTabBar" menu-container-style="button-bar > button-style-2 no-clear" default-selected-style="selected"> > > Tah-dah! Problem solved without changing the widget code. > > -Adrian > > > Hans Bakker wrote: > > hi adrian, > > > > with this change you reverted my earlier change. > > > > The reason i put this change in is to be able to use the menu in a > > column. can you please have a look at the sfa application? there the > > menu causes the right form to be under the left hand form.... > > > > can you have a look at that? > > > > Regards, > > Hans > > > > > > > > On Wed, 2008-05-28 at 21:29 +0000, [hidden email] wrote: > >> Author: adrianc > >> Date: Wed May 28 14:29:05 2008 > >> New Revision: 661096 > >> > >> URL: http://svn.apache.org/viewvc?rev=661096&view=rev > >> Log: > >> Oops, missed one file in last commit. > >> > >> Modified: > >> ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java > >> > >> Modified: ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java > >> URL: http://svn.apache.org/viewvc/ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java?rev=661096&r1=661095&r2=661096&view=diff > >> ============================================================================== > >> --- ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java (original) > >> +++ ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java Wed May 28 14:29:05 2008 > >> @@ -259,7 +259,7 @@ > >> //String menuContainerStyle = modelMenu.getMenuContainerStyle(context); > >> buffer.append(" </ul>"); > >> appendWhitespace(buffer); > >> - buffer.append(" <br/>"); > >> + buffer.append(" <br class=\"clear\"/>"); > >> appendWhitespace(buffer); > >> buffer.append("</div>"); > >> appendWhitespace(buffer); > >> > >> > >> > AntWebsystems.com: Quality OFBiz services for competitive rates..... |
Re: svn commit: r661096- /ofbiz/trunk/framework/widget/
Administrator
|
Yes, thanks for the clear explanation Adrian. I think I will put something in the FAQ page (about clear and no-clear usage). This is
really not obvious... Jacques From: "Hans Bakker" <[hidden email]> > Thank you Adrian for the extensive explanation. I implemented it in the > sfa manager.... > > Regards, > Hans > > > On Fri, 2008-05-30 at 09:50 -0700, Adrian Crum wrote: >> Hans, >> >> I put an example of how to fix this problem in the Find Accounts screen. >> You just need to make the same change to the other screens. Check out >> the new CSS style: no-clear. >> >> There is something I would like to mention on this subject so that it is >> on record: >> >> The developer community decided over a year ago to work on creating >> simpler HTML markup. The phrase used at the time was "CSS Zen Garden >> Like." We agreed upon some HTML element compounds that would be used to >> construct screens, and styled those HTML compounds accordingly. >> >> The result was dramatic - just compare the markup of the most recent >> trunk with a revision around January 2007. >> >> Since that decision, nearly the entire UI has been built around those >> HTML compounds. The screen widgets were changed to emit those compounds. >> >> The end result from the user's perspective is a layout that "flows" - >> HTML elements move around when the user resizes their screen or default >> font. >> >> The downside to this approach is that sometimes things don't land where >> we want them to. If that happens, the correct course of action is to >> understand why and change how we lay out the screen. Sometimes a CSS >> style change is needed. Mucking around with the screen widgets to output >> different HTML compounds is a bad idea. In this case, changing the >> widget code fixed the SFA screens, but at the expense of breaking the >> layout in most of the other components. >> >> (There will always be problems associated with setting up multi-column >> screens. If OFBiz took the "pixel perfect" approach and put everything >> in fixed positions on the screen, it would be much easier.) >> >> Having said that, let's analyze the SFA screens you are struggling with... >> >> The problem is the horizontal menu in the right column is causing the >> HTML elements below it to drop down to the bottom of the screen. Let's >> figure out why. >> >> Screen widget menus are unordered lists ( <ul> elements ) - which is a >> common practice. An unordered list is vertical by default, but we can >> make it horizontal by using some CSS magic - we float the line items in >> the list. The floated line items have to be "cleared" or else other HTML >> elements will "spill into" them. That is the purpose of the <br >> class="clear"/> element. Its effect is to block any other HTML elements >> from appearing to the right or left of the menu - which keeps them from >> "spilling into" it. >> >> This method works great if there are no columns. Inside a column, this >> method prevents HTML elements from appearing to the left or right of the >> unordered list - which (in the HTML markup) has appeared AFTER the left >> column. Oops, all remaining HTML elements will now be rendered below the >> left column. That's not what we wanted. >> >> Removing the <br class="clear"/> is a tempting fix, but as I said, all >> other menus will now have HTML elements spilling into them. The correct >> approach (the one that I mentioned in an earlier email) is to disable >> the clearing effect on this menu only: >> >> <style type="text/css"> >> .no-clear .clear { >> clear: none; >> } >> </style> >> >> <div class="no-clear"> >> <!-- menu widget code here --> >> ... >> </div> >> >> Inline styles aren't possible using screen widgets, so I put the >> no-clear CSS class in the maincss.css file. (On a side note, I despise >> having to create CSS classes to fix things like this, but sometimes it >> has to be done.) Now the no-clear style can be added to the menu >> container style: >> >> <menu name="AccountSubTabBar" menu-container-style="button-bar >> button-style-2 no-clear" default-selected-style="selected"> >> >> Tah-dah! Problem solved without changing the widget code. >> >> -Adrian >> >> >> Hans Bakker wrote: >> > hi adrian, >> > >> > with this change you reverted my earlier change. >> > >> > The reason i put this change in is to be able to use the menu in a >> > column. can you please have a look at the sfa application? there the >> > menu causes the right form to be under the left hand form.... >> > >> > can you have a look at that? >> > >> > Regards, >> > Hans >> > >> > >> > >> > On Wed, 2008-05-28 at 21:29 +0000, [hidden email] wrote: >> >> Author: adrianc >> >> Date: Wed May 28 14:29:05 2008 >> >> New Revision: 661096 >> >> >> >> URL: http://svn.apache.org/viewvc?rev=661096&view=rev >> >> Log: >> >> Oops, missed one file in last commit. >> >> >> >> Modified: >> >> ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java >> >> >> >> Modified: ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java >> >> URL: >> >> http://svn.apache.org/viewvc/ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java?rev=661096&r1=661095&r2=661096&view=diff >> >> ============================================================================== >> >> --- ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java (original) >> >> +++ ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java Wed May 28 14:29:05 2008 >> >> @@ -259,7 +259,7 @@ >> >> //String menuContainerStyle = modelMenu.getMenuContainerStyle(context); >> >> buffer.append(" </ul>"); >> >> appendWhitespace(buffer); >> >> - buffer.append(" <br/>"); >> >> + buffer.append(" <br class=\"clear\"/>"); >> >> appendWhitespace(buffer); >> >> buffer.append("</div>"); >> >> appendWhitespace(buffer); >> >> >> >> >> >> >> > -- > AntWebsystems.com: Quality OFBiz services for competitive rates..... > |
Re: svn commit: r661096- /ofbiz/trunk/framework/widget/
|
|
I'll third the appreciation Adrian, especially for being so thorough and keeping an eye on this. -David On May 31, 2008, at 10:13 AM, Jacques Le Roux wrote: > Yes, thanks for the clear explanation Adrian. I think I will put > something in the FAQ page (about clear and no-clear usage). This is > really not obvious... > > Jacques > > From: "Hans Bakker" <[hidden email]> >> Thank you Adrian for the extensive explanation. I implemented it in >> the >> sfa manager.... >> >> Regards, >> Hans >> >> >> On Fri, 2008-05-30 at 09:50 -0700, Adrian Crum wrote: >>> Hans, >>> >>> I put an example of how to fix this problem in the Find Accounts >>> screen. >>> You just need to make the same change to the other screens. Check >>> out >>> the new CSS style: no-clear. >>> >>> There is something I would like to mention on this subject so that >>> it is >>> on record: >>> >>> The developer community decided over a year ago to work on creating >>> simpler HTML markup. The phrase used at the time was "CSS Zen Garden >>> Like." We agreed upon some HTML element compounds that would be >>> used to >>> construct screens, and styled those HTML compounds accordingly. >>> >>> The result was dramatic - just compare the markup of the most recent >>> trunk with a revision around January 2007. >>> >>> Since that decision, nearly the entire UI has been built around >>> those >>> HTML compounds. The screen widgets were changed to emit those >>> compounds. >>> >>> The end result from the user's perspective is a layout that >>> "flows" - >>> HTML elements move around when the user resizes their screen or >>> default >>> font. >>> >>> The downside to this approach is that sometimes things don't land >>> where >>> we want them to. If that happens, the correct course of action is to >>> understand why and change how we lay out the screen. Sometimes a CSS >>> style change is needed. Mucking around with the screen widgets to >>> output >>> different HTML compounds is a bad idea. In this case, changing the >>> widget code fixed the SFA screens, but at the expense of breaking >>> the >>> layout in most of the other components. >>> >>> (There will always be problems associated with setting up multi- >>> column >>> screens. If OFBiz took the "pixel perfect" approach and put >>> everything >>> in fixed positions on the screen, it would be much easier.) >>> >>> Having said that, let's analyze the SFA screens you are struggling >>> with... >>> >>> The problem is the horizontal menu in the right column is causing >>> the >>> HTML elements below it to drop down to the bottom of the screen. >>> Let's >>> figure out why. >>> >>> Screen widget menus are unordered lists ( <ul> elements ) - which >>> is a >>> common practice. An unordered list is vertical by default, but we >>> can >>> make it horizontal by using some CSS magic - we float the line >>> items in >>> the list. The floated line items have to be "cleared" or else >>> other HTML >>> elements will "spill into" them. That is the purpose of the <br >>> class="clear"/> element. Its effect is to block any other HTML >>> elements >>> from appearing to the right or left of the menu - which keeps them >>> from >>> "spilling into" it. >>> >>> This method works great if there are no columns. Inside a column, >>> this >>> method prevents HTML elements from appearing to the left or right >>> of the >>> unordered list - which (in the HTML markup) has appeared AFTER the >>> left >>> column. Oops, all remaining HTML elements will now be rendered >>> below the >>> left column. That's not what we wanted. >>> >>> Removing the <br class="clear"/> is a tempting fix, but as I said, >>> all >>> other menus will now have HTML elements spilling into them. The >>> correct >>> approach (the one that I mentioned in an earlier email) is to >>> disable >>> the clearing effect on this menu only: >>> >>> <style type="text/css"> >>> .no-clear .clear { >>> clear: none; >>> } >>> </style> >>> >>> <div class="no-clear"> >>> <!-- menu widget code here --> >>> ... >>> </div> >>> >>> Inline styles aren't possible using screen widgets, so I put the >>> no-clear CSS class in the maincss.css file. (On a side note, I >>> despise >>> having to create CSS classes to fix things like this, but >>> sometimes it >>> has to be done.) Now the no-clear style can be added to the menu >>> container style: >>> >>> <menu name="AccountSubTabBar" menu-container-style="button-bar >>> button-style-2 no-clear" default-selected-style="selected"> >>> >>> Tah-dah! Problem solved without changing the widget code. >>> >>> -Adrian >>> >>> >>> Hans Bakker wrote: >>> > hi adrian, >>> > >>> > with this change you reverted my earlier change. >>> > >>> > The reason i put this change in is to be able to use the menu in a >>> > column. can you please have a look at the sfa application? there >>> the >>> > menu causes the right form to be under the left hand form.... >>> > >>> > can you have a look at that? >>> > >>> > Regards, >>> > Hans >>> > >>> > >>> > >>> > On Wed, 2008-05-28 at 21:29 +0000, [hidden email] wrote: >>> >> Author: adrianc >>> >> Date: Wed May 28 14:29:05 2008 >>> >> New Revision: 661096 >>> >> >>> >> URL: http://svn.apache.org/viewvc?rev=661096&view=rev >>> >> Log: >>> >> Oops, missed one file in last commit. >>> >> >>> >> Modified: >>> >> ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/ >>> HtmlMenuRenderer.java >>> >> >>> >> Modified: ofbiz/trunk/framework/widget/src/org/ofbiz/widget/ >>> html/HtmlMenuRenderer.java >>> >> URL: >>> >> http://svn.apache.org/viewvc/ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java?rev=661096&r1=661095&r2=661096&view=diff >>> >> >>> = >>> = >>> = >>> = >>> = >>> = >>> = >>> = >>> = >>> = >>> ==================================================================== >>> >> --- ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/ >>> HtmlMenuRenderer.java (original) >>> >> +++ ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/ >>> HtmlMenuRenderer.java Wed May 28 14:29:05 2008 >>> >> @@ -259,7 +259,7 @@ >>> >> //String menuContainerStyle = >>> modelMenu.getMenuContainerStyle(context); >>> >> buffer.append(" </ul>"); >>> >> appendWhitespace(buffer); >>> >> - buffer.append(" <br/>"); >>> >> + buffer.append(" <br class=\"clear\"/>"); >>> >> appendWhitespace(buffer); >>> >> buffer.append("</div>"); >>> >> appendWhitespace(buffer); >>> >> >>> >> >>> >> >>> >> -- >> AntWebsystems.com: Quality OFBiz services for competitive rates..... >> > |
Re: svn commit: r661096- /ofbiz/trunk/framework/widget/
|
Administrator
|
In reply to this post by Jacques Le Roux
Done : http://docs.ofbiz.org/display/OFBIZ/FAQ+-+Tips+-+Tricks+-+Cookbook+-+HowTo#FAQ-Tips-Tricks-Cookbook-HowTo-CSS
Jacques From: "Jacques Le Roux" <[hidden email]> > Yes, thanks for the clear explanation Adrian. I think I will put something in the FAQ page (about clear and no-clear usage). This > is really not obvious... > > Jacques > > From: "Hans Bakker" <[hidden email]> >> Thank you Adrian for the extensive explanation. I implemented it in the >> sfa manager.... >> >> Regards, >> Hans >> >> >> On Fri, 2008-05-30 at 09:50 -0700, Adrian Crum wrote: >>> Hans, >>> >>> I put an example of how to fix this problem in the Find Accounts screen. >>> You just need to make the same change to the other screens. Check out >>> the new CSS style: no-clear. >>> >>> There is something I would like to mention on this subject so that it is >>> on record: >>> >>> The developer community decided over a year ago to work on creating >>> simpler HTML markup. The phrase used at the time was "CSS Zen Garden >>> Like." We agreed upon some HTML element compounds that would be used to >>> construct screens, and styled those HTML compounds accordingly. >>> >>> The result was dramatic - just compare the markup of the most recent >>> trunk with a revision around January 2007. >>> >>> Since that decision, nearly the entire UI has been built around those >>> HTML compounds. The screen widgets were changed to emit those compounds. >>> >>> The end result from the user's perspective is a layout that "flows" - >>> HTML elements move around when the user resizes their screen or default >>> font. >>> >>> The downside to this approach is that sometimes things don't land where >>> we want them to. If that happens, the correct course of action is to >>> understand why and change how we lay out the screen. Sometimes a CSS >>> style change is needed. Mucking around with the screen widgets to output >>> different HTML compounds is a bad idea. In this case, changing the >>> widget code fixed the SFA screens, but at the expense of breaking the >>> layout in most of the other components. >>> >>> (There will always be problems associated with setting up multi-column >>> screens. If OFBiz took the "pixel perfect" approach and put everything >>> in fixed positions on the screen, it would be much easier.) >>> >>> Having said that, let's analyze the SFA screens you are struggling with... >>> >>> The problem is the horizontal menu in the right column is causing the >>> HTML elements below it to drop down to the bottom of the screen. Let's >>> figure out why. >>> >>> Screen widget menus are unordered lists ( <ul> elements ) - which is a >>> common practice. An unordered list is vertical by default, but we can >>> make it horizontal by using some CSS magic - we float the line items in >>> the list. The floated line items have to be "cleared" or else other HTML >>> elements will "spill into" them. That is the purpose of the <br >>> class="clear"/> element. Its effect is to block any other HTML elements >>> from appearing to the right or left of the menu - which keeps them from >>> "spilling into" it. >>> >>> This method works great if there are no columns. Inside a column, this >>> method prevents HTML elements from appearing to the left or right of the >>> unordered list - which (in the HTML markup) has appeared AFTER the left >>> column. Oops, all remaining HTML elements will now be rendered below the >>> left column. That's not what we wanted. >>> >>> Removing the <br class="clear"/> is a tempting fix, but as I said, all >>> other menus will now have HTML elements spilling into them. The correct >>> approach (the one that I mentioned in an earlier email) is to disable >>> the clearing effect on this menu only: >>> >>> <style type="text/css"> >>> .no-clear .clear { >>> clear: none; >>> } >>> </style> >>> >>> <div class="no-clear"> >>> <!-- menu widget code here --> >>> ... >>> </div> >>> >>> Inline styles aren't possible using screen widgets, so I put the >>> no-clear CSS class in the maincss.css file. (On a side note, I despise >>> having to create CSS classes to fix things like this, but sometimes it >>> has to be done.) Now the no-clear style can be added to the menu >>> container style: >>> >>> <menu name="AccountSubTabBar" menu-container-style="button-bar >>> button-style-2 no-clear" default-selected-style="selected"> >>> >>> Tah-dah! Problem solved without changing the widget code. >>> >>> -Adrian >>> >>> >>> Hans Bakker wrote: >>> > hi adrian, >>> > >>> > with this change you reverted my earlier change. >>> > >>> > The reason i put this change in is to be able to use the menu in a >>> > column. can you please have a look at the sfa application? there the >>> > menu causes the right form to be under the left hand form.... >>> > >>> > can you have a look at that? >>> > >>> > Regards, >>> > Hans >>> > >>> > >>> > >>> > On Wed, 2008-05-28 at 21:29 +0000, [hidden email] wrote: >>> >> Author: adrianc >>> >> Date: Wed May 28 14:29:05 2008 >>> >> New Revision: 661096 >>> >> >>> >> URL: http://svn.apache.org/viewvc?rev=661096&view=rev >>> >> Log: >>> >> Oops, missed one file in last commit. >>> >> >>> >> Modified: >>> >> ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java >>> >> >>> >> Modified: ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java >>> >> URL: >>> >> http://svn.apache.org/viewvc/ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java?rev=661096&r1=661095&r2=661096&view=diff >>> >> ============================================================================== >>> >> --- ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java (original) >>> >> +++ ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlMenuRenderer.java Wed May 28 14:29:05 2008 >>> >> @@ -259,7 +259,7 @@ >>> >> //String menuContainerStyle = modelMenu.getMenuContainerStyle(context); >>> >> buffer.append(" </ul>"); >>> >> appendWhitespace(buffer); >>> >> - buffer.append(" <br/>"); >>> >> + buffer.append(" <br class=\"clear\"/>"); >>> >> appendWhitespace(buffer); >>> >> buffer.append("</div>"); >>> >> appendWhitespace(buffer); >>> >> >>> >> >>> >> >>> >> -- >> AntWebsystems.com: Quality OFBiz services for competitive rates..... >> > |
«
Return to OFBiz - Dev
|
1 view|%1 views
| Free forum by Nabble | Edit this page |