POI list in Mashup map is not responsive

[Einstein]

Hi, do you know how I can make the POI list which displas in teh bottom of the mashup map responsive please? The POI name text gets cut off when it is displayed on a smaller screen, I would like the text to move to the next line and table row to expand. Thank You.

[Chris]

Hi,

The default layout for the poi list is a table with width=”100%”, so this is probably specific to your site – the theme may be overriding the CSS. If you can provide a URL I’ll take a look.

You can also modify the layout template “map_poi_list.php” to change the layout, or the theme’s “style.css” to suit your needs. You can see the MapPress CSS defaults in file “mappress.css”, in the plugin directory.

[Einstein]

Hi Chris, my site address is http://web2000.websitewelcome.com/~artisans and it is using a studiopress Education theme. If you could have a look, then it would be great, Thank you! I have also mentioned in the other forum topics that the POI list as sortable table and the Infobox do not display in my case.

[Chris]

Hi,

I took a look:

1. The map is showing the datables option is disabled. That usually indicates the “Show the POI list as a datable” option isn’t set (or isn’t getting saved). Please try to save the MapPress settings again and check that it’s set – and that you’re not overriding it in the shortcode. If that’s not the problem, please send a login so I see why the setting is not saving.

2. I think the POI list isn’t collapsing because the theme is preventing text wrapping on links (white-space: nowrap). You can either change the theme’s “style.css” to correct this in general, or add this to just enable wrapping in the poi list:

.mapp-poi-list { white-space: normal !important; }

[Einstein]

Hi Chris, thank you for your reply, I disnt have the “Show the POI list as a datable” set on when you had a look at it as I was working on something else on the website. I have made sure that it has been set now to “Show the POI list as a datable” and to “Display the Infobox”. Please have another look, sorry for wasting your time. http://web2000.websitewelcome.com/~artisans/view-map/ This is the page where the map is, I have a feeling the infobox appears behind the background of the website as I think I saw a tip of it once on the edge of the map container. But I am not sure. I will try your suggestion no. 2. Thank you!

[Chris]

Hi,

I looked at the URL and the datatable is working (for me). It looks like a regular table but if you click the column headings, it sorts alphabetically. I’m using Internet Explorer 10.

The Infobox is behind the map, as you suspected. The theme must apply a z-index somewhere. You can either remove it from the theme’s style.css or try this to raise the infobox:

.mapp-infobox {
z-index 999999;
}

You can test it using Firebug if that helps – just search for ‘map-infobox’ to find the infobox in the page HTML.

[Einstein]

Hi Cris, thank you for your help! I was just wondering two things:

1. Is it possible to add more search fields to the “POI list as a datable”, I would like to be able to search the POIs based on their Post category, and

2. Is it possible to put the POI table on the side of the map instead of the bottom?

Thank You!!

[Chris]

Hi,

You can probably do both things by modifying the map_poi_list.php template file:

1. Add your extra columns to the poi list and I think the datatables plugin will make them sortable by default. Note that they’ll be sortable, not searchable or filterable, I was assuming that’s what you meant?

2. Yes, you can modify the HTML of the template.

[Author]

Posts