Help with CSS for External Placemark List

This is not an issue or problem with the GREAT extension in anyway.

I'm hoping someone can direct me or help with formatting the list of External Placemark List. I've got a long list of them showing under the map in a separate module. I want this to be formatted in maybe 3 columns and ordered by the Placemark Groups. Is this possible?

Here is the page I'm working on.

dev.rcmsar.com/index.php/sar-units/map-of-units

Thanks,
Kevin

Do you create the list in the separate module manually.

If yes, then i think it is easy. Simply create a table with 3 columns and put the items in it.

Btw: Nice site.

Im sorry, the placemark list is created automatically. Maybe an experienced user or dima can help you.

Thanks for the complement and comments Thomas. Yes, I'm guessing it's a hard task.

Hi, Kevin

Today you can define placemark list by Placemark List Content

And if you want a table list - check type with (table) text in title.

You can apply styles by class. I've created for each tag its.

Check my css-file for placemark list
com_zhgooglemap\admin\assets\css\markerlists.css
com_zhgooglemap\site\assets\css\markerlists.css

This my predefined styles for simple and advanced styles.
You can define external style and in template define your styles for list.

For example, I've create classes with different suffix for style.


You can use a table style output (see above, table in title), and div-styles.
For div-styles I added wrapper div - and you can create table by applying style for divs too.


If you don't understand - ask me.
Create second map with placemarks, set not external placemark list and check, what styles you should apply to your map to get the same result with external style.

Thanks Kevin for donation

As for long list:
set for your div height, and set overflow:auto, and you get fixed height of list and scrollbar if you have more content than div height

Apply for div style "display:inline" and it will be on the same line as previous

Set width = 100% for div to occupy whole width of content