how to display a list into multiple columns in gsp

Question

In my groovy/grails app i can get my list with check boxes (and thanks for the tips).

But what I cannot seem to get is how to display the list in multiple columns.

Here is the code in my gsp:

<ul class="columns" column-count="3">
        <g:each in="${name}" var="fileName">
               <g:checkBox checked="false" name="${ 'fileName'}"/> ${fileName <br>
        </g:each>
</ul>

i thought that the class="ul class="columns" column-count="3" would work as straight html but I was wrong. I still get a single (long) list.

What is the proper way to make this list into multiple columns in a gsp using groovy tags or the correct html code?

Thanks!

ironmantis7x

***** Successful UPDATE!!! *****

based on the answer I accepted, here is the code I wrote:

<style>
    .columns2 {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2; }
    </style>

        <ul class="columns2">
            <g:each in="${name}" var="fileName">
                 <g:checkBox checked="false" name="${ 'fileName'}"/> ${fileName}<br>
            </g:each> 
        </ul>   
    </div>

Thanks gang! You always help me expand my knowledge base and be more successful in what i love to do and that's programming software!

ironmantis7x

Answer 1

To my knowledge, column-count is a CSS property, not an attribute that can be applied to the ul tag. You need to have column-count defined via style= or within a separate css file (the preferred way because of SoC).

.columns {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

Also, you have a list of checkbox inputs within your ul tag. You should have a list of li (list item) tags instead:

<ul class="columns">
    <g:each in="${name}" var="fileName">
       <li><g:checkBox checked="false" name="${ 'fileName' }"/> ${fileName} </li>
    </g:each>
</ul>