How to adjust the width of sidebarPanel without affect subsequent sidebarPanel widths in R Shiny

Question

I am trying to change the width of the sidebarPanel in R Shiny so that my mainPanel has more 'room' to display two graphs side-by-side. The graphs are displayed in their respective sidebarPanels in the mainPanel. Hence there are three sidebarPanels: the first used for data selection/choice for display in the remaining two sidebarPanels.

However, when I change the width of this first sidebarPanel, all the sidebarPanels take on this width. How do I prevent this from happening ?

The ui.r code I am using as an example is found at: https://github.com/EconometricsBySimulation/2013-06-11-Shiny-Exploration/blob/master/ui.R

And the server.r code example is found at: https://github.com/EconometricsBySimulation/2013-06-11-Shiny-Exploration/blob/master/server.R

I am using the following to adjust the width of the first sidebarPanel in the ui.r:

left=sidebarPanel(
         tags$head(
           tags$style(type="text/css", "select { width: 100px; }"), # defines width of dropdown panel
           tags$style(type='text/css', ".span4 { max-width: 150px; }") # defines width of panel containing dropdown panel
           ),

But as noted this causes the subsequent panels to take on its width. Any ideas on how I can keep this or a narrower setting for the width of the first sidebarPanel, and have the widths of the second (middle) and third (right) sidebarPanels be each half the width of the remaining space ?

Many thanks in advance!

Answer 1

Using sidebarPanel looks a bit twisted to me, wellPanel might be a better choice. Try the following:

 left=wellPanel(
   tags$style(type="text/css", '#leftPanel { width:200px; float:left;}'),
   id = "leftPanel",
   selectInput .... as before

This give the panel an id and assigns as style. Do something similar for the other panels.