Как настроить размер и ширину элементов, отображаемых в блестящем приложении, с помощью Shinydashboard - PullRequest
Новая
       12

Как настроить размер и ширину элементов, отображаемых в блестящем приложении, с помощью Shinydashboard

0 голосов
/ 19 апреля 2020

Надеюсь, ты в порядке. Я работаю над созданием блестящего приложения для отображения некоторых данных из традиционного iris. Код для отображения приложения будет установлен следующим образом: 

library(dplyr)
library(stringr)
library(shiny)
library(shinymaterial)
library(plotly)
library(viridisLite)
library(tidyverse)
library(shinyWidgets)
library(DT)
library(RColorBrewer)
library(shinyjs)
library(leaflet)
library(leaflet.extras)
library(scales)
#Data
data("iris")
#ui design
ui <- material_page(
  nav_bar_color = "blue",

  title = "Iris screen",
  shinyjs::useShinyjs(),
  tags$head(
    tags$link(rel = "stylesheet", type = "text/css", href = "style.css"),
    tags$link(rel = "stylesheet", type = "text/css", href = "css/bootstrap.min.css"),
    tags$script(type = "text/javascript", src = "jquery_browser.js")
  ),
  tags$head(tags$link(rel="shortcut icon", href="favicon.ico")),
  div(id = "wait", style = "    position: fixed;
      top: 0rem;
      margin: auto;
      height: 100px;
      width: 100px;
      margin: 20% auto; /* Will not center vertically and won't work in IE6/7. */
      left: 0;
      right: 0;
      /* display: none; */
      opacity: 1;"),
  #---- material_side_nav ----
  material_side_nav(
    fixed = TRUE, 
    background_color = "white",
    #image_source = "img/corona-4938929_1920.jpg",
    tags$a(class="sidenav-close", "data-target"="slide-out", href="#", "x"),
    # Place side-nav tabs within side-nav
    material_side_nav_tabs(
      side_nav_tabs = c(
        "Tab1" = "e1",
        "Tab2" = "e2"
      ),
      icons = c("map","format_list_bulleted")
    ),
    div(style="height:50px")
  ),
  #---- UI objects ----
  material_side_nav_tab_content(
    side_nav_tab_id = "e1",
    DT::dataTableOutput('contents')
  ),
  material_side_nav_tab_content(
    side_nav_tab_id = "e2",
    sidebarLayout(
      sidebarPanel("Escoje tu flor",width=1,
                   uiOutput("provOutput")),
      mainPanel(DT::dataTableOutput('contents2')))
  )

  )

#server design
server <- function(input, output) {

  output$provOutput <- renderUI({
    selectInput("provInput", "Provincia",
                sort(unique(iris$Species)),
                selected = "setosa")
  })

  filtered3 <- reactive({

    filtered3 <- iris

  })

  filtered31 <- reactive({

    filtered31 <- iris %>%
      filter(Species == req(input$provInput))
    filtered31 <- as.data.frame(filtered31)
  })


  output$contents <- DT::renderDataTable({filtered3()},rownames= FALSE)

  output$contents2 <- DT::renderDataTable({filtered31()},rownames= FALSE)


}
shinyApp(ui = ui, server = server)

Приложение работает нормально, но проблемы возникают, когда я отображаю его в веб-поисковике. Я получил это в Tab1:

enter image description here

И для Tab2 я получил это: enter image description here

Мои вопросы обведены оранжевым. В Tab1 отображаемая таблица выглядит довольно большой, так что невозможно правильно увидеть такие элементы, как компоненты show и search. Для Tab2 проблема та же, но здесь я не знаю, как уменьшить ширину sidebarPanel.

Можно ли как-то помочь в отображении корректно отображаемых таблиц, показывающих компоненты шоу и поиска, и также уменьшить размер sidebarPanel? Я пытался исправить это, но мои знания htlm очень ограничены. Большое спасибо за вашу помощь.

...