- Posts: 3
- Thank you received: 0
Map is not displayed when viewport width is < 768p
- AboutUtila
- Topic Author
- Offline
- New Member
Less
More
10 years 5 months ago - 10 years 5 months ago #5142
by AboutUtila
Map is not displayed when viewport width is < 768p was created 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.
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
Less
More
- Posts: 3
- Thank you received: 0
10 years 5 months ago #5145
by AboutUtila
Replied by AboutUtila on topic Map is not displayed when viewport width is < 768p
I am an idiot!
I now see my mistake.
I had not defined CSS width & height values independent of media query values.
Solution:
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.
- Dima
- Offline
- Platinum Member
10 years 5 months ago #5146
by Dima
Don't forget support my developments: post review in JED , donate , help with translation
Replied by Dima on topic Map is not displayed when viewport width is < 768p
Sorry. I'm busy and can't answer so quickly.
But yes, it was styles
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