Alignment of control widgets on fluidPage in shiny R

Question

I am working on a shiny app, but ran into a problem with the placement of widgets depending on the size of the browser window. I am using nested column and fluidRow to place my widgets (see code below). I want the left side of widgets B and D aligned, and the right side of B and E (see Fig 1), but when I increase the size of the window, at some point the alignment of the right side doesn't hold anymore (Fig 2).

Fig 1: correct layout

Fig 2: incorrect layout

Here is a reproducible example:
ui.R:

library(shiny)

shinyUI(fluidPage(column(
6,fluidRow(column(6, numericInput("a", label = "A", 0)),
           column(6, numericInput("b", label = "B", 0))),
fluidRow(
    column(6, numericInput("c", label = "C", 0)),
    column(3, numericInput("d", label = "D", 0)),
    column(3, numericInput("e", label = "E", 0))
)
 ),
 column(5, offset=1,h1("other stuff"))
))

server.R:

library(shiny)

shinyServer(function(input, output) {})

Answer 1

Okay, here are some suggestions:

1) Fix your numericInputs to 100% width. Alle Inputs will be looking lengthy, but at least you have total control over input size vs. column size.

Code to copy:

    shinyUI(fluidPage(column(
        6,fluidRow(column(6, numericInput("a", label = "A", 0, width = '100%')),
                   column(6, numericInput("b", label = "B", 0, width = '100%'))),
        fluidRow(
            column(6, numericInput("c", label = "C", 0, width = '100%')),
            column(3, numericInput("d", label = "D", 0, width = '100%')),
            column(3, numericInput("e", label = "E", 0, width = '100%'))
        )),
        column(5, offset=1,h1("other stuff"))
    ))

2) Use a fixedPage layout. This makes stretching less "nice", but if you dont suspect your users to be changing page sizes all the time, it might be a valid choice.

Code to copy:

    shinyUI(fixedPage(column(
        6,fixedRow(column(6, numericInput("a", label = "A", 0)),
                   column(6, numericInput("b", label = "B", 0))),
        fixedRow(
            column(6, numericInput("c", label = "C", 0)),
            column(3, numericInput("d", label = "D", 0)),
            column(3, numericInput("e", label = "E", 0))
        )),
        column(5, offset=1,h1("other stuff"))
    ))

3) This is probably closest to what you were looking for. As it happens, column(...) takes additional arguements, which can be used to influence style with html-like attributes. So column(3, ..., align = 'right') aligns your column to the right border (of its parent column!). But, since your Input "B" eventually becomes smaller, than the actual column width, this doesn't help much unless you again fix "B"s width to 100% = full column width.

Code to copy:

    shinyUI(fluidPage(column(
        6, fluidRow(column(6, numericInput("a", label = "A", 0)),
                    column(6, numericInput("b", label = "B", 0, width = '100%'))),
        fluidRow(
          column(6, numericInput("c", label = "C", 0)),
          column(3, numericInput("d", label = "D", 0)),
          column(3, numericInput("e", label = "E", 0), align = 'right')
        )),
        column(5, offset=1,h1("other stuff"))
    ))

I hope this somehow answers your questions.