Columns for List Style?

Hi.

Sorry to have taken a while to get back to you.

I’ve been testing some additional CSS to allow the list view to be shown in columns. So far it is looking good, but I will finish testing tomorrow and hopefully be able to release a new version that will do this for you.

Thanks—I can’t wait to try it!

Hi.

I’ve now released version 1.21, which includes the CSS and associated changes to allow lists to be shown in columns.

Let me know how it works for you.

Thank you for using CC Child Pages.

Hi,

This is exactly what I needed, too. Thank you!

Is it possible to reduce the space between lines when you use the list / columns option? The space between lines is a lot larger than when the list was just one column.

I’m using this code:
[child_pages list=”true” cols=”2″ orderby=”title” order=”ASC”]

on this page: https://faithandfamilynutrition.com/wp/products

It looked much neater when it was only one column b ecause there was no extra space between the lines.

Dear caterhamcomputing,

Thank you so much for trying to help me—I truly appreciate your kindness. I’ve given the new list feature a workout with three and four columns:

https://bazaar.typeheritage.com/x3/
https://bazaar.typeheritage.com/x4/

I agree with reesamarchetti that the vertical (and horizontal) spacing is too large for a list, probably because the plugin is geared to spiffy-looking boxes?

I’m starting to think that I may be “on the wrong track” trying to make this (elegant! magic!) plugin work for my needs, especially if I decide to use an eCommerce package with special templates instead of standard WP pages.

Another option is to skip the eCommerce templates, use the widget in a sidebar and add paypal plugins for transactions.

I’m still exploring a zillion options and figuring out how to integrate everything, so please don’t go to any extra trouble addressing my personal needs.

Even so, I’m happy if the list spacing can be fixed because it will make CC Child Pages more versatile and more popular!

Thanks again, Anna

Thanks for the feedback …

I’ve been tweaking the CSS for the lists in columns, and spotted that I’d added an unintended declaration effectively adding a margin to the top and bottom of list items. I’ve corrected this and will release a fix later today.

The fix is now live … I hope that it helps.

Hi Anna

Looking at your test pages, it looks as though you may get better responsiveness by listing in 2 columns rather than 3 or 4 … the pages have a lot of space taken up on the right-hand side by what looks like 2 sidebars, which squashes the list up even more when the width of the page is reduced (I’d normally expect the sidebars in a responsive theme to drop to the bottom of a page in very small windows, but that’s a feature of the theme).

Removing one of the sidebars or reducing the number of columns in the list will allow things to resize a little more elegantly.

I also get odd results viewing your test pages in Internet Explorer 11 under Windows 8 – it seems to always drop back to emulating Internet Explorer 7 and I have to tell it to render the page as version 11 to see the columns!!! Most strange.

Excellent!

The fix works and now the list columns are nice and neat, with no extra space between lines.

Thank you. ??

I’m glad that you are finding the plugin useful.

Tim Lomas
Caterham Computing

Anna, I’m not quite sure what you mean about the horizontal spacing being too much … to display in columns, each list item is logically a percentage of the width so that they line up in a number of columns.

Another potential option may be to not use the cols parameter, specify a custom class using the class parameter and use some custom CSS. (e.g. maybe something like: .myclass li { display: inline; } – which would create a long flowing list instead of lining the items up into columns.

Anyway, please let me know if the CSS fix I applied today helps you at all – I’d love to get this thread resolved to your satisfaction.

[ Signature moderated ]

Hi again,

Vertical spacing is looking good now!

About horizontal spacing… Since the number of child pages will be at least 100, I’d like to use four columns across the full width to keep scrolling at a minimum—I can easily “live with” three columns. The custom css you suggest would not produce that result.

With only one sidebar, the columns do not seem to span the available space, especially on the right:

https://bazaar.typeheritage.com/x4/
https://bazaar.typeheritage.com/x3/

Maybe less padding to decrease the indent on the left edges?

Thank you again for this super-slick plugin. Even if I don’t use it for the example scenario, I will definitely use it somewhere else!

Anna

Hi Anna,

I’ve revisited the CSS for displaying unordered lists in columns. Hopefully, this will now span the available space (there will always be a slight margin on the right, as the list items have a right margin specified to avoid them running into each other).

The spacing between items is specified as a percentage of the available width … I have made this percentage smaller on larger screens and then increase as the screen size gets smaller, effectively keeping it roughly the same.

I think that is about all I can do to improve this feature beyond re-writing the WordPress wp_list_pages function, which would be beyond the intended scope of this plugin (maybe it is something I’ll consider again if I create a “Pro” version in the future).

I hope that this works for your site.

[ Signature moderated ]

… I should have added that the new version is now available to download from the plugin repository …

Hi Anna,

I have found that responsive sites usually don’t look good with more than 2 columns, when viewed on mobile devices. Words get squahed together …