2

I am having issues with the Smart Map infoBubble pointer position...

Smart Map InfoBubble position bug

As you see the shadow is positioned correctly, but the white overlay triangle is too low down. Or the other way of thinking about it would be that the white overlay triangle is correct and the rest is too high. However, I think the problem can best be described as the former, that the white triangle is too low, knowing that the marker it is attached to is hidden away just showing behind the white triangle.

After inspecting this in Chrome, I cannot see the element / pseudo-element that generates this pointer visual... so cannot debug. Can anybody offer any assistance on how to fix this anomaly?

Thanks in advance,

Adam.

Adam Menczykowski
  • 1,390
  • 11
  • 22
  • This is odd... Is it happening in other browsers? If you were to comment out the customized buttons in the infoBubble template, do you still see this effect? Do you have any JS on the page which might be affecting that? – Lindsey D Nov 28 '15 at 05:22
  • Hello, It is happening in both Chrome and Safari. If I simply put 'hello' into the info bubble, no other markup or content, it still occurs. – Adam Menczykowski Dec 01 '15 at 16:52

2 Answers2

1

I'm going to guess that there is some sort of CSS or JS conflict which is causing this peculiar behavior. Smart Map must be bumping up against some other styling on the page.

Check through your existing CSS/JS to see if you can find the source of the conflict.

Lindsey D
  • 23,974
  • 5
  • 53
  • 110
1

OK I found it!

I'm using the Marx CSS reset Sass library.

In its _sanitize.scss file it has the rule:

* { border-style: solid; }

So by altering my own css to include:

.smartmap-mapcanvas * { border-style: none; }

That removed the anomaly.

Adam Menczykowski
  • 1,390
  • 11
  • 22
  • 1
    This keeps biting me on various map implementations (not just smart map) - one of my most revisited answers! Thanking my former self.... – Adam Menczykowski Oct 31 '18 at 10:28