Shiny 中两个并排的井板的底部对齐

Question

我正在尝试使用 2 个水平井面板编写闪亮的布局，一个在右侧，一个在左侧，但右侧的一个应该由 2 个垂直井面板本身组成。

我不能让它们在底部对齐。 那可能吗？ 我的简化应用程序如下。 我试图添加一个fluidrow来放置它们，但它没有改变任何东西。

ui <- tagList( navbarPage(id="navbar", title="title",
                          tabPanel(title="Home",
                                   titlePanel(title="Welcome"),
                                   column(6,
                                          wellPanel(
                                               h2("Hello World"),
                                               br(),
                                               h4("some text"))),
                                   column(6,
                                          fluidRow(
                                               wellPanel(
                                                    h2("News"),
                                                    br(),
                                                    h4("Some other text"),
                                                    br(),
                                                    fluidRow(column(6, 
                                                                    h5("Some info:")),
                                                             column(6, 
                                                                    div(actionButton("button", "button"), style="float:right") 
                                                             )))),
                                          fluidRow(
                                               wellPanel(div(img(src="https://cran.r-project.org/Rlogo.svg", width=100), style="text-align: center;")
                                               )))),
                          tabPanel(title="anothertabl", value="anothertabl"))
)
server=function(input, output, session){}
shinyApp(ui, server)

它应该是这样的，两个井板自动适应最长的

Answer 1

这并不简单。

我在我插入postion:relative的row周围添加了row 。 然后我制作了第一个较短的列position:absolute并将其设置为跨越整个高度， top:0;bottom:0;left:0; . 由于第一列具有absolute位置，我们必须向第二列添加offset = 6 ，否则两列会相互重叠。

library(shiny)
ui <- tagList( navbarPage(id="navbar", title="title",
                          tabPanel(title="Home",
                                   titlePanel(title="Welcome"),
                                   fluidRow(
                                     style = "position:relative",
                                     column(6,
                                            style = "position:absolute;top:0;bottom:0;left:0;padding-bottom:19px",
                                            wellPanel(
                                              style = "height:100%;",
                                              h2("Hello World"),
                                              br(),
                                              h4("some text"))),
                                     column(6,
                                            fluidRow(
                                              wellPanel(
                                                h2("News"),
                                                br(),
                                                h4("Some other text"),
                                                br(),
                                                fluidRow(column(6, 
                                                                h5("Some info:")),
                                                         column(6, 
                                                                div(actionButton("button", "button"), style="float:right") 
                                                         )))),
                                            fluidRow(
                                              wellPanel(div(img(src="https://cran.r-project.org/Rlogo.svg", width=100), style="text-align: center;")
                                              )),
                                            offset = 6)

                                   )
                                   ),
                          tabPanel(title="anothertabl", value="anothertabl"))
)
server=function(input, output, session){}
shinyApp(ui, server)

希望这可以帮助！

Answer 2

我无法让上述解决方案适用于我的用例，但是通过为每个井面板手动指定相同的高度来使其工作。 在每种情况下都对高度进行硬编码可能并不理想，但这是一个简单的解决方案，通常可以正常工作。 例如：

fluidRow(
  column(width = 3, offset = 3,
         wellPanel(style = "height:150px",
                   "wellPanel1 content")),
  column(width = 3,
         wellPanel(style = "height:150px", 
                   "wellPanel2 content"))
)