Forums

Multiple Columns using Pagelist Block

Permalink
Hello all,

I have had no luck finding the answer to this question so I thought I would post it here.

What I would like to know: Is there anyway to display the Pagelist Block in 2,3,4 columns ect. specifying the number of pages in each column instead of one long listed column?

Any help would be greatly appreciated.
 
drbiskit replied on at Permalink Best Answer Reply
drbiskit
Yes you can do it in a few ways...

If you do need them specifically listed out vertically into actual columns, you'll either need to use CSS3 columns (more here:http://css-tricks.com/snippets/css/multiple-columns/... ), or use a script (such as:http://welcome.totheinter.net/columnizer-jquery-plugin/... )

--

... but another much easier route is to make the list items smaller, and then have several per row. This doesn't give true columns as such, but pretty much the same effect - it just depends on how important the ordering is to you. If you allow each listed page item to only span e.g. 33% of the width of it's container, with a small piece of CSS you will then have 3 items on each row (25% of the overall width for 4 cols, etc) - which then gives the effect of columns.

First, if you are using the default page list block template, you will need to either amend it, or use a new template to give each page list item a container element with a specific class (e.g. 'pageListItem').

You would then use this CSS:

.pageListItem {
   display:inline-block;
   /*  Change this percentage to define the amount of cols req'd */
   width:33%;
   /*  To fix in old versions of IE */
   zoom: 1;
   *display: inline;
}


========

If you have never used custom templates before:

Look at this how-to:
http://www.concrete5.org/documentation/how-tos/designers/styling-th...

If you download the example page list template at the end of the post, install it on your site as described, and then add the above CSS to your CSS file, it should just work. Let me know if not!

NB: Just to confirm, this method will list your items in repeated rows, to give the effect of columns.
Adreco replied on at Permalink Reply
Adreco
I took the lazy way out and bought an Add-on that has worked really well for one of my clients :)
http://www.concrete5.org/marketplace/addons/whale-page-list-plus/...
there's a few different options in the marketplace if you choose to go that direction.

Adrian
Arvixe Web Hosting / Concrete5 Community Liaison |
http://www.arvixe.com/concrete5_hosting.............
cmsdev replied on at Permalink Reply 3 Attachments
Hi there,

Thanks very much for taking the time to reply.

Drbiskit – I tried the code and it works exactly as you described. The only problem is when viewing the list at different screen resolutions. When I resize the browser the columns appear to lose their formatting (see attached screen shot – screen_medium.jpg). Do you know what I can do to get the columns to keep their alignment at lower screen resolutions?
I have set the columns width to 100% when the screen resolution drops below 639px and that works fine (see attached – screen_small)

Adrian – thanks for your comments – I may well consider the Whale Page List Plus addon if I can’t resolve this problem.
drbiskit replied on at Permalink Reply
drbiskit
Hello - Well done for having a go, It's very nearly there!

Apologies, I didn't realise you were building a responsive site. This should be easy enough to fix, + will likely be caused by some CSS that is targeting these elements at this browser resolution - so you'll need to try and find out what and where this is in your CSS file/s.

If you can send me a url, I'll be able to tell you where it is - but if not, you need to try and find out what this is in order to fix it - Not sure what browser you are using, but if you're not already, try using Dev tools in Chrome (https://developers.google.com/chrome-developer-tools/... ) or Firebug in Firefox (https://addons.mozilla.org/en-US/firefox/addon/firebug/... ), to look at your code - both of these tools help you quickly ascertain what CSS is (or isn't) affecting any given element in your html - amongst a hole heap of other cool stuff.
cmsdev replied on at Permalink Reply 1 Attachment
Hello again,

I think I have been able to sort this out so that it is functional.

drbiskit I now see what you mean by your comment above :

This doesn't give true columns as such, but pretty much the same effect - it just depends on how important the ordering is to you.

The columns appear to stack from left to right instead of each item below the previous one.

What would really nice is to stack the items one after the other and determine the number of items in a column before starting a new column ie:

Item1 item5
Item2 item6
Item3 item7
Item4 item8

drbiskit I have attached the view.css template for you to take a look at or for anyone else who may want the use of this type of layout. Please be advised my css is not that great so there may be errors in the view.css file.

Thank very much again drbiskit for your help.
drbiskit replied on at Permalink Reply
drbiskit
Good stuff - well done!

Yes, you are right, that is what it is doing. To get the list items in true vertical columns as you have outlined, you will either need to use CSS3 columns or some script - see links in my original answer above.

CSS3 columns are great, but just weren't supported in older versions of IE (9 and below - see this link for support details:http://caniuse.com/multicolumn - so there is a slight legacy issue to be aware of, or some javascript - There are a few plugins kicking about that can do this.