reflowing column?

[argus08-7xWR1K]

I have a topic that is just an alphabetical list of supported file types, e.g.

Is there any way to have these displayed in a reflowing column format, e.g. three or even four columns, to reduce scrolling and allow easy insertion/deletion of items? Google has failed me, so I think not...

[Captiv8r]

columns | CSS-Tricks

[Captiv8r]

Sorry for the oddness. Sometimes the forums have a hickey. I had a full reply but it simply would NOT allow me to post it. I see that from time to time and I'm not sure what causes it.

[argus08-7xWR1K]

Thanks Rick

I copied the example into my stylesheet as the following:

  p.columns {

  -webkit-columns: 100px 2;

     -moz-columns: 100px 2;

               columns: 100px 2;

  }

When I apply it to the list, in the RH editor it looks like this:

I thought it might be reflected in the preview, but nah.

What am I missing?

Laurie

[Captiv8r]

LOL, note that I didn't test it at all. Just was sharing a possibility.

Also, RoboHelp preview is sometimes quirky. ESPECIALLY when you are doing something like this where RoboHelp doesn't offer a native way to accomplish something.

You might want to try clicking the button in the top right corner of the preview and choose to preview in a web browser. You might be surprised at the difference.

Cheers... Rick

[argus08-7xWR1K]

Ha, yeah that didn't work. Do you see anything wrong with my css? I'm just getting my feet wet understanding css. I *believe* I created a paragraph called columns with the column property, and applied the column paragraph style in RH.

Oh well, until/unless someone else chimes in, I'll leave the list as it originally was. This was just a nice-to-have idea. The possibilities in the article you referenced look interesting though, if we can figure out how to implement it!

Thanks,

Laurie

[Amebr · Accepted solution]

I think you need to define your columns for a div and wrap that around your paragraphs.

div.columns {

     -webkit-columns: 300px 2;

           etc.

}

<div class="columns">

<p>doc</p>

<p>docx</p>

...

</div>

Also, note the browser requirements at the bottom of the page - it won't work in IE9 for example and probably not with the RH preview window.

[argus08-7xWR1K]

Thanks Amebr, that did it. I generated without the div first, to make sure it wasn't just a Preview thing, but it didn't work until I added the div. Of course, the client still supports IE9 (until September), so we can't use it for now, but it's nice to learn a new trick!