CODEWITHSUNDEEP
htmlgrailsgsp
ironmantis7x
ironmantis7x

Reputation: 827

how to display a list into multiple columns in gsp

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

Upvotes: 0

Views: 792

Answers (2)

tylerwal
tylerwal

Reputation: 1870

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>

Upvotes: 1

Igor Artamonov
Igor Artamonov

Reputation: 35961

HTML code in gsp produces exactly same html as you wrote, will be sent to browser as is. So <ul class="columns" column-count="3"> will be same <ul class="columns" column-count="3"> in your browser.

But you're missing list elements, and putting just a single multiline (split by
) text block. You're probably want this:

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

or most likely this (because you didn't close } in your code, and ${ 'fileName'} doesn't make any sense. also you should't put values as is, it's potential security vulnerability):

<ul class="columns" column-count="3">
    <g:each in="${name}" var="fileName">
       <li><g:checkBox checked="false" name="${fileName.encodeAsHTML()}"/> ${fileName.encodeAsHTML()}</li>
    </g:each>
</ul>

Upvotes: 0

Related Questions