Search code examples
rshinyr-leaflet

Leaflet app with sidebar doesn't size correctly on mobile

I'm using a fluid bootstrap grid in R/Shiny to create a page with a left sidebar (3) and a map (9). Here's the ui code I'm using:

ui <- fluidPage(
  fluidRow(
   column(3,
           "",
           tags$head(tags$style(type='text/css', ".nav-tabs {font-size: 10px} ")),
            tabsetPanel(id='lefttabsetPanel',selected='placestab',
                       tabPanel(value="placestab",title='LUGARES',tags$iframe(name="myiframe2",seamless="seamless",src="http://45.56.98.26:8080/exist/rest/db/madrid/xml/dqm-placeography.xml"
                                                                              ,style='height:95vh;width:100%'
                                                                              )
                       )
   ))
   ,
    column(9,
           "",
  tabsetPanel(id='my_tabsetPanel',
              tabPanel('Global Map (click countries and cities for details)',

                       withSpinner(leafletOutput(outputId="mymap",height = "95vh"),color="#cd0000",type = 5)
              )
  )
)
  )
)

It displays fine on desktop and most tablets, but the map gets bumped below the left sidebar on mobile--even in landscape. Any ideas how I can fix this?

My expected outcome would be that, on mobile, the map reduces the two column widths (awkwardly) in portrait prompting the user to switch to landscape where it should display normally. Here's a working example of a map with this issue to give you an idea: http://www.readingmadrid.com:3838/dqm

Solution

  • You'll need to pick an appropriate mixed class to specify inside the fluidRow( column(3,... function such as the following:

    fluidRow(column(3, class = "col-xs-4 col-md-3",...))
fluidRow(column(9, class = "col-xs-8 col-md-9",...))