【发布时间】：2020-12-03 22:35:47
【问题描述】：
我有一个看起来像这样的闪亮应用：
我想在鼠标徽标下方添加一个框 3 和框 4，但似乎无法弄清楚如何在不弄乱页面的情况下执行此操作。结果如下：
我正在使用两个fluidRow 函数来制作这些框，但我不确定如何在这样做的同时保持整个页面的完整性。任何帮助表示赞赏！代码如下：
#require packages
rqrd_Pkg = c('shiny','plotly','plyr','tidyverse',
'uuid', 'devtools', 'gtools', 'inline', 'shiny',
'shinydashboard', 'plotly', 'shinythemes',
'shinycssloaders', 'shinyjs',
'DT', 'tictoc',
'data.table', 'htmlwidgets')
require(shiny)
for(p in rqrd_Pkg){
if(!require(p,character.only = TRUE))
install.packages(p, Ncpus=8);
library(p,character.only = TRUE)
}
#include style for header
head.style <- "
/* old shiny progress indicators */
.shiny-progress-container {
position: fixed;
top: 0px;
width: 100%;
z-index: 4000;
}
.shiny-progress .progress-text {
color: #020202;
background-colort: #FF0000;
width: 225px;
left: calc(50% - 125px);
}
.progress-text {
/* Copy the below to vertically center the progress bar text box in the shiny dashboard header */
/* !important is crucial here otherwise it gets overridden by the dreaded element.style */
top: 15px !important;
text-align: center;
}
"
#initiate dashboard attributes and colors
dashboardPage(
skin = "purple",
dashboardHeader(
title = HTML("Title"),
dropdownMenu(type = "notifications", icon = tagList(icon("question-circle"), "Help"), badgeStatus = NULL, headerText = "Links",
tags$li(a(icon("external-link"), "XYZ", href = "http://info.com", target = "blank")),
tags$li(a(icon("external-link"), "ABC", href = "http://info.com", target = "blank")))
),
dashboardSidebar(sidebarMenu(
menuItem("Target Dashboard", tabName = "dashboard_tab", icon = icon("dashboard"))
)),
#################################################################################
#################################################################################
#################################################################################
#################################################################################
#Configure dashboard body.
dashboardBody(
tags$head(
tags$link(rel = "shortcut icon", href = "favicon.ico"),
tags$link(rel = "apple-touch-icon", sizes = "180x180", href = "favicon.ico"),
tags$link(rel = "icon", type = "image/png", sizes = "32x32", href = "favicon-32x32.png"),
tags$link(rel = "icon", type = "image/png", sizes = "16x16", href = "favicon-16x16.png"),
tags$style(head.style)
),
#h1(paste0("<b>","Gene summary:","</b>")),
titlePanel(div(HTML("<b>Gene summary</b>"), align = "left")),
tabItems(
tabItem(tabName = "dashboard_tab",
tags$style(HTML("
#first {
border: 4px double red;
}
#second {
border: 2px dashed blue;
}
")),
fluidRow(
valueBoxOutput("valueGeneName"),
valueBoxOutput("valueGeneRank"),
valueBoxOutput("gtexSpec"),
valueBoxOutput("valueHuman"),
valueBoxOutput("valueMouse"),
valueBoxOutput("valueNHP"),
valueBoxOutput("exprCompartment")
),
h2(paste0("Header 1"), align="left"),
#insert human logo
mainPanel(
img(src='man_log.png', height="10%", width="10%", align="left"),
),
#create boxes
fluidRow(
box(
title = "Box 1",
status = "primary",
solidHeader = TRUE,
collapsible = TRUE,
plotOutput("roc", height = "300px")
),
box(
title = "Box 2"
,status = "primary"
,solidHeader = TRUE
,collapsible = TRUE
,plotOutput("sensDNAProt", height = "300px")
)),
mainPanel(
img(src='mouse.png', height="10%", width="10%", align="left")
),
h2(paste0("Header 2"), align="left"),
#ADDING THIS CAUSES PROBLEMS!!!
fluidRow(
box(
title = "Box 3",
status = "primary",
solidHeader = TRUE,
collapsible = TRUE,
plotOutput("roc", height = "300px")
),
box(
title = "Box 4",
status = "primary",
solidHeader = TRUE,
collapsible = TRUE,
plotOutput("roc", height = "300px")
)
)
)
)
)
) `
【问题讨论】：
标签： r shiny shinydashboard shinyapps