sizing shiny elements

[Vincent]

If you put the following just below 'sidebarPanel' in ui.R various elements in your shiny app will be resized. I you have other/better ways to make adjustments please share.     

    tags$head(

        tags$style(type="text/css", "label.radio { display: inline-block; }", ".radio input[type=\"radio\"] { float: none; }"),

        tags$style(type="text/css", "select { max-width: 200px; }"),

        tags$style(type="text/css", "textarea { max-width: 185px; }"),

        tags$style(type="text/css", ".jslider { max-width: 200px; }"),

        tags$style(type='text/css', ".well { max-width: 310px; }"),

        tags$style(type='text/css', ".span4 { max-width: 310px; }")

      ),

[Ksenia Titorenko]

Hi, i tried to use your method for my ui.R

library(shiny)

# Define UI for application that plots random distributions 

shinyUI(pageWithSidebar(

  

  # Application title

  headerPanel("Clustering results"),

  

  # Sidebar with a slider input for number of observations

  sidebarPanel(

    helpText("There are 615 experiments\n",

             "and 230595 peptides.",

             "minExp = 2, minPep = 2."),

   

    selectInput("k","Method for choosing k for SVD:", 

                choices = c("Akaike information criteria (k = )", "Amended description length (k = )", 

                            "Percentange of var. explained = 0.5 (k = )","Percentange of var. explained = 0.8 (k = )",

                            "Percentange of var. explained = 0.95 (k = )")

    )

  ),

  tags$head(

    tags$style(type="text/css", "label.radio { display: inline-block; }", ".radio input[type=\"radio\"] { float: none; }"),

    tags$style(type="text/css", "select { max-width: 200px; }"),

    tags$style(type="text/css", "textarea { max-width: 185px; }"),

    tags$style(type="text/css", ".jslider { max-width: 200px; }"),

    tags$style(type='text/css', ".well { max-width: 310px; }"),

    tags$style(type='text/css', ".span4 { max-width: 310px; }")

  ),

  

  

  # Show a plot of the generated distribution

  mainPanel(

    tabsetPanel(

      tabPanel("Heatmap", plotOutput("heatmap",width = "800px", height = "800px")), 

      

      

      #tabPanel("Heatmap", plotOutput("heatmap",width = "1000px", height = "900px")), 

      tabPanel("Summary", verbatimTextOutput("summary"))

    )

  )

  

))

but it doesn't work:

Error in pageWithSidebar(headerPanel("Clustering results"), sidebarPanel(helpText("There are 615 experiments\n",  : 

  unused argument (mainPanel(tabsetPanel(tabPanel("Heatmap", plotOutput("heatmap", width = "800px", height = "800px")), tabPanel("Summary", verbatimTextOutput("summary")))))

Thank you in advance. 

[Vincent]

The block needs to be in sidebarPanel. This should work:

library(shiny)

# Define UI for application that plots random distributions 

shinyUI(

  pageWithSidebar(

    # Application title

    headerPanel("Clustering results"),

    

    # Sidebar with a slider input for number of observations

    sidebarPanel(

      tags$head(

        tags$style(type="text/css", "select { max-width: 200px; }"),

        tags$style(type="text/css", "textarea { max-width: 185px; }"),

        tags$style(type="text/css", ".jslider { max-width: 200px; }"),

        tags$style(type='text/css', ".well { max-width: 310px; }"),

        tags$style(type='text/css', ".span4 { max-width: 310px; }")

      ),

      helpText("There are 615 experiments\n",

               "and 230595 peptides.",

               "minExp = 2, minPep = 2."),

     

      selectInput("k","Method for choosing k for SVD:", 

                  choices = c("Akaike information criteria (k = )", "Amended description length (k = )", 

                              "Percentange of var. explained = 0.5 (k = )","Percentange of var. explained = 0.8 (k = )",

                              "Percentange of var. explained = 0.95 (k = )")

      )

    ),

    

    # Show a plot of the generated distribution

    mainPanel(

      tabsetPanel(

        tabPanel("Heatmap", plotOutput("heatmap",width = "800px", height = "800px")), 

        

        

        #tabPanel("Heatmap", plotOutput("heatmap",width = "1000px", height = "900px")), 

        tabPanel("Summary", verbatimTextOutput("summary"))

      )

    )

  )

)

[Ksenia Titorenko]

Thank you! But still I couldn't change the size of select input. Now it is displayed as "Akaike information criteria (k", but I need "Akaike information criteria (k =  ) "

Ksenia.

[Vincent]

You have to change the relevant values to make things as big as you need them. See below

library(shiny)

# Define UI for application that plots random distributions 

shinyUI(

  pageWithSidebar(

    # Application title

    headerPanel("Clustering results"),

    

    # Sidebar with a slider input for number of observations

    sidebarPanel(

      tags$head(

        tags$style(type="text/css", "select { width: 400px; }"),

        tags$style(type="text/css", "textarea { max-width: 185px; }"),

        tags$style(type="text/css", ".jslider { max-width: 200px; }"),

        tags$style(type='text/css', ".well { max-width: 430px; }"),

        tags$style(type='text/css', ".span4 { max-width: 430px; }")

      ),

      helpText("There are 615 experiments\n",

               "and 230595 peptides.",

               "minExp = 2, minPep = 2."),

     

      selectInput("k","Method for choosing k for SVD:", 

                  choices = c("Akaike information criteria (k = )", "Amended description length (k = )", 

                              "Percentange of var. explained = 0.5 (k = )","Percentange of var. explained = 0.8 (k = )",

                              "Percentange of var. explained = 0.95 (k = )")

      )

    ),

    

    # Show a plot of the generated distribution

    mainPanel(

      tabsetPanel(

        tabPanel("Heatmap", plotOutput("heatmap",width = "800px", height = "800px")), 

        

        

        #tabPanel("Heatmap", plotOutput("heatmap",width = "1000px", height = "900px")), 

        tabPanel("Summary", verbatimTextOutput("summary"))

      )

    )

  )

)

[Andrew Gormley]

Which of these change a numericInput box - none of them seem to affect the size of mine...
Also is there a specified way of setting the width of tabsetPanels?
Thanks
Andrew

[Victor Kryukov]

Vincent, thanks a lot of this tip - it solved one of my problems (max-width: 250px works OK for me). Now my other problem is that when I increase the width of my browser window, the tablet panel (span8) stays at ~65% of the width of the browser window and therefore I have some empty space on the right. Is there an easy way to make span8 take all the remaining space?

[Alex Brown]

The convenience utilities textInput, selectInput and friends just generate HTML.  You can always make your own from tags$div or similar, and then you can provide classes and ids to your heart's content.

The same goes for sidebarPanel, mainPanel and friends.

-Alex

On Wednesday, January 30, 2013 2:39:43 AM UTC-8, Vincent wrote:

[Kirill Savin]

Maybe the topic is obsolete, but here is a set of CSS tags to make fixed-width sidebar panel (set 275px wide) and flexible main panel (fills width to the right). Use standard page with sidebar; copy-paste the code and save as *.css file; add tags$link(rel="stylesheet", type="text/css", href="filename.css")into tags$head


.row-fluid {
    padding-left: 275px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.row-fluid .span4 {
    position: relative;
    float:left;
    width: 275px;
    right: 285px;
    margin-right: -275px;
}
.row-fluid .span8 {
    float: right;
    position: relative;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
}
.well {
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 0px;
    width: auto;
}
textarea, .jslider, select{
    width: 100%;
}
input{
    width: 230px;
}

[Stéphane Laurent]

The width fills well to the right but when I change the values of 275px and 285px, nothing changes. I'd like to reduce the width of the sidebar panel.

[Kirill Savin]

It changes. Set to 200px. The only problem with this approach is that title on header panel does not align to the left. Who wants titles anyway :-). I leave title property blank and set windowTitle to the name of the app, so that I still have the name of the app on browser tab.
headerPanel(title = "", windowTitle = "Enter your title here")

.row-fluid {
    padding-left: 190px;

    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.row-fluid .span4 {
    position: relative;
    float:left;

    width: 190px;
    right: 200px;
    margin-right: -190px;

}
.row-fluid .span8 {
    float: right;
    position: relative;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
}
.well {
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 0px;
    width: auto;
}
textarea, .jslider, select{
    width: 100%;
}

/* inputs have to be sized separately */
input{
    width: 145px;

[Frederic Commo]

Thanks for the trick. It works fine.

But I'm a newbie in css.
What would be the syntax in order to change the font-size inside selectInput() or textInput() ?

For other newbies, this command allows to modify also buttom sizes, spacing and text:

tags$style(type="text/css", "label.radio { display: inline-block; font-size:18px; margin-left: 18px;}",
                     ".radio input[type=\"radio\"] { float: none; width:18px; height:18px; }")

Thanks

On Wednesday, January 30, 2013 2:39:43 AM UTC-8, Vincent wrote:

[Stéphane Laurent]

About the size of the sidebar, it is nice to do:

                     sidebarPanel(

                       style="min-width:235px;max-width:375px", 

                       ..........

[Frederic Commo]

I got the element names, using firebug

These lines adjust font and box sizes on selectInput() and textInput()

          tags$style(type="text/css", "select.shiny-bound-input { font-size:20px; height:35px;}"),
          tags$style(type="text/css", "input.shiny-bound-input { font-size:20px; height:35px;}"),

Fred

[Nicholas Crookston]

Fred (et al):

I've tried for hours to get the selectInput widget to change size (font and some other features) and I tried the suggestion posted by Fred (thanks).

Consider the ur.R code in the shiny examples "02_text". I tried Freds code and I've also tried the following:

 

    tags$style(type="text/css", "#dataset { font-size:10px; height:12px; width:50px;}"),

    tags$style(type="text/css", "#obs     { font-size:10px; height:12px; width:50px;}"),

Fred's code and my code changes the input widget (the one where the number of observations is entered), but for some reason I can't get selectInput attributes to change.  Any suggestions?

[Laurent Franckx]

Hello

What line would I need to add to modify the maximum width of a textInput() field?

Thx
Laurent

[Sergio Fernández]

I would like to ask something related. 

I want to resize a verbatimTextOutput() that is so small in my shiny webpage.... How could I do that?

Thank you!