UI: positioning widgets (UI elements) side by side.

[Luca Fenu]

Hello there,

I'm slowly tooling up on Shiny and I'm almost there for what concerns what I want my code to do.

However, I find myself constrained a little by the way the current layout of widgets (UI elements) works.
I have a few numericInput which I would like to layout side-by-side in order to save screen real estate. 

Is there already a way I can specify this in Shiny, or should I write my own definition using Bootstrap?

Thanks in advance,

Luca

[Vincent]

Below a set of ui specifications I added. I don't have anything for numer input but hopefully the below will help you get started. The first line puts radio buttons side-by-side (thanks Joe). If you figure out how to do this with numeric inputs please post back.

To adjust the height of a specific multiple-select:

tags$style(type='text/css', "#columns { height: 200px; padding-bottom: 35px;}"),

To adjust a textinput:

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

Haven't found the class name to change this for the whole app. I tried 'text' but that didn't work.

 sidebarPanel(

      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", "text { width: 15px; !important }"),

        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; }")

      ),

See also:

https://groups.google.com/forum/?fromgroups=#!topic/shiny-discuss/dmBGpK197zU

https://groups.google.com/forum/?fromgroups=#!topic/shiny-discuss/3m7cq96mcBY

[Luca Fenu]

Thanks for the input Vincent,

I'll try that out and report back...

Luca

--
You received this message because you are subscribed to the Google Groups "Shiny - Web Framework for R" group.
To unsubscribe from this group and stop receiving emails from it, send an email to shiny-discus...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Joe Cheng]

You can do this:

shinyUI(bootstrapPage(

  # ... any elements you want here ...

))

This will give you a completely empty page to put whatever inputs, outputs, or HTML you want, but with the necessary JS and CSS for Bootstrap preloaded and ready to use. Here's a simple bootstrap example:

shinyUI(bootstrapPage(

  div(class="container",

    div(class="row",

      div(class="span4", "hi"),

      div(class="span4",

        selectInput("foo", "Foo", 1:8),

        selectInput("bar", "Bar", 9:16)

      )

    )

    tags$hr()

    tags$style(type="text/css",

      " /* some CSS rules */ ",

      " /* some more rules */ "

    )

  )

))

[Luca Fenu]

Thanks Joe,

very helpful! Best,

Luca

Luca

To unsubscribe from this group and stop receiving emails from it, send an email to shiny-discuss+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Luca Fenu]

Joe, 

if I understand correctly (I'm not an html/css/js expert - not even literate) in order to place UI elements the way I want it, I must create the whole page, not just add a few <div> elements in the pagewithSidebar() code? There's no way to tweak the layout without rewriting from scratch?

I'm sorry if my question seems idiotic... but I've looked through the shiny documentation and couldn't figure out...

Luca

On Friday, 1 February 2013 08:13:06 UTC+1, Joe Cheng [RStudio] wrote:

Luca

To unsubscribe from this group and stop receiving emails from it, send an email to shiny-discuss+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Ryan Mears]

Luca,

If you go to the Bootstrap webpage and look under button size there is an example of 2 buttons side by side.

http://twitter.github.com/bootstrap/base-css.html#buttons

Basically, including buttons in the same paragraph tag  "p()" in the ui.R file will place them on the same line.

Good luck!

-Ryan

[Luca Fenu]

Thanks Ryan!

Luca

[Glen DePalma]

Could you please give more detail on how to include this in the UI.R with the wellpanel?

I am trying something like this but can't get it to produce the inputs side by side....

      wellPanel(

        p(selectInput("convertToLog1", "Convert Log:",list(

            'Yes'=1,'No'=0),selected='Yes'),

          selectInput("convertToLog2", "Convert Log:",list(

          'Yes'=1,'No'=0),selected='Yes'))

      )

I don't want to convert the whole ui.R to HTML....

Thanks

[Vincent]

The suggested approach works for buttons (e.g., below) but does not for selects.

wellPanel(

  p(actionButton('test1','Test1'), actionButton('test2','Test2'))

),

The following gets a bit closer:

      wellPanel(

          # tags$style(type="text/css", '#foo { display:inline-block; }'),

          # tags$style(type="text/css", '#bar { display:inline-block; }'),

          tags$style(type="text/css", '#foo { float:left; }'),

          tags$style(type="text/css", '#bar { float:left; }'),

          selectInput("foo", "Foo", 1:8),

          selectInput("bar", "Bar", 9:16)

      ),

But alignment is not correct (at least in my app).

or use HTML (or put the "<div ...>" in an html file and call it with includeHTML).

      HTML("<div>

            <label class='control-label' for='foo'>Foo</label>

            <select id='foo'>

              <option value='1' selected='selected'>1</option>

              <option value='2'>2</option>

            </select>

            <label class='control-label' for='bar'>Bar</label>

            <select id='bar'>

             <option value='9' selected='selected'>9</option>

              <option value='10'>10</option>

              <option value='11'>11</option>

            </select>

            </div>"),

Please let me (us) know if you get this working.

[Luca Fenu]

Here's what I did - this works with numericInput (straight copy from the latest version of my code):

      div(class="row",

          div(class="span1", ''),

          div(class="span4", # creating a new box which spans 4 

              numericInput("Papp", "Passive Permeability (*E-6cm/s):", 10),

              numericInput("Cif", "Intestinal Concentration (uM):", 100)

          ),

          div(class="span6", # creating a new box which spans 4 

              shiny::conditionalPanel(

                condition="input.UorE == 'Uptake'", 

                numericInput("Ap_Upt_Km", "Uptake Transporter Affinity (uM):", 10),htmlOutput("summary"),

                numericInput("Ap_Upt_Vmax", "Uptake Transporter Capacity (pmol/min/mg(protein)):", 100)

              ),

              shiny::conditionalPanel(

                condition="input.UorE == 'Efflux'", 

                numericInput("Ap_Efx_Vmax", "Efflux Transporter Capacity (pmol/min/mg(protein)):", 100),

                numericInput("Ap_Efx_Km", "Efflux Transporter Affinity (uM):", 10)

              )                         

          )

      ),

Hope this helps,

Luca

[Vincent]

Thanks Luca. I am curious how this integrates with sidebarpanel() in ui.R. Does everything fit nicely inside wellPanels also?

Vincent

[Luca Fenu]

Never tried wellPanel myself.

Using sidebarPanel, I find there's some issue with correctly aligning, that's why I have to add that empty div(class="span1", '') - to make sure there's no overlap (the code I posted is inserted in the mainPanel, just above a tabPanel, not the sideBar).

You can see the results 'live' at http://glimmer.rstudio.com/lucafenu/Shiny_GIT_Surfaces/ (it'll take a while to finish loading since it must complete the simulations first - but the buttons will be immediately visible).

Cheers,

Luca

[Sam]

Hi Luca

I tried to integrate your previous code in my app because it does exactky what I want. But I did not succeed.

Would you mind if you post the ui.R and server.R code here ?

Thanks

Regards

Sam

[Luca Fenu]

Hi Sam,

That code is a bit outdated and possibly broken by now but the UI part might still contains what you're looking for:

Can't yet share the server.R publicly, sorry, but here's the ui.R:

library(shiny)
# Define UI
shinyUI(pageWithSidebar(
  
  # Application title
  headerPanel("Test: BSEP Mechanistic Modelling"),
  
  # Sidebar with controls to select the variable to plot against mpg
  # and to specify whether outliers should be included
  sidebarPanel(
    numericInput("tmax", "Simulation length (mins):", 10),
    numericInput("stepX", "How many simulations (higher values for slower computation but more defined plots):", 20),
    #     numericInput("alpha", "alpha:", 0.3),
    numericInput("ClIntPv", "Passive Clearance:", 0.144),
    numericInput("Sn2IcAvKm", "Uptake (from Blood) Km:", 14, step=1),
    numericInput("Sn2IcAvVmax", "Uptake (from Blood) Vmax:", 16, step=10),
    numericInput("Ic2SnAvKm", "Efflux (to Blood) Km:", 7.7, step=1),
    numericInput("Ic2SnAvVmax", "Efflux (to Blood) Vmax:", 150, step=10)
  ),
  
  # Show the tabbed plots for the requested variable(s)
  mainPanel(
    tabsetPanel(
      tabPanel("S.C = Substrate in Cell", plotOutput("S.C_Plot")), 
      tabPanel("BIC = Bile ?  ?", plotOutput("BIC_Plot")), 
      tabPanel("BEI = Bile Extraction Index", plotOutput("BEI_Plot"))
    )
  )
))

or a slightly different version:

# Shiny_GIT_Surfaces
library(shiny)
# Define UI
shinyUI(
  pageWithSidebar(
    
    # Application title
    headerPanel("Test: Gastro-Intestinal Mechanistic Modelling"),
    
    # Sidebar with controls to select the variable to plot against mpg
    # and to specify whether outliers should be included
    sidebarPanel(
      uiOutput("choosePhysiology"),
#       numericInput("GI_length", "GI_length (m):", .1, step=.1),
#       numericInput("GI_radius", "GI_radius (m):", .0175, step=.0001),
#       numericInput("GI_TrTime", "GI_TrTime (mins):", 5, step=1),
      shiny::conditionalPanel(
        condition="input.Physiology",
        uiOutput("setGI_length"),
        uiOutput("setGI_radius"),
        uiOutput("setGI_TrTime")
      ),
      shiny::br(),
      radioButtons(inputId='Times', label='Spacing between simulation intervals', choices=c('linear', 'geometric', 'hybrid'), selected='hybrid'),
      shiny::conditionalPanel(
        condition="input.Times == 'linear'", 
        numericInput("LinearInterval", "How often do you want to save (in mins):", 1)
      ),
      shiny::conditionalPanel(
        condition="input.Times == 'geometric'", 
        numericInput("spacing", "how many time-points for each power of ten?:", 3)
      ),
      shiny::br(),
      #     radioButtons(inputId='Simultaneous', label='Allow multiple transport mechanisms', choices=c('yes', 'no'), selected='yes'),
      radioButtons(inputId='UorE', label='Uptake or Efflux', choices=c('Uptake', 'Efflux'))
    ),
    
    # Show the tabbed plots for the requested variable(s)
    mainPanel(
      tabsetPanel(
        tabPanel("Impact along Km and Vmax axes (empty)",

                 shiny::conditionalPanel(
                   condition="input.UorE == 'Uptake'", 
                   numericInput("Ap_Upt_Km", "Uptake Transporter Affinity (uM):", 10),

                   numericInput("Ap_Upt_Vmax", "Uptake Transporter Capacity (pmol/min/mg(protein)):", 100), 
                   plotOutput("K.V_Plot")

                 ),
                 shiny::conditionalPanel(
                   condition="input.UorE == 'Efflux'", 

                   numericInput("Ap_Efx_Km", "Efflux Transporter Affinity (uM):", 10),

                   numericInput("Ap_Efx_Vmax", "Efflux Transporter Capacity (pmol/min/mg(protein)):", 100)

                 )
        ), 
        tabPanel("Impact along Perm and Cif axes (empty)", 
                 numericInput("Papp", "Passive Permeability (1e-6cm/s):", 10),
                 numericInput("Cif", "Intestinal Concentration (uM):", 100),
                 plotOutput("P.C_Plot")
        ),
        tabPanel("Substrate amount over time", 
                 plotOutput("S.t_Plot")
        ),
        tabPanel("just beta texting", 
                 shiny::textOutput("testText"),
                 shiny::tableOutput("tablePhysiology")
        ) 
      )
    )
  )
)
Hope this helps.
Luca

--
You received this message because you are subscribed to a topic in the Google Groups "Shiny - Web Framework for R" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/shiny-discuss/TnG5KCnaG3U/unsubscribe.
To unsubscribe from this group and all its topics, send an email to shiny-discus...@googlegroups.com.

[Vincent Nijs]

I used the following to put two numericInput elements side-by-side inside a sidebar panel

div(class="row-fluid",

   div(class="span6",numericInput("viz_plot_height", label = "Plot height:", min = 100, step = 50, value = 650)),  

   div(class="span6", numericInput("viz_plot_width", label = "Plot width:", min = 100, step = 50, value = 650))

)

[mnu...@twilio.com]

Hey Vincent,

When I use your code to put two numericInputs side by side, the input boxes overlap with one another. Is there anyway to decrease the width of these boxes (there is a lot of trailing whitespace).

Thanks,

Mario

[Vincent Nijs]

I put the following in a css file in the www directory. fac_cutoff is the input you want to control.

#fac_cutoff { 

  max-width: 60px; 

}

in ui.R you would need:

includeCSS('www/style.css'),

[rahul kumar]

 

First Div

Second Div

 

Source : http://www.corelangs.com/css/box/divindiv.html

 

Ling

[jeff.v...@protectwise.com]

Why not just put this within a (say, wellPanel) object... 

fluidRow(
            column(3, checkboxInput(inputId = 'norm', 'Normalize', value = T)),
           
            column(3, actionButton('summarize', 'Run Summary'))
          )