Public Forums 71,145 posts

[remaxutila Friend remaxutilaJoin date: May 2014Posts: 15Downloads:3Uploads:1 Thanks: 2 Thanked: 2 times in 2 posts]

#198562

Subject: Zh GoogleMap Component Map is not displayed when viewport width is less than 768px (Bootstrap 3 @screen-sm-min default value)

Quick Question: Is there anything in Purity III which may cause this?

Great Template – 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 (not accessible via Internet)
W = Windows XP Professional (SP 3 & latest available updates)
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
http://wiki.zhuk.cc/index.php?title=Zh_GoogleMap

Problem Description:
Zh GoogleMap Component Map is not displayed when viewport is less than 768px (Bootstrap 3 @screen-sm-min default value).

Actions:
I created a simple map with the Zh GoogleMap Component and with all default settings, except;
MyMap > Map Details > Width=0
MyMap > Map Details > Height=0
These settings cause the Component to render a container div#GMapsID with in-line CSS of width=100% & height=100%

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.
My Purity III Template has no customization that was not done via the Template Manager, except for the following in MySite/templates/purity_iii/less/themes/MyTheme/variables.less
Template is configured with; Development Mode = ON, Responsive = ON

div#t3-content is the container div and immediate parent of div#GMapsID
div#GMapsID is the containing div of the Google Map output

MySite/templates/purity_iii/less/themes/MyTheme/variables.less contains;

// Default viewport break points (Just to remind myself)
@screen-xs-min:480px;
@screen-sm-min:768px;
@screen-md-min:992px;
@screen-lg-min:1200px;

// Container sizing for Zh GoogleMap Component 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 Zh GoogleMap forum.

But, I don’t think it is a Template issue, because other Components do not demonstrate the same problem.

Thank you.

[remaxutila Friend remaxutilaJoin date: May 2014Posts: 15Downloads:3Uploads:1 Thanks: 2 Thanked: 2 times in 2 posts]

#538245

I am an idiot!
I now see my mistake.
I had not defined CSS width & height values independent of media query values.

Solution:

// Default viewport break points (Just to remind myself)
@screen-xs-min:480px;
@screen-sm-min:768px;
@screen-md-min:992px;
@screen-lg-min:1200px;

// Container sizing for Zh GoogleMap Component Map break points
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;}}

[Author]

Posts