[Resolved] How do I style the popup content of marker data?

[Author]

Posts

[kristenM]

I have been trying to style the popup content of the marker data shown on the map here: hidden link. You'll have to be logged in to see it!

When I use HTML-tags they show as normal text. I have ben through ceveral user-guides without finding knowledge about this subject.

How do I style both text and the box? I would like to frame the box and remove the scroll-function.

You can see the 2 pictures I have uploaded about this. In the "marker data maps" I have put this code:

[wpv-map-marker map_id='map-1' marker_id='marker-6' marker_title='{!{wpv-post-field name='company'}!}' marker_field='map_adress'][vc_row css=".vc_custom_1557174912429{border-top-width: 3px !important;border-right-width: 3px !important;border-bottom-width: 3px !important;border-left-width: 3px !important;background-color: #ffffff !important;border-left-color: #22436e !important;border-left-style: solid !important;border-right-color: #22436e !important;border-right-style: solid !important;border-top-color: #22436e !important;border-top-style: solid !important;border-bottom-color: #22436e !important;border-bottom-style: solid !important;}"][vc_column width="1/3"][vc_column_text]
{!{wpv-post-featured-image size='custom' width='150' height='150'}!}
<p>{!{wpv-post-field name='address'}!}
{!{wpv-post-field name='zip'}!} {!{wpv-post-field name='city'}!}
<p>Tlf.: {!{wpv-post-field name='phone'}!}
Email: {!{wpv-post-field name='email'}!}
Web: {!{wpv-post-field name='web'}!}[/vc_column_text][/vc_column][vc_column width="2/3"][vc_column_text]{!{wpv-post-field name='company'}!}
{!{wpv-post-field name='profiletext'}!}[/vc_column_text][/vc_column][/vc_row][/wpv-map-marker]

If you need anything else, please let me know.

I look forward hearing from you.

Kind regards

Kristen

[Christian Cox]

When I use HTML-tags they show as normal text.
Hi, I tested this and I can't see the problem. Please look at the screenshots div-test-1.png and div-test-2.png. You can see that a div tag is rendered as expected inside the popup. I included a test CSS class, which can be used to style the text. Can you provide an example where HTML is not working as expected?

How do I style both text and the box? I would like to frame the box and remove the scroll-function.
You can use basic CSS to style the text by applying your own custom markup and CSS classes. Check your HTML markup structure and be sure it's valid - I can see invalid markup now, like p inside another p, which is invalid.

I'm not sure I understand which "box" you are referring to. See area.png for an example. You can style anything inside the blue area by adding CSS classes and markup inside the marker popup content. To style the popup itself and other UI elements outside the blue box, refer to the Google Maps documentation here: https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple
And our documentation for customizing the map with JavaScript:
https://toolset.com/documentation/user-guides/programmatically-change-map-settings/

I'm not sure how to fix the horizontal scrolling problem, because you have included WPBakery / Visual Composer layout shortcodes in the marker popup content. These shortcodes produce their own markup and CSS styles, which are causing the scrolling here. As a test, you can remove all the WPBakery shortcodes from the marker content, like this:

[wpv-map-marker map_id='map-1' marker_id='marker-6' marker_title='{!{wpv-post-field name='company'}!}' marker_field='map_adress']
{!{wpv-post-featured-image size='custom' width='150' height='150'}!}
<p>{!{wpv-post-field name='address'}!}
{!{wpv-post-field name='zip'}!} {!{wpv-post-field name='city'}!}
<p>Tlf.: {!{wpv-post-field name='phone'}!}
Email: {!{wpv-post-field name='email'}!}
Web: {!{wpv-post-field name='web'}!}{!{wpv-post-field name='company'}!}
{!{wpv-post-field name='profiletext'}!}[/wpv-map-marker]

You can see that there is no horizontal scrolling now. So something in the custom markup created by these VC shortcodes is causing the problem with horizontal scrolling, and I'm not sure how to fix it. I suggest you ask their support team why it is causing horizontal scrolling, and how to fix it.

[kristenM]

Hi Christian.
Thank you for a very quick reply.
I just remove the Visual Composer code and see if I get another result!
If it works I close this support-ticket and if not, I'll be writing shortly 🙂

Kind regards
Kristen

[kristenM]

Hi again Christian.
I how now tried to build the columns with Toolset Grid function and the result is the same as last time.
When I use mouse-over it shows (example) "<h3>Seize</h3>" and the popup-box shows a variety of sizes.
Maybe I'm doing it all wrong and I should instead use the CSS-editor in the Loop-editor?

[kristenM]

When I don't use any grid the scroll-function dissapeares.
But the HTML-tags still doesn't work within <div>-tags.

[Christian Cox]

I how now tried to build the columns with Toolset Grid function and the result is the same as last time.
Try removing the "row" class. It has some negative margins that may be part of the problem.

When I use mouse-over it shows (example) "<h3>Seize</h3>"
HTML is not supported in the marker_title field, only plain text.

But the HTML-tags still doesn't work within <div>-tags.
In the marker_title, or in the popup content? Please show me.

[kristenM]

So I think I figured out the CSS. The only thing I still need to figure out is to remove the scroll-function.
Do you have any other ideas to remove this?
Could it be to make the 2 columns a bit more narrow?

[Christian Cox]

Try removing the "row" class. It has some negative margins that may be causing the scrolling.

[kristenM]

My issue is resolved now. Thank you!