Question

我试图用2个水平井面板编写一个闪亮的布局，左边一个在右边的面板上，但右边的面板应该由2个垂直井面板组成。

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

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)

看起来应该是这样的，两个wellPanel都会自动适应最长的一个

Answer 1

这不是很简单。

我在洞穴row的列周围添加了postion:relative。然后我制作了第一个较短的列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

我无法获得上面的解决方案来适合我的用例，但是可以通过为每个wellPanel手动指定相同的高度来使其工作。在每种情况下都很难对高度进行硬编码，但这是一个简单的解决方案，通常效果很好。例如：

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

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

2 个答案: