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);
