Приложение R / Shiny Leaflet с боковой панелью не подходит для мобильного телефона - PullRequest
Новая
       17

Приложение R / Shiny Leaflet с боковой панелью не подходит для мобильного телефона

1 голос
/ 15 апреля 2020

Я использую жидкостную сетку bootstrap в R / Shiny, чтобы создать страницу с левой боковой панелью (3) и картой (9). Вот код пользовательского интерфейса, который я использую: 

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)
              )
  )
)
  )
)

Он отлично отображается на рабочем столе и на большинстве планшетов, но на мобильных устройствах карта выпирает ниже левой боковой панели - даже в альбомной ориентации. Есть идеи, как я могу это исправить?

Мой ожидаемый результат заключается в том, что на мобильном устройстве карта уменьшает ширину двух столбцов (неуклюже) на портрете, побуждая пользователя переключиться в ландшафт, где она должна отображаться в обычном режиме. Вот рабочий пример карты с этой проблемой, чтобы дать вам представление: http://www.readingmadrid.com: 3838 / dqm

1 Ответ

1 голос
/ 16 апреля 2020

Вам нужно будет выбрать подходящий смешанный класс для указания внутри функции fluidRow( column(3,..., например: 

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