UI Tag
Posted by "Burton Rhodes (JIRA)" <ji...@apache.org>.
[ https://issues.apache.org/jira/browse/WW-3516?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]
Burton Rhodes updated WW-3516:
------------------------------
Description:
Currently the checkboxlist UI Tag does not implement the cssClass or cssStyle attributes in checkboxlist.ftl file (for both simple and xhtml themes). The file should be modified using a <div> tag so that css attibutes can be used around both the checkbox and label. This will allow user full flexibility with the layout of the checkboxlist. The layout capabilities for this tag "out of the box" are not adequate for almost any UI. Almost without fail users want a one column list or fixed width list so that the <input type=checkbox> and <label> tags do not break on a line. This fix could also be implemented on radio an option tags as well. Fully functional code snippet below and examples.
// *** Modified Code: /template/simple/checkboxlist.ftl ****
<#-- ***************Added div tag to use cssClass and/or cssStyle, etc -->
<div
<#include "/${parameters.templateDir}/simple/css.ftl" />
>
<input type="checkbox" name="${parameters.name?html}" value="${itemKeyStr?html}" id="${parameters.name?html}-${itemCount}"<#rt/>
<#if tag.contains(parameters.nameValue, itemKey)>
checked="checked"<#rt/>
</#if>
<#if parameters.disabled?default(false)>
disabled="disabled"<#rt/>
</#if>
<#if parameters.title??>
title="${parameters.title?html}"<#rt/>
</#if>
<#include "/${parameters.templateDir}/simple/scripting-events.ftl" />
<#include "/${parameters.templateDir}/simple/common-attributes.ftl" />
/>
<label for="${parameters.name?html}-${itemCount}" class="checkboxLabel">${itemValue?html}</label>
<#-- ****************** End div -->
</div>
// ***** Will produce multi-column (fixed width for each item), preserving checkbox and label on the same line, and carry over to next line
<s:checkboxlist
name="customers"
list="%{customerList}"
cssClass="AnyClass"
cssStyle="float: left; width:150px"
/>
// ***** Will produce fixed width one column list, 150px wide
<s:checkboxlist
name="customers"
list="%{customerList}"
cssClass="AnyClass"
cssStyle="width:150px"
/>
was:
Currently the checkboxlist UI Tag does not implement the cssClass or cssStyle attributes in checkboxlist.ftl file (for both simple and xhtml themes). The file should be modified using a <div> tag so that css attibutes can be used around both the checkbox and label. This will allow user full flexibility with the layout of the checkboxlist. The layout capabilities for this tag "out of the box" are not adequate for almost any UI. Almost without fail users want a one column list or fixed width list so that the <input type=checkbox> and <label> tags do not break on a line. This fix could also be implemented on radio an option tags as well. Fully functional code snippet below and examples.
// *** Modified Code: /template/simple/checkboxlist.ftl ****
<#-- ***************Added div tag to use cssClass and/or cssStyle, etc -->
<div
<#include "/${parameters.templateDir}/simple/css.ftl" />
>
<input type="checkbox" name="${parameters.name?html}" value="${itemKeyStr?html}" id="${parameters.name?html}-${itemCount}"<#rt/>
<#if tag.contains(parameters.nameValue, itemKey)>
checked="checked"<#rt/>
</#if>
<#if parameters.disabled?default(false)>
disabled="disabled"<#rt/>
</#if>
<#if parameters.title??>
title="${parameters.title?html}"<#rt/>
</#if>
<#include "/${parameters.templateDir}/simple/scripting-events.ftl" />
<#include "/${parameters.templateDir}/simple/common-attributes.ftl" />
/>
<label for="${parameters.name?html}-${itemCount}" class="checkboxLabel">${itemValue?html}</label>
<#-- ****************** End div -->
</div>
// ***** Will produce fixed width for each item, preserving checkbox and label on the same line, and carry over to next line
<s:checkboxlist
name="customers"
list="%{customerList}"
cssClass="AnyClass"
cssStyle="float: left; width:150px"
/>
// ***** Will produce fixed width one column list, 150px wide
<s:checkboxlist
name="customers"
list="%{customerList}"
cssClass="AnyClass"
cssStyle="width:150px"
/>
> Add <div> tag to <s:checkboxlist> UI Tag
> ----------------------------------------
>
> Key: WW-3516
> URL: https://issues.apache.org/jira/browse/WW-3516
> Project: Struts 2
> Issue Type: Improvement
> Components: Plugin - Tags
> Affects Versions: 2.2.1
> Environment: n/a
> Reporter: Burton Rhodes
> Original Estimate: 1h
> Remaining Estimate: 1h
>
> Currently the checkboxlist UI Tag does not implement the cssClass or cssStyle attributes in checkboxlist.ftl file (for both simple and xhtml themes). The file should be modified using a <div> tag so that css attibutes can be used around both the checkbox and label. This will allow user full flexibility with the layout of the checkboxlist. The layout capabilities for this tag "out of the box" are not adequate for almost any UI. Almost without fail users want a one column list or fixed width list so that the <input type=checkbox> and <label> tags do not break on a line. This fix could also be implemented on radio an option tags as well. Fully functional code snippet below and examples.
> // *** Modified Code: /template/simple/checkboxlist.ftl ****
> <#-- ***************Added div tag to use cssClass and/or cssStyle, etc -->
> <div
> <#include "/${parameters.templateDir}/simple/css.ftl" />
> >
>
> <input type="checkbox" name="${parameters.name?html}" value="${itemKeyStr?html}" id="${parameters.name?html}-${itemCount}"<#rt/>
> <#if tag.contains(parameters.nameValue, itemKey)>
> checked="checked"<#rt/>
> </#if>
> <#if parameters.disabled?default(false)>
> disabled="disabled"<#rt/>
> </#if>
> <#if parameters.title??>
> title="${parameters.title?html}"<#rt/>
> </#if>
> <#include "/${parameters.templateDir}/simple/scripting-events.ftl" />
> <#include "/${parameters.templateDir}/simple/common-attributes.ftl" />
> />
>
> <label for="${parameters.name?html}-${itemCount}" class="checkboxLabel">${itemValue?html}</label>
>
> <#-- ****************** End div -->
> </div>
> // ***** Will produce multi-column (fixed width for each item), preserving checkbox and label on the same line, and carry over to next line
> <s:checkboxlist
> name="customers"
> list="%{customerList}"
> cssClass="AnyClass"
> cssStyle="float: left; width:150px"
> />
> // ***** Will produce fixed width one column list, 150px wide
> <s:checkboxlist
> name="customers"
> list="%{customerList}"
> cssClass="AnyClass"
> cssStyle="width:150px"
> />
--
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.
[jira] Commented: (WW-3516) Add tag to
UI
Tag
Posted by "Burton Rhodes (JIRA)" <ji...@apache.org>.
[ https://issues.apache.org/jira/browse/WW-3516?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=12919639#action_12919639 ]
Burton Rhodes commented on WW-3516:
-----------------------------------
Better idea with the <span> tag to preserve default behavior. Although <span> is an inline element you can still accomplish the layout issues with this as well. Also, if this were implemented, it is probably a good idea to add some examples of css layout abilities to the documentation. Most users, IMO, will need a "nice" layout of the checkbox elements.
// Current Example in docs
<s:checkboxlist name="foo" list="bar"/>
// Multi-Colum, Fixed Width
<s:checkboxlist name="foo" list="bar" cssStyle="float: left; width:100px;"/>
// SIngle-Colum, Fixed Width
<s:checkboxlist name="foo" list="bar" cssStyle="display: block; width:100px;"/>
> Add <div> tag to <s:checkboxlist> UI Tag
> ----------------------------------------
>
> Key: WW-3516
> URL: https://issues.apache.org/jira/browse/WW-3516
> Project: Struts 2
> Issue Type: Improvement
> Components: Plugin - Tags
> Affects Versions: 2.2.1
> Environment: n/a
> Reporter: Burton Rhodes
> Original Estimate: 1h
> Remaining Estimate: 1h
>
> Currently the checkboxlist UI Tag does not implement the cssClass or cssStyle attributes in checkboxlist.ftl file (for both simple and xhtml themes). The file should be modified using a <div> tag so that css attibutes can be used around both the checkbox and label. This will allow user full flexibility with the layout of the checkboxlist. The layout capabilities for this tag "out of the box" are not adequate for almost any UI. Almost without fail users want a one column list or fixed width list so that the <input type=checkbox> and <label> tags do not break on a line. This fix could also be implemented on radio an option tags as well. Fully functional code snippet below and examples.
> // *** Modified Code: /template/simple/checkboxlist.ftl ****
> <#-- ***************Added div tag to use cssClass and/or cssStyle, etc -->
> <div
> <#include "/${parameters.templateDir}/simple/css.ftl" />
> >
>
> <input type="checkbox" name="${parameters.name?html}" value="${itemKeyStr?html}" id="${parameters.name?html}-${itemCount}"<#rt/>
> <#if tag.contains(parameters.nameValue, itemKey)>
> checked="checked"<#rt/>
> </#if>
> <#if parameters.disabled?default(false)>
> disabled="disabled"<#rt/>
> </#if>
> <#if parameters.title??>
> title="${parameters.title?html}"<#rt/>
> </#if>
> <#include "/${parameters.templateDir}/simple/scripting-events.ftl" />
> <#include "/${parameters.templateDir}/simple/common-attributes.ftl" />
> />
>
> <label for="${parameters.name?html}-${itemCount}" class="checkboxLabel">${itemValue?html}</label>
>
> <#-- ****************** End div -->
> </div>
> // ***** Will produce multi-column (fixed width for each item), preserving checkbox and label on the same line, and carry over to next line
> <s:checkboxlist
> name="customers"
> list="%{customerList}"
> cssClass="AnyClass"
> cssStyle="float: left; width:150px"
> />
> // ***** Will produce fixed width one column list, 150px wide
> <s:checkboxlist
> name="customers"
> list="%{customerList}"
> cssClass="AnyClass"
> cssStyle="width:150px"
> />
--
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.
[jira] Commented: (WW-3516) Add tag to
UI
Tag
Posted by "Maurizio Cucchiara (JIRA)" <ji...@apache.org>.
[ https://issues.apache.org/jira/browse/WW-3516?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=12919625#action_12919625 ]
Maurizio Cucchiara commented on WW-3516:
----------------------------------------
I think it's a good idea even if it has to be improved. Something must be done to make understandable cssClass and cssStyle.
Span tag should be more suitable (It doesn't break default behavior) IMHO.
> Add <div> tag to <s:checkboxlist> UI Tag
> ----------------------------------------
>
> Key: WW-3516
> URL: https://issues.apache.org/jira/browse/WW-3516
> Project: Struts 2
> Issue Type: Improvement
> Components: Plugin - Tags
> Affects Versions: 2.2.1
> Environment: n/a
> Reporter: Burton Rhodes
> Original Estimate: 1h
> Remaining Estimate: 1h
>
> Currently the checkboxlist UI Tag does not implement the cssClass or cssStyle attributes in checkboxlist.ftl file (for both simple and xhtml themes). The file should be modified using a <div> tag so that css attibutes can be used around both the checkbox and label. This will allow user full flexibility with the layout of the checkboxlist. The layout capabilities for this tag "out of the box" are not adequate for almost any UI. Almost without fail users want a one column list or fixed width list so that the <input type=checkbox> and <label> tags do not break on a line. This fix could also be implemented on radio an option tags as well. Fully functional code snippet below and examples.
> // *** Modified Code: /template/simple/checkboxlist.ftl ****
> <#-- ***************Added div tag to use cssClass and/or cssStyle, etc -->
> <div
> <#include "/${parameters.templateDir}/simple/css.ftl" />
> >
>
> <input type="checkbox" name="${parameters.name?html}" value="${itemKeyStr?html}" id="${parameters.name?html}-${itemCount}"<#rt/>
> <#if tag.contains(parameters.nameValue, itemKey)>
> checked="checked"<#rt/>
> </#if>
> <#if parameters.disabled?default(false)>
> disabled="disabled"<#rt/>
> </#if>
> <#if parameters.title??>
> title="${parameters.title?html}"<#rt/>
> </#if>
> <#include "/${parameters.templateDir}/simple/scripting-events.ftl" />
> <#include "/${parameters.templateDir}/simple/common-attributes.ftl" />
> />
>
> <label for="${parameters.name?html}-${itemCount}" class="checkboxLabel">${itemValue?html}</label>
>
> <#-- ****************** End div -->
> </div>
> // ***** Will produce multi-column (fixed width for each item), preserving checkbox and label on the same line, and carry over to next line
> <s:checkboxlist
> name="customers"
> list="%{customerList}"
> cssClass="AnyClass"
> cssStyle="float: left; width:150px"
> />
> // ***** Will produce fixed width one column list, 150px wide
> <s:checkboxlist
> name="customers"
> list="%{customerList}"
> cssClass="AnyClass"
> cssStyle="width:150px"
> />
--
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.