1

I have successfully build a webapp using R Shiny framework. In that I am showing some points in Googlemap. Now how I can auto-adjustment that html page height and width so that it gets best fit in across different monitor sizes ? I tried to put things in html code as well. This " tags$iframe(width="1330", height="580", " section is loading page in Internet Explorer with scrollbar but same setting is appearing very good in Chrome in a fit view without scrllbar in same laptop monitor. How can we ensure it will good in all browser and devices like tab, smartphone ?

Below is my code:

inside UI.r:

 shinyUI(fluidPage(
     titlePanel("My webpage heading"),
     mainPanel(
         htmlOutput("mypage")
     )
 ))

inside SERVER.r:

shinyServer(function(input, output) {
    addResourcePath("library", "D:/R Projects")
    output$mypage < -renderUI({
        tags$iframe(width = "1330", height = "580",
            src = "library/mypage.html")

    })
})

top portion of mypage.html source code is as below:

<html>
  <head>
    //<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />//
    <meta name="viewport" content="width=device-width">
    <meta name="viewport" content="height=device-height">
Bhavesh Jariwala
  • 885
  • 8
  • 27
pmr
  • 998
  • 2
  • 13
  • 27

1 Answers1

2

Auto adjustment is one of the things that Shiny is good with, due the the Bootstrap framework it rests upon.

Shiny is made up of 12 columns that you get to play with.

Just make sure to use fluidPage and make good use of column. This way you don't need to open the HTML can of worms.

Here's an example:

shinyUI(fluidPage(

fluidRow(    
  column(6,
        textOutput("text_col1_row_1")),
  column(6
        textOutput("text_col2_row_1"))),

fluidRow( 
  column(6,
       textOutput("text_col1_row_2")),
  column(6,
       textOutput("text_col2_row_2"))),
   ))

This should give you a nice 4 X 4 grid which will resize as you adjust zoom or view it on different devices.

tumultous_rooster
  • 12,150
  • 32
  • 92
  • 149