1

How to hide the left sidebar of Fusion table template? On mobile's width, the left sidebar will show up at the top of the map. How do I hide it inside the collapsible navbar? I have a couple of custom filters. It would be nice to be able to hide them on mobile. Otherwise, you need to scroll down to see the map, which is not user friendly. Thanks!

Ok, but that only solve part of the problem. The left sidebar shall show up inside *div class="collapse navbar-collapse"* So that, when user click navbar, it will pop up. Like this

I just found out that this website has the same functionality, that is, show left sidebar in desktop version on the one hand, and collapse sidebar in mobile version on the other hand. And the related stackoverflow question.

But the accepted render view only collapse the sidebar without putting it at top in mobile version; instead, it put it at left.

I am not sure it is trivial to collapse the left sidebar and show it at top in mobile version?

Community
  • 1
  • 1
Jimmy Yang
  • 13
  • 1
  • 6

2 Answers2

1

You can do something like this : 

@media(max-width:760px)
{
  #yourelement{
  display:none;
  }
}

It say's , when your window is under 760px width, you make the element target by the id="yourelement" to be hide.

Baldráni
  • 5,332
  • 7
  • 51
  • 79
1

You can also use a different template that is meant for narrower screens: https://github.com/derekeder/FusionTable-Map-Template#iframe-template

Derek Eder
  • 96
  • 3