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, [EMAIL PROTECTED] 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.....
