Reduce unused area of sidebarPanel

Question

As the screen shot shows - the sidebarPanel uses only about 50% of the area it covers. This also won't change if I take out 'fileInput' (it only extends horizontally as much as space is available).

The UI code is totally boiler plate which is why I don't think there is much point in posting it. The effect stays the same even when I take out all of the UI input fields. As a matter fact the width of the sidebarPanel is apparently calculated independent of its content but depends on a fixed ratio.

I would like to adjust the size or sidebar-/mainPanel-ratio manually. How could I achieve that?

Answer 1

This works for me. Place this outside the shinyUI object:

narrowSidebar <- HTML('<style>.span4 {min-width: 265px; max-width: 265px; }</style>')

And place this at the top of sidebarPanel:

tags$head(narrowSidebar), ...

You can change the main panel by repeating the above process, but changing "span4" to "span8".

It might help to understand what's going on. The default ShinyUI uses Bootstrap for formatting. Bootstrap uses a 12-unit grid to layout content. You use "span#" to have any container span that much of the grid.

Shiny uses span4 for the side bar (4/12 = 1/3 of the page), and 8 for the main panel (8/12 = 2/3 of the page).

I honestly think it should be 3/9 or 2/12, but using the above tricks it's not too hard to style things how you want.

Answer 2

I don't know since when, but sidebarPanel and mainPanel now have an additional argument width. So you can adjust the panels size directly in the usual grid notion. (Values 1 to 12)