动态调整拆分布局中元素的大小到浏览器窗口

时间:2018-12-13 17:45:51

标签: css r css3 shiny

我使用splitLayout构建了一个网站,该网站水平放置元素,将可用的水平空间分成多个部分。我使用了'cellWidths = c(“ 1000px”,“ 200px”)“,所以我得到了一个宽度为1000px的元素和另一个宽度为200px的元素。

但是,我真正想要的是第二个元素应该恰好位于第一个元素的右边距和浏览器窗口的右边距之间,以便在更改浏览器窗口的大小和/或形状时,相应地调整第二个元素的宽度。我尝试过:'cellWidths = c(“ 1000px”,“ calc(100vw-1000px)”)',但不幸的是,此处无法使用'calc'。

我考虑过使用CSS,在第二个元素中包含诸如'style =“ width:” calc(100vw-1000px)“)之类的东西,但是直到现在,我仍然没有通过尝试获得任何成功。

完整的代码如下:

library(shiny)

ui <- tagList(
  splitLayout(
    cellWidths = c("1000px", "200px"),
    cellArgs = list(style = "padding: 6px; white-space: normal;"),

    fluidPage(
      style = "border: 1px solid silver; height: 627px;"
    ),

    fluidPage(
      style = "border: 1px solid silver; height: 627px",
      p("Lorem ipsum dolor sit amet, ut alterum facilis disputationi vis, summo percipitur sed ea. Stet senserit persequeris at duo, vis atqui vituperata ex, et has omittam expetenda persequeris. Id usu causae meliore, dolorem lucilius perpetua id vim. Vim at homero timeam viderer, dicunt concludaturque ea eum. Tempor ceteros facilisi ei pro, ea tantas adipisci scribentur vix.")
    )
  )
)

server <- function(input, output, session) {}

shinyApp(ui = ui, server = server)

有什么建议吗?

1 个答案:

答案 0 :(得分:1)

不幸的是,我不是R程序员,虽然我可以猜测'splitLayout'和'fluidPage'为您完成的工作,但我还不足以确切地告诉您解决的方法。

但是,您要描述的内容可以通过使用Flexbox通过CSS实现。如果您不熟悉它,这里有一些很好的信息: