Map is not displayed when viewport width is < 768p

  • AboutUtila
  • Topic Author
  • Offline
  • New Member
  • New Member
More
10 years 5 months ago - 10 years 5 months ago #5142 by AboutUtila
Sorry, I incorrectly posted this in the 'Suggestion Box' Forum Category and don't know how to move that original post .

Subject: Map is not displayed when viewport width 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.
Last edit: 10 years 5 months ago by AboutUtila.

Please Log in or Create an account to join the conversation.

  • AboutUtila
  • Topic Author
  • Offline
  • New Member
  • New Member
More
10 years 5 months ago #5145 by AboutUtila
I am an idiot!
I now see my mistake.
I had not defined CSS width & height values independent of media query values.

Solution:
Code:
// 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;}}

Please Log in or Create an account to join the conversation.

More
10 years 5 months ago #5146 by Dima
Sorry. I'm busy and can't answer so quickly.
But yes, it was styles

Don't forget support my developments: post review in JED , donate , help with translation ;)

Please Log in or Create an account to join the conversation.

Time to create page: 0.203 seconds
Powered by Kunena Forum