Highlighted

reflowing column?

Explorer ,
Feb 25, 2015

Copy link to clipboard

Copied

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

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...

Adobe Community Professional
Correct answer by Amebr | Adobe Community Professional

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.

Topics

HTML

Views

292

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

reflowing column?

Explorer ,
Feb 25, 2015

Copy link to clipboard

Copied

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

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...

Adobe Community Professional
Correct answer by Amebr | Adobe Community Professional

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.

Topics

HTML

Views

293

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Feb 25, 2015 0
LEGEND ,
Feb 25, 2015

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 25, 2015 0
LEGEND ,
Feb 25, 2015

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 25, 2015 0
Explorer ,
Feb 25, 2015

Copy link to clipboard

Copied

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:

filetypes2.png

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

What am I missing?

Laurie

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 25, 2015 0
LEGEND ,
Feb 25, 2015

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 25, 2015 0
Explorer ,
Feb 25, 2015

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 25, 2015 0
Adobe Community Professional ,
Feb 25, 2015

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 25, 2015 0
Explorer ,
Feb 26, 2015

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 26, 2015 0