Question

因此，我在Shiny中创建了一个正在运行的应用程序，并将其也上传到了Shinyapps.io。当我创建该应用程序时，我正在家里使用屏幕尺寸为24英寸的计算机。现在我的一个朋友正在检查我的应用程序时告诉我，他的屏幕上的标签重叠（我的屏幕上不是这种情况）。因此，我现在的问题是，如何根据用户的屏幕尺寸自动调整某些框中的内容大小。

我尝试调整框的大小，但这不会更改里面的内容。我确定有一个CSS解决方案，但是我还找不到。

这是我的一个标签页的一个示例（我分别在global.R环境中进行了所有点击，然后jsut将它们全部添加到了ui.R中）

这是我的标签之一。如果屏幕尺寸较小，则复选框标签会重叠。


# tab6 --> africa
tab6 = tabItem(
  tags$head(
    tags$style(HTML("
                    .multicol {
                    -webkit-column-count: 3; /* Chrome, Safari, Opera */
                    -moz-column-count: 3; /* Firefox */
                    column-count: 3;
                    }
                    "))

    ),
  tabName = "africa",
  box(height = 770,width = 6, plotOutput("graph6", hover = "plot_hover6", height = 650),verbatimTextOutput("info6")), # box1 closing
  box(title = "Settings",  height = 770, width = 6,
      wellPanel(
        sliderInput(inputId = "range6",
                    label = "Choose the year range:",
                    min = 2002, max = 2020, value = c(2002,2020)),
        selectInput(inputId = "dis6",
                    label = "Choose the district",
                    choices = unique(Africa$District)),
        tags$div(class = "multicol", prettyCheckboxGroup(inputId = "con6",
                                                         label = "Choose the place of birth",choices = unique(Africa$Country),selected = unique(Africa$Country)[27],outline = T, plain = T, icon = icon("check-circle")))))#box2 closing
    )# tabitem closing

这是我的用户界面，我只是在其中添加了我在全球环境中所做的所有选项卡。


# head of the dashboard
header = dashboardHeader(title = "Vienna")

# sidebar
sidebar = dashboardSidebar(
  sidebarMenu(
    menuItem(text = "Read Me", tabName = "readme", icon = icon("readme")),
    menuItem(text = "Migration", tabName = "migration", icon = icon("globe-americas"),menuSubItem(text = "EU before 2004", tabName = "eu1", icon = icon("bar-chart")),menuSubItem(text = "EU after 2004", tabName = "eu2", icon = icon("bar-chart")), menuSubItem(text = "Non-EU Countries", tabName = "noneu", icon = icon("bar-chart")),menuSubItem(text = "America", tabName = "america", icon = icon("bar-chart")),menuSubItem(text = "Asia", tabName = "asia", icon = icon("bar-chart")), menuSubItem(text = "Africa", tabName = "africa", icon = icon("bar-chart")),  menuSubItem(text = "Oceania", tabName = "oceania", icon = icon("bar-chart"))),# first menu item 
    menuItem(text = "Real Estate Prices", icon = icon("sign"), tabName = "realestate", menuSubItem(text = "Appartments", tabName = "app", icon = icon("building")),  menuSubItem(text = "Houses", tabName = "house", icon = icon("home")), menuSubItem(text = "Land", tabName = "land", icon = icon("layer-group"))
    )# second menu item
  ) # sidebar menu
)# dashboard sidebar

#C0C0C0
# body 
body = dashboardBody(fluidPage(
  tags$head(tags$style(HTML('
                            /* body */
                            .content-wrapper, .right-side {
                            background-color: #96A2A4;
                            }

                            '))),

  tabItems(
    # ReadMe
    tab0,
    # Denography
    tab1, tab2, tab3, tab4, tab5, tab6, tab7,
    # Property Prices
    tab8, tab9, tab10
  ) # tabITEMS   
  )# fluid page
)

# dashboardbody



# full UI compressed
ui = dashboardPage(header, sidebar, body, skin = "blue")

所以我想做的是创建一个box（），它会根据屏幕的大小来调整内部内容的大小（f.i. CheckBox标签）。

如何避免Shiny的Groupcheckbox中的标签重叠？

0 个答案: