Subject: Map is not displayed when viewport is less than 768px (Bootstrap 3 @screen-sm-min)
Quick Question: Is there anything in Zh GoogleMap which may cause this?
Great Component, Module & Plugin - Thank you so much. I am just beginning to explore it - Wow! - so many features and configurations.
The problem in more detail:
Environment:
Joomla 3.3.0 on WAMP local development system
W = Windows XP Professional (latest version)
A = Apache 2.4.9
M = MySQL 5.5.37
P = 5.4.28
Joomla Template = JoomlaArt - Purity iii v1.1.0 with T3 Framework v2.2.1 (Bootstrap 3 compatible)
Zh GoogleMap Component v5.6.0.1
zh Googlemap Plugin v4.2.0.1
Problem Description:
Map is not displayed when viewport is less than 768px (Bootstrap 3 @screen-sm-min).
I created a simple map with all default settings, except;
MyMap > Map Details > Width=0
MyMap > Map Details > Height=0
I created a Joomla Menu Item linked to MyMap.
In order to get map to display I needed to define responsive break points in the Template CSS/LESS files (div#t3-content is the container div of div#GMapsID)
// Default viewport break points
@screen-xs-min:480px;
@screen-sm-min:768px;
@screen-md-min:992px;
@screen-lg-min:1200px;
// Container Size for Map break points
@media (mid-width:@screen-xs-min) {div#t3-content {width:426px;height:213px;}}
@media (min-width:@screen-sm-min) {div#t3-content {width:682px;height:341px;}}
@media (min-width:@screen-md-min) {div#t3-content {width:882px;height:441px;}}
@media (min-width:@screen-lg-min) {div#t3-content {width:1066px;height:533px;}}
Everything works as expected until the viewport size is less than @screen-sm-min (768px).
When the viewport size is less than @screen-sm-min (768px) the map is not displayed.
When I use Firebug to look at what is happening,
I see div#t3-content has width and height with values as expected.
But when the viewport is less than @screen-sm-min (768px) then div#t3-content has NO width and height values.
It may be a Template issue. I am posting a similar question on the Template forum.
But, I don't think it is a Template issue, because other Components do not demonstrate the same problem.
Thank you.
