-2

I have been trying to integrate my interactive svg maps into my html pages, then a litle problem arise: when i put my (inline) svg into a standard, non responsive, html document, the inline svg automatically fits itself nicely into the user's viewport : see it here.

However, when i tried to use bootstrap navbar to my the page, the inline svg seems to "grow" larger then the normal, non-bootstrap version : here it is

Thus my question : how to make the bootstrap version behave like the normal version? In other words : how to make the bootstrap version fits nicely to the user's viewport?

(Note : you can see the difference only if your browser is on max-size; don't resize your browser)

Rickard
  • 426
  • 7
  • 23
  • I didn't understand your question ! – solimanware Feb 11 '16 at 05:11
  • Ah, sorry for everybody who does not understand the question, you see yesterday, when i tried to access the above link from an internet cafe from my place, the size of the the inline svg from bootstrap-ed version (the second link) is larger than my monitor, thus some outer part of the map is invisible. However, today, after i tried to access it from different internet cafe, the size fits just fine to my browser window. – Rickard Feb 13 '16 at 10:22
  • I then simply draw a conclusion that this problem can only be seen depends on the setting of your browser, some people can see the problem, some of you cannot. Thus, the un-intended confusion.... Hope this explanation make some sense.... – Rickard Feb 13 '16 at 10:38

1 Answers1

0

Try adding this to your svg element, it works when I test it.

It specifies that the height of the svg shouldn't exceed 100% the page's height (minus 80px that allows for the margins and the menu).

max-height: calc(100vh - 80px);

As for why its height changed when you used Bootstrap, I'm not really sure but it may have something to do with the fact that there are more elements on the page and Bootstraps' CSS is affecting their heights.

Leena Lavanya
  • 333
  • 1
  • 10