Author: buscob
Date: Sun Apr 18 08:06:28 2010
New Revision: 935312
URL: http://svn.apache.org/viewvc?rev=935312&view=rev
Log:
A patch from Blas Rodriguez Somoza
OFBIZ-3708 - Fields should be defined with span not div. (radio, date, lookup)
https://issues.apache.org/jira/browse/OFBIZ-3708
Field markup should be a valid inline element.
Defining fields with div (block) instead of span (inline) creates several
problems:
* Missalignments in screen. (See LOOKUP_CAL screenshots)
* Implies a end-of-line after the div. (See CAL screenshots)
* If used inside inline elements which should be OK, becames XHTML
validation errors. (Manufacturing -> MRP -> MRP log)
Because this is a markup problem, it spans to all the themes.
Modified:
ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlFormRenderer.java
ofbiz/trunk/framework/widget/templates/htmlFormMacroLibrary.ftl
ofbiz/trunk/themes/bizznesstime/webapp/bizznesstime/css/legacy.css
ofbiz/trunk/themes/bluelight/webapp/bluelight/style.css
ofbiz/trunk/themes/droppingcrumbs/webapp/droppingcrumbs/css/style.css
ofbiz/trunk/themes/flatgrey/webapp/flatgrey/maincss.css
ofbiz/trunk/themes/tomahawk/webapp/tomahawk/css/style.css
Modified:
ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlFormRenderer.java
URL:
http://svn.apache.org/viewvc/ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlFormRenderer.java?rev=935312&r1=935311&r2=935312&view=diff
==============================================================================
---
ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlFormRenderer.java
(original)
+++
ofbiz/trunk/framework/widget/src/org/ofbiz/widget/html/HtmlFormRenderer.java
Sun Apr 18 08:06:28 2010
@@ -1013,7 +1013,7 @@ public class HtmlFormRenderer extends Ht
// list out all options according to the option list
for (ModelFormField.OptionValue optionValue: allOptionValues) {
- writer.append("<div");
+ writer.append("<span");
appendClassNames(writer, context, modelFormField);
@@ -1044,7 +1044,7 @@ public class HtmlFormRenderer extends Ht
writer.append("/>");
writer.append(encode(optionValue.getDescription(), modelFormField,
context));
- writer.append("</div>");
+ writer.append("</span>");
}
this.appendTooltip(writer, context, modelFormField);
Modified: ofbiz/trunk/framework/widget/templates/htmlFormMacroLibrary.ftl
URL:
http://svn.apache.org/viewvc/ofbiz/trunk/framework/widget/templates/htmlFormMacroLibrary.ftl?rev=935312&r1=935311&r2=935312&view=diff
==============================================================================
--- ofbiz/trunk/framework/widget/templates/htmlFormMacroLibrary.ftl (original)
+++ ofbiz/trunk/framework/widget/templates/htmlFormMacroLibrary.ftl Sun Apr 18
08:06:28 2010
@@ -82,17 +82,14 @@ under the License.
</#macro>
<#macro renderDateTimeField name className alert title value size maxlength id
dateType shortDateInput timeDropdownParamName defaultDateTimeString
localizedIconTitle timeDropdown timeHourName classString hour1 hour2
timeMinutesName minutes isTwelveHour ampmName amSelected pmSelected
compositeType formName>
- <div class="view-calendar">
- <ul>
- <li><input type="text" name="${name}" <@renderClass className alert
/><#rt/>
+ <span class="view-calendar">
+ <input type="text" name="${name}" <@renderClass className alert /><#rt/>
<#if title?has_content> title="${title}"</#if>
<#if value?has_content> value="${value}"</#if>
<#if size?has_content> size="${size}"</#if><#rt/>
<#if maxlength?has_content> maxlength="${maxlength}"</#if>
<#if id?has_content> id="${id}"</#if>/><#rt/>
- </li>
<#if dateType!="time" >
- <li>
<#if shortDateInput?exists && shortDateInput>
<a href="javascript:call_cal_notime(document.<#rt/>
<#else>
@@ -103,10 +100,8 @@ under the License.
<#if
defaultDateTimeString?has_content>,'${defaultDateTimeString}'</#if>);"<#lt/>
title="<#if
localizedIconTitle?has_content>${localizedIconTitle}</#if>"><#rt/>
</a><#rt/>
- </li>
</#if>
<#if timeDropdown?has_content && timeDropdown=="time-dropdown">
- <li>
<select name="${timeHourName}" <#if
classString?has_content>class="${classString}"</#if>><#rt/>
<#if isTwelveHour>
<#assign x=11>
@@ -125,19 +120,17 @@ under the License.
<option value="${i}"<#if minutes?has_content><#if i=minutes>
selected="selected"</#if></#if>>${i}</option><#rt/>
</#list>
</select>
- </li><#rt/>
+ <#rt/>
<#if isTwelveHour>
- <li>
<select name="${ampmName}" <#if
classString?has_content>class="${classString}"</#if>><#rt/>
<option value="AM" <#if amSelected ==
"selected">selected="selected"</#if> >AM</option><#rt/>
<option value="PM" <#if pmSelected ==
"selected">selected="selected"</#if>>PM</option><#rt/>
</select>
- </li><#rt/>
+ <#rt/>
</#if>
</#if>
- </ul>
<input type="hidden" name="${compositeType}" value="Timestamp"/>
- </div>
+ </span>
</#macro>
<#macro renderDropDownField name className alert id multiple formName
otherFieldName event action size firstInList currentValue explicitDescription
allowEmpty options fieldName otherFieldName otherValue otherFieldSize
dDFCurrent ajaxEnabled noCurrentSelectedKey ajaxOptions frequency minChars
choices autoSelect partialSearch partialChars ignoreCase fullSearch>
@@ -184,11 +177,12 @@ if(disa && document.styleSheets)
${item.description?default("")}
</#list>
</#macro>
+
<#macro renderRadioField items className alert currentValue
noCurrentSelectedKey name event action>
<#list items as item>
-<div <@renderClass className alert />><#rt/>
+<span <@renderClass className alert />><#rt/>
<input type="radio"<#if currentValue?has_content><#if currentValue==item.key>
checked="checked"</#if><#elseif noCurrentSelectedKey?has_content &&
noCurrentSelectedKey == item.key> checked="checked"</#if>
name="${name?default("")?html}" value="${item.key?default("")?html}"<#if
event?has_content> ${event}="${action}"</#if>/><#rt/>
-${item.description}</div>
+${item.description}</span>
</#list>
</#macro>
@@ -355,10 +349,9 @@ ${item.description}</div>
</#macro>
<#macro renderDateFindField className alert name localizedInputTitle value
size maxlength dateType formName defaultDateTimeString imgSrc
localizedIconTitle titleStyle defaultOptionFrom defaultOptionThru opEquals
opSameDay opGreaterThanFromDayStart opGreaterThan opGreaterThan opLessThan
opUpToDay opUpThruDay opIsEmpty>
-<div class="view-calendar"><ul>
-<li><input type="text" <@renderClass className alert /><#if name?has_content>
name="${name?html}_fld0_value"</#if><#if localizedInputTitle?has_content>
title="${localizedInputTitle}"</#if><#if value?has_content>
value="${value}"</#if><#if size?has_content> size="${size}"</#if><#if
maxlength?has_content> maxlength="${maxlength}"</#if>/></li><#rt/>
+<span class="view-calendar">
+<input type="text" <@renderClass className alert /><#if name?has_content>
name="${name?html}_fld0_value"</#if><#if localizedInputTitle?has_content>
title="${localizedInputTitle}"</#if><#if value?has_content>
value="${value}"</#if><#if size?has_content> size="${size}"</#if><#if
maxlength?has_content> maxlength="${maxlength}"</#if>/><#rt/>
<#if dateType != "time">
-<li>
<#if dateType == "date">
<a href="javascript:call_cal_notime(document.<#rt/>
<#else>
@@ -366,9 +359,7 @@ ${item.description}</div>
</#if>
<#if formName?has_content>${formName}.</#if><#if
name?has_content>${name}_fld0_value,</#if>'<#if
defaultDateTimeString?has_content>${defaultDateTimeString}</#if>');"
title="${localizedIconTitle}"><#rt/>
</a><#rt/>
-</li>
</#if>
-<li>
<#if titleStyle?has_content>
<span class="${titleStyle}"><#rt/>
</#if>
@@ -381,11 +372,9 @@ ${item.description}</div>
<#if titleStyle?has_content>
</span><#rt/>
</#if>
-</li></ul>
-<ul><#rt/>
-<li><input type="text" <@renderClass className alert /><#if name?has_content>
name="${name}_fld1_value"</#if><#if localizedInputTitle?exists>
title="${localizedInputTitle?html}"</#if><#if value2?has_content>
value="${value2}"</#if><#if size?has_content> size="${size}"</#if><#if
maxlength?has_content> maxlength="${maxlength}"</#if>/></li><#rt/>
+<#rt/>
+<input type="text" <@renderClass className alert /><#if name?has_content>
name="${name}_fld1_value"</#if><#if localizedInputTitle?exists>
title="${localizedInputTitle?html}"</#if><#if value2?has_content>
value="${value2}"</#if><#if size?has_content> size="${size}"</#if><#if
maxlength?has_content> maxlength="${maxlength}"</#if>/><#rt/>
<#if dateType != "time">
-<li>
<#if dateType == "date">
<a href="javascript:call_cal_notime(document.<#rt/>
<#else>
@@ -394,8 +383,6 @@ ${item.description}</div>
<#if formName?has_content>${formName}.</#if><#if
name?has_content>${name}_fld1_value,'</#if><#if
defaultDateTimeString?has_content>${defaultDateTimeString}</#if>');"
title="${localizedIconTitle}"><#rt/>
</a><#rt/>
</#if>
-</li>
-<li>
<#if titleStyle?has_content>
<span class="${titleStyle}"><#rt/>
</#if>
@@ -408,7 +395,7 @@ ${item.description}</div>
<#if titleStyle?has_content>
</span>
</#if>
-</li></ul></div>
+</span>
</#macro>
<#macro renderRangeFindField className alert name value size maxlength
autocomplete titleStyle defaultOptionFrom opEquals opGreaterThan
opGreaterThanEquals opLessThan opLessThanEquals value2 defaultOptionThru>
@@ -439,9 +426,9 @@ ${item.description}</div>
</#macro>
<#macro renderLookupField className alert name value size maxlength id event
action disabled autocomplete descriptionFieldName formName fieldFormName
targetParameterIter imgSrc ajaxUrl ajaxEnabled presentation width height
position fadeBackground clearText showDescription>
-<div class="field-lookup"><ul>
-<#if size?has_content && size=="0"><li><input type="hidden" <#if
name?has_content> name="${name}"/></#if></li><#else><li><input type="text"
<@renderClass className alert /><#if name?has_content> name="${name}"</#if><#if
value?has_content> value="${value}"</#if><#if size?has_content>
size="${size}"</#if><#if maxlength?has_content>
maxlength="${maxlength}"</#if><#if id?has_content> id="${id}"</#if><#rt/><#if
disabled?has_content && disabled> disabled="disabled"</#if><#rt/><#if
event?has_content && action?has_content> ${event}="${action}"</#if><#rt/><#if
autocomplete?has_content> autocomplete="off"</#if>/><#rt/></li></#if>
-<li><#if presentation?has_content && descriptionFieldName?has_content &&
presentation == "layer">
+<span class="field-lookup">
+<#if size?has_content && size=="0"><input type="hidden" <#if name?has_content>
name="${name}"/></#if><#else><input type="text" <@renderClass className alert
/><#if name?has_content> name="${name}"</#if><#if value?has_content>
value="${value}"</#if><#if size?has_content> size="${size}"</#if><#if
maxlength?has_content> maxlength="${maxlength}"</#if><#if id?has_content>
id="${id}"</#if><#rt/><#if disabled?has_content && disabled>
disabled="disabled"</#if><#rt/><#if event?has_content && action?has_content>
${event}="${action}"</#if><#rt/><#if autocomplete?has_content>
autocomplete="off"</#if>/><#rt/></#if>
+<#if presentation?has_content && descriptionFieldName?has_content &&
presentation == "layer">
<a
href="javascript:call_fieldlookupLayer3(document.${formName?html}.${name?html},
document.${formName?html}.${descriptionFieldName},'${fieldFormName}','${width}','${height}','${position}',
'${fadeBackground}'<#rt/>
<#elseif presentation?has_content && presentation == "layer">
<a
href="javascript:call_fieldlookupLayer(document.${formName?html}.${name?html},'${fieldFormName}','${width}','${height}','${position}',
'${fadeBackground}'<#rt/>
@@ -457,9 +444,9 @@ ${item.description}</div>
</#if>
);">
<#if ajaxEnabled?has_content && ajaxEnabled><span id="${id}_indicator"
style="display: none" class="indicator"><img src="" alt=""/></span></#if>
-</a></li><#rt>
-<#if disabled?has_content && disabled><li><a id="${id}_clear"
style="background:none;margin-left:-6px;margin-right:15px;" class="clearField"
href="javascript:void();"
onclick="javascript:document.${formName}.${name}.value='';<#if
descriptionFieldName?has_content>document.${formName}.${descriptionFieldName}.value='';</#if>">${clearText}</a></li></#if>
-</ul></div>
+</a><#rt>
+<#if disabled?has_content && disabled><a id="${id}_clear"
style="background:none;margin-left:-6px;margin-right:15px;" class="clearField"
href="javascript:void();"
onclick="javascript:document.${formName}.${name}.value='';<#if
descriptionFieldName?has_content>document.${formName}.${descriptionFieldName}.value='';</#if>">${clearText}</a></#if>
+</span>
<#if ajaxEnabled?has_content && ajaxEnabled>
<script language="JavaScript"
type="text/javascript">ajaxAutoCompleter('${ajaxUrl}',
${showDescription});</script><#t/>
</#if>
Modified: ofbiz/trunk/themes/bizznesstime/webapp/bizznesstime/css/legacy.css
URL:
http://svn.apache.org/viewvc/ofbiz/trunk/themes/bizznesstime/webapp/bizznesstime/css/legacy.css?rev=935312&r1=935311&r2=935312&view=diff
==============================================================================
--- ofbiz/trunk/themes/bizznesstime/webapp/bizznesstime/css/legacy.css
(original)
+++ ofbiz/trunk/themes/bizznesstime/webapp/bizznesstime/css/legacy.css Sun Apr
18 08:06:28 2010
@@ -486,35 +486,22 @@ form .basic-table,
/***********************************************
Calendar
***********************************************/
-.field-lookup ul {
-margin:0;
-}
-.field-lookup ul li {
-float: left;
-margin:0;
-}
-
-.field-lookup ul li a{
+.field-lookup a {
background: url(/images/fieldlookup.gif) no-repeat 0 0;
-display: block;
-margin: 3px 10px 0px 4px;
+display: inline-block;
+/* margin: 3px 10px 0px 4px; */
+vertical-align:top;
+margin-top:6px;
width:16px;
height:16px;
}
-.view-calendar ul{
-height: 22px;
-}
-
-.view-calendar ul li{
-float: left;
-margin: 0px;
-}
-
-.view-calendar ul li a{
+.view-calendar a {
background: url(/images/cal.gif) no-repeat;
-display: block;
-margin: 3px 10px 0px 4px;
+display: inline-block;
+/* margin: 3px 10px 0px 4px; */
+vertical-align:top;
+margin-top:5px;
width:16px;
height:16px;
}
Modified: ofbiz/trunk/themes/bluelight/webapp/bluelight/style.css
URL:
http://svn.apache.org/viewvc/ofbiz/trunk/themes/bluelight/webapp/bluelight/style.css?rev=935312&r1=935311&r2=935312&view=diff
==============================================================================
--- ofbiz/trunk/themes/bluelight/webapp/bluelight/style.css (original)
+++ ofbiz/trunk/themes/bluelight/webapp/bluelight/style.css Sun Apr 18 08:06:28
2010
@@ -1894,30 +1894,22 @@ background: url(/bluelight/images/result
padding: 0 30px 0 30px;
}
-.view-calendar ul{
-height: 25px;
-}
-
-.view-calendar ul li{
-float: left;
-}
-
-.view-calendar ul li a{
+.view-calendar a {
background: url(/images/cal.gif) no-repeat;
-display: block;
-margin: 3px 10px 0px 4px;
+display: inline-block;
+/* margin: 3px 10px 0px 4px; */
+vertical-align:top;
+margin-top:2px;
width:22px;
height:22px;
}
-.field-lookup ul li {
-float: left;
-}
-
-.field-lookup ul li a{
+.field-lookup a {
background: url(/bluelight/images/application_view_list.png) no-repeat 0 0;
-display: block;
-margin: 3px 10px 0px 4px;
+display: inline-block;
+/* margin: 3px 10px 0px 4px; */
+vertical-align:top;
+margin-top:3px;
width:16px;
height:16px;
}
Modified: ofbiz/trunk/themes/droppingcrumbs/webapp/droppingcrumbs/css/style.css
URL:
http://svn.apache.org/viewvc/ofbiz/trunk/themes/droppingcrumbs/webapp/droppingcrumbs/css/style.css?rev=935312&r1=935311&r2=935312&view=diff
==============================================================================
--- ofbiz/trunk/themes/droppingcrumbs/webapp/droppingcrumbs/css/style.css
(original)
+++ ofbiz/trunk/themes/droppingcrumbs/webapp/droppingcrumbs/css/style.css Sun
Apr 18 08:06:28 2010
@@ -1870,34 +1870,22 @@ background: url(/droppingcrumbs/images/r
padding: 0 30px 0 30px;
}
-.view-calendar {
-display: inline;
-}
-
-.view-calendar ul{
-height: 25px;
-}
-
-.view-calendar ul li{
-float: left;
-}
-
-.view-calendar ul li a{
+.view-calendar a{
background: url(/images/cal.gif) no-repeat !important;
-display: block;
-margin: 3px 10px 0px 4px;
+display: inline-block;
+/* margin: 3px 10px 0px 4px; */
+vertical-align:top;
+margin-top:2px;
width:22px;
height:22px;
}
-.field-lookup ul li {
-float: left;
-}
-
-.field-lookup ul li a{
+.field-lookup a{
background: url(/droppingcrumbs/images/application_view_list.png) no-repeat 0
0;
-display: block;
-margin: 3px 10px 0px 4px;
+display: inline-block;
+/* margin: 3px 10px 0px 4px; */
+vertical-align:top;
+margin-top:3px;
width:16px;
height:16px;
}
Modified: ofbiz/trunk/themes/flatgrey/webapp/flatgrey/maincss.css
URL:
http://svn.apache.org/viewvc/ofbiz/trunk/themes/flatgrey/webapp/flatgrey/maincss.css?rev=935312&r1=935311&r2=935312&view=diff
==============================================================================
--- ofbiz/trunk/themes/flatgrey/webapp/flatgrey/maincss.css (original)
+++ ofbiz/trunk/themes/flatgrey/webapp/flatgrey/maincss.css Sun Apr 18 08:06:28
2010
@@ -1932,30 +1932,22 @@ margin: 0;
/* ================================= */
/* ===== Visual Embellishments ===== */
/* ================================= */
-.view-calendar ul{
-height: 22px;
-}
-
-.view-calendar ul li{
-float: left;
-}
-
-.view-calendar ul li a{
+.view-calendar a{
background: url(/images/cal.gif) no-repeat !important;
-display: block;
-margin: 3px 10px 0px 4px;
+display: inline-block;
+/* margin: 3px 10px 0px 4px; */
+vertical-align:top;
+margin-top: 2px;
width:16px;
height:16px;
}
-.field-lookup ul li {
-float: left;
-}
-
-.field-lookup ul li a{
+.field-lookup a{
background: url(/images/fieldlookup.gif) no-repeat 0 0;
-display: block;
-margin: 3px 10px 0px 4px;
+display: inline-block;
+/* margin: 3px 10px 0px 4px; */
+vertical-align:top;
+margin-top: 3px;
width:16px;
height:16px;
}
Modified: ofbiz/trunk/themes/tomahawk/webapp/tomahawk/css/style.css
URL:
http://svn.apache.org/viewvc/ofbiz/trunk/themes/tomahawk/webapp/tomahawk/css/style.css?rev=935312&r1=935311&r2=935312&view=diff
==============================================================================
--- ofbiz/trunk/themes/tomahawk/webapp/tomahawk/css/style.css (original)
+++ ofbiz/trunk/themes/tomahawk/webapp/tomahawk/css/style.css Sun Apr 18
08:06:28 2010
@@ -2044,30 +2044,22 @@ height:23px;
padding: 0 30px 0 30px;
}
-.view-calendar ul{
-height: 30px;
-}
-
-.view-calendar ul li{
-float: left;
-}
-
-.view-calendar ul li a{
+.view-calendar a {
background: url(../images/cal.png) no-repeat !important;
-display: block;
-margin: 3px 10px 0px 4px;
+display: inline-block;
+/* margin: 3px 10px 0px 4px; */
+vertical-align:top;
+margin-top:3px;
width:22px;
height:22px;
}
-.field-lookup ul li {
-float: left;
-}
-
-.field-lookup ul li a{
+.field-lookup a{
background: url(../images/fieldlookup.png) no-repeat 0 0;
-display: block;
-margin: 3px 10px 0px 4px;
+display: inline-block;
+/* margin: 3px 10px 0px 4px; */
+vertical-align:top;
+margin-top:3px;
width:35px;
height:22px;
}
