我正在使用R Shiny Dashboard软件包来创建仪表板。我实际上想要一个固定的标题,当我向下滚动时它不会移动。在此标题的右上角,我想放置一个图像。我的css文件名为“ remaniement”,位于文件夹\ www
中第一个想法:例如,我尝试对每个元素的宽度进行参数化,例如将.skin-blue .main-header .navbar
的宽度设置为80%,将我的图片的宽度设置为20%,但是当浏览器窗口大小更改时出现问题。
我试图将页眉宽度设置为100%,并将图像放在页眉上方。我不知道为什么,即使将css文件放在z-index: 9999999;
上,图像也始终位于标题下。
对于以上两个想法,我尝试使用在功能dashboardBody()或dashboardHeader()上编码的图片,但均未成功。
这里是我的ui.R代码:
library(shiny) library(shinydashboard) header<-dashboardHeader(title = "Titre",disable = FALSE) sidebar<-dashboardSidebar(sidebarMenu(menuItem("Home", tabName = "home", icon = icon("home")))) body<-dashboardBody( tags$link(rel = "stylesheet", href = "remaniement.css"), tags$div(class="windows",tags$a(href='https://www.microsoft.com/en-gb/windows',target="_blank",tags$img(src='windows.png',width = 80)))) ui<-dashboardPage(skin = "blue",header,sidebar,body)
我的服务器。R代码:
server <- function(input, output,session) {}
和我的CSS代码:
/*image that a want to put in the header*/ .windows{ position: fixed; right: 0; top: 0; white-space: nowrap; overflow: visible; background-color: #FFFFFF; z-index:9999999;} /* logo */ .skin-blue .main-header .logo { background-color: #3c8dbc; color: #FFF; position: fixed; width: 230px; white-space: nowrap; overflow: visible;} /* navbar (rest of the header) */ .skin-blue .main-header .navbar { width:80%; position: fixed; white-space: nowrap; overflow: visible; background: linear-gradient(90deg, #3c8dbc, #ffffff); z-index:850;} .skin-blue .main-header .navbar .sidebar-toggle { position: fixed; white-space: nowrap; overflow: visible;} .sidebar { color: #FFF; position: fixed; width: 220px; white-space: nowrap; overflow: visible;} .content-wrapper, .right-side, .main-footer{ -webkit-transition: -webkit-transform 0.3s ease-in-out, margin 0.3s ease-in-out; -moz-transition: -moz-transform 0.3s ease-in-out, margin 0.3s ease-in-out; -o-transition: -o-transform 0.3s ease-in-out, margin 0.3s ease-in-out; transition: transform 0.3s ease-in-out, margin 0.3s ease-in-out; margin-left: 230px; z-index: 820; top:50px; position: relative; white-space: nowrap; overflow: visible; background-color: #ffffff;} .main-sidebar, .left-side { position: absolute; top: 0; left: 0; padding-top: 50px; min-height: 100%; width: 230px; z-index: 810; -webkit-transition: -webkit-transform 0.3s ease-in-out, width 0.3s ease-in-out; -moz-transition: -moz-transform 0.3s ease-in-out, width 0.3s ease-in-out; -o-transition: -o-transform 0.3s ease-in-out, width 0.3s ease-in-out; transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;}
我真的迷路了,已经停留了三天多了...
提前谢谢您!
我正在使用R Shiny Dashboard软件包来创建仪表板。我实际上想要一个固定的标题,当我向下滚动时它不会移动。在此标题的右上角,我想...
[我想出了在服务器端使用renderImage
并在UI中使用span(imageOutput(...))
的解决方案。