[
https://issues.apache.org/jira/browse/WW-3516?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=18127708#comment-18127708
]
Lukasz Lenart commented on WW-3516:
-----------------------------------
Revisited against the current code before closing.
The original premise no longer holds: all three themes ({{simple}}, {{xhtml}},
{{html5}}) now apply {{cssClass}} and {{cssStyle}} to every checkbox in the
list, and per-item styling is available through {{listCssClass}},
{{listCssStyle}} and {{listTitle}}.
The remaining part of the request — a wrapper element around each checkbox and
its label, to get one-column or fixed-width layouts — can be done with CSS Grid
on a container the page already owns, because each checkbox and its label are
siblings:
{code:html}<div class="cbl">
<s:checkboxlist name="customers" list="%{customerList}"/>
</div>
{code}
{code:css}/* multi-column, checkbox and label kept together */
.cbl { display: grid; grid-template-columns: repeat(3, auto 1fr); }
/* single column */
.cbl { display: grid; grid-template-columns: auto 1fr; }
{code}
The hidden {{__multiselect_}} input is not displayed, so it does not take a
grid cell. Changing the default markup to add a wrapper would break existing
stylesheets that target {{.checkboxLabel}} or {{input + label}}, and the simple
theme is meant to stay minimal, so this will be closed as Won't Fix.
While checking this, two defects were found in the same template and filed
separately for 7.5.0:
* WW-5780 — the html5 theme never closes the checkbox {{input}} element, so the
{{label}} is lost
* WW-5781 — {{class}} and {{style}} are written twice on each checkbox, which
leaves {{cssErrorClass}}/{{cssErrorStyle}} without effect
> 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
> Assignee: Maurizio Cucchiara
> Priority: Major
> Fix For: 7.5.0
>
> Attachments: checkboxlist.ftl
>
> 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 was sent by Atlassian Jira
(v8.20.10#820010)
