使<s：checkboxlist>的选项在struts2中垂直显示

Question

*I need my check box list option to display vertically instead of the default horizontal display.I have created a folder in my src folder in the name templates and another folder with name vertical-checkbox containing the modified .ftl file of my customized check box list.I am unable to display the customized check box My code in JSP is

  <s:checkboxlist theme="vertical-checkbox" label="Which of the following are states of India"
                            name="states"
                                list="#{'01':'January','02':'February','03':'March','04':'April',
    '05':'May'}"
      />

Please advice where I am getting wrong.

Answer 1

Normally the struts checkboxlist in struts2 diaply the check boxes horizontally. In most of application we want to display the check boxes vertically (line by line). For aligning this as vertical we have to do the following

1. You have to create a directory template in your src folder

2. Create a folder with the name of the template you want to create (vertical-checkbox)

3. Copy the struts-2.1.6/src/core/src/main/resources/template/simple/checkboxlist.ftl file to this directory content of this file is as follows. Before the you have to put a
   tag as you want or like this link: http://codeglobe.blogspot.com/2009/09/struts2-align-check-box-vertical.html

4. <s:checkboxlist list="urlist" name="selectedValues" listKey="id" listValue="descrption" theme="vertical-checkbox"></s:checkboxlist>

This will give you a vertical check box list. The only difference is that here you have to specify the theme which is same as the directory you have created in the template directory in the src folder of your project.

Answer 2

I tried the answer supplied here, but it did not work as I'd hoped, I lost the label on the list, and also other formatting disappeared. So, I did it through css:

<s:checkboxlist
  name="myCheckboxList"
  ... />

which results in html-elements like this:

<input type="checkbox" id="myCheckboxList-1" ... />
<label for="myCheckboxList-1" ...
<input type="checkbox" id="myCheckboxList-2" ... />
<label for="myCheckboxList-2" ... 

The CSS for making the checkboxes vertical then looks like this:

label[for*=myCheckboxList-]:after {
    content:"\A"; white-space:pre;
}

The selector states that "after each label with a for-attribute containing 'myCheckboxList-'", and the contents state "add a linebreak ("\\A") and make sure that whitespaces are preserved".

Answer 3

You can see here: http://klyuty.blogspot.it/2011/03/creating-vertical-orientation-for.html I think this is the simplest and clear way.

1. Create folder template in WEB-INF/classes folder of application.
2. Create folder simple in WEB-INF/classes/template folder (or another folder for other theme).
3. Copy file checkboxlist.ftl from struts2-core.jar library (that one, with located in simple theme folder in jar archive).
4. In this file after the closing of this label string (see the link for more detail):

for="${parameters.name?html}-${itemCount}" class="checkboxLabel">${itemValue?html}

and before string:

</@s.iterator>

add this (in between):

<#if parameters.cssStyle?exists>
<#if "${parameters.cssStyle?html}" == "vertical">
<br/><#rt/>
</#if>
</#if>

In this code "vertical" is css style, that we will use in strust2 page, and
is a separator between two checkboxes in our list.

5. On struts2 page with s:checkboxlist use style "vertical" for make a vertical list orientation:

Answer 4

see this website: http://mikeski.net/site/node/16

basically, you just need to:

1. open up the file checkboxlist.ftl

2. it will contain 3 lines, the middle line uses the checkboxlist.ftl from the simple theme. Comment the line that says:

    <#include "/${parameters.templateDir}/simple/checkboxlist.ftl" /> 

3. Then copy the freemarker code that is referenced in the above URL.

I did that, and it worked for me. It will display your checkbox on its own individual line.

Answer 5

Without seeing the modified .ftl file it's difficult to tell where things go wrong, but the general solution is:

• Copy checkboxlist.ftl over to a new directory (eg, .../template)

• In the copied file, add a break between the checkboxLabel class and the iterator:

   <label ... class="checkboxLabel"> <br> </@s.iterator> 

• Reference/include the new .../template/checkboxlist.ftl to override the standard checkboxlist.ftl.

If I recall correctly the above can also be done in CSS, but I forgot the details.