控制小部件在有光泽的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"))
))

server.R：

library(shiny)

shinyServer(function(input, output) {})

Answer 1

好的，这里有一些建议：

1）将numericInputs修改为100％宽度。 Alle输入看起来很冗长，但至少您可以完全控制输入大小与列大小。

要复制的代码：

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

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