Блестящий динамический макет: автоматически переносить элементы фиксированной ширины в следующую строку - PullRequest
Новая
       10

Блестящий динамический макет: автоматически переносить элементы фиксированной ширины в следующую строку

0 голосов
/ 27 ноября 2018

Мне известны макеты fluidPage() и fixedPage() для блеска.Хотя в моем случае было бы неплохо иметь другое поведение для элементов (plots / input fields / shinydashboard box).

Элементы должны иметь фиксированную ширину (и высоту) и автоматически перемещаться к следующей строке, если ширина дисплея изменяется.

Обозначения: 

[...] <- Element
| <- Right browser window border

Примеры: 

1. Big screen case
[...] [..] [.....] [...] [...]        |

2. Small screen case
[...] [..] [.....] [...] |
[...]                    |

3. Even smaller screen case
[...] [..]  |
[.....]     |
[...] [...] |

Возможна ли такая раскладка с блестящей / блестящей панелью?

1 Ответ

0 голосов
/ 30 ноября 2018

Благодаря @SimonLarsen мне удалось найти решение.Shiny предлагает flowLayout(), который поддерживает этот вид макета.К сожалению, блоки shinydashboard не могут быть использованы в этой структуре, потому что они ожидают значения ширины в рамках сетки начальной загрузки.Вам придется изменить реализацию shinydashbaord::box() для работы со значениями ширины в пикселях, и это приведет к возникновению множества других проблем в будущем.

Я выбрал следующее решение: 

shiny::fluidRow(
  shinydashboard::box(
    width = 12,
    shiny::div(
      style = "overflow-x: scroll",
      shiny::flowLayout(
        cellArgs = list(
          style = "
          min-width: 300px; 
          width: auto; 
          height: auto; 
          border: 1px solid darkgray; 
          padding: 10px;
          margin: 10px;
        "),
        plotly::plotlyOutput(
          width = "500px",
          ns("plot1")
        ),
        plotly::plotlyOutput(
          width = "500px",
          ns("plot1")
        ),
        plotly::plotlyOutput(
          width = "1045px",
          ns("plot2")
        )
      )
    )
  )
)

Я строю свои собственные блоки с фиксированной высотой и для каждого элемента графика / контента индивидуально определенной ширины.

...