在闪亮的 R 中，fluidPage 上的控制小部件的对齐方式

Question

我正在开发一个闪亮的应用程序，但遇到了根据浏览器窗口的大小放置小部件的问题。我正在使用嵌套列和 FluidRow 来放置我的小部件（请参阅下面的代码）。我希望小部件 B 和 D 的左侧对齐，B 和 E 的右侧对齐（参见图 1），但是当我增加窗口的大小时，在某些时候右侧的对齐不再有效（图2）。

图1：正确的布局

图2：错误的布局

这是一个可重现的示例：
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"))
))

服务器.R:

library(shiny)

shinyServer(function(input, output) {})

Answer 1

好的，这里有一些建议：

1) 将numericInputs宽度固定为 100%。所有输入看起来很长，但至少您可以完全控制输入大小与列大小。

要复制的代码：

    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）使用fixedPage布局。这使得拉伸变得不太“好”，但如果您不怀疑用户一直在更改页面大小，那么这可能是一个有效的选择。

要复制的代码：

    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）这可能最接近您正在寻找的内容。碰巧的是，column(...)需要额外的参数，这些参数可以用来影响具有类似 html 属性的样式。因此，column(3, ..., align = 'right')将您的列与（其父列的！）的右边框对齐。但是，由于您的输入“B”最终会变得比实际列宽更小，因此除非您再次将“B”宽度固定为 100% = 全列宽度，否则这并没有多大帮助。

要复制的代码：

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

我希望这能以某种方式回答你的问题。