заставить коробки в R Shiny иметь одинаковую высоту - PullRequest
1 голос
/ 17 октября 2019

У меня есть несколько блоков, которые расположены в жидком ряду. Когда эти блоки содержат одинаковое количество информации, нет проблем с выравниванием по высоте, и динамическая регулировка этой высоты с помощью меньшего окна браузера работает нормально.

Проблема возникает, когда поля не содержат одинаковое количество информации (например, две таблицы рядом с разными номерами строк);это приводит к тому, что высота не выравнивается аккуратно.

# NOT RUN {
## Only run this example in interactive R sessions
if (interactive()) {
  library(shiny)

  # A dashboard body with a row of infoBoxes and valueBoxes, and two rows of boxes
  body <- dashboardBody(

    # infoBoxes




    # Boxes
    fluidRow(
      box(status = "primary",
          sliderInput("orders", "Orders", min = 1, max = 2000, value = 650),
          selectInput("progress", "Progress",
                      choices = c("0%" = 0, "20%" = 20, "40%" = 40, "60%" = 60, "80%" = 80,
                                  "100%" = 100)
          )
      ),
      box(title = "Histogram box title",
          status = "warning", solidHeader = TRUE, collapsible = TRUE,
          plotOutput("plot", height = 250)
      )
    )


  )

  server <- function(input, output) {



    output$plot <- renderPlot({
      hist(rnorm(input$orders))
    })
  }

  shinyApp(
    ui = dashboardPage(
      dashboardHeader(),
      dashboardSidebar(),
      body
    ),
    server = server
  )
}
# }

Я знаю, что могу вручную установить высоту ящиков, но проблема возникает, когда я не знаю, сколько информации необходимо представить в каждомкоробка. Я не хочу делать коробку слишком короткой (и, возможно, вырезать информацию), а также не хочу делать коробку слишком высокой (и использовать слишком много места на экране). Однако я хочу, чтобы ящики имели одинаковую высоту.

Следовательно, возможно ли извлечь динамически генерируемую максимальную высоту каждого ящика и использовать эту высоту для принудительного перевода обоих ящиков на эту высоту?

Это было бы важно для меня, когда поля содержат различное количество информации, и когда размер экрана изменяется, и [например] текст одного блока переходит на две строки, а другой - нет (что приводит к несовпадающей высоте).

1 Ответ

0 голосов
/ 18 октября 2019

Это может сработать




# NOT RUN {
## Only run this example in interactive R sessions
if (interactive()) {
  library(shiny)

  # A dashboard body with a row of infoBoxes and valueBoxes, and two rows of boxes
  body <- dashboardBody(

    # infoBoxes




    # Boxes
    fluidRow(
      box(status = "primary", style="position:relative;width:100%;height:0;padding-bottom:62.75%;", 
          sliderInput("orders", "Orders", min = 1, max = 2000, value = 650),
          selectInput("progress", "Progress",
                      choices = c("0%" = 0, "20%" = 20, "40%" = 40, "60%" = 60, "80%" = 80,
                                  "100%" = 100)
          )
      ),
      box(title = "Histogram box title", style="position:relative;width:100%;height:0;padding-bottom:56.25%;", 
          status = "warning", solidHeader = TRUE, collapsible = TRUE,
          plotOutput("plot", height = 250)
      )
    )


  )

  server <- function(input, output) {



    output$plot <- renderPlot({
      hist(rnorm(input$orders))
    })
  }

  shinyApp(
    ui = dashboardPage(
      dashboardHeader(),
      dashboardSidebar(),
      body
    ),
    server = server
  )
}

поэкспериментируйте с процентом нижнего отступа, если вы хотите изменить высоту.

Надеюсь, это поможет

...