Css 如何在仪表板上的固定标题上显示固定图像
我使用R Shining Dashboard包来创建仪表板。我实际上想要一个固定的标题,当我向下滚动时,它不会移动。在这个标题的右上方,我想放一张图片。我的css文件名为“Reminemment”,位于文件夹\wwwCss 如何在仪表板上的固定标题上显示固定图像,css,r,shiny,shinydashboard,Css,R,Shiny,Shinydashboard,我使用R Shining Dashboard包来创建仪表板。我实际上想要一个固定的标题,当我向下滚动时,它不会移动。在这个标题的右上方,我想放一张图片。我的css文件名为“Reminemment”,位于文件夹\www 第一个想法:我尝试将每个元素的宽度参数化,例如将.skin blue.main header.navbar的宽度设置为80%,将图片的宽度设置为20%,但当浏览器窗口大小改变时会出现问题 我试图将标题宽度设置为100%,并将我的图像置于标题上方。我不知道为什么,图像总是在标题下,即
.skin blue.main header.navbar的宽度设置为80%,将图片的宽度设置为20%,但当浏览器窗口大小改变时会出现问题
z-index:999999代码>在我的css文件上
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)
我真的迷路了,已经三天多了,我一直在努力
提前谢谢你 (编辑)
事情“相当简单”(但发现它有点苛刻)
首先,我需要将images目录设置为“资源路径”,如下所示:
addResourcePath(“,”)
如果可能,更喜欢使用system.file()
来定义实际路径,这是一种干净的方法。您还可以使用resourcePath()
然后,您可以在UI中使用标记$img()
调用新注册的文件夹:
tags$img(“/localpath to your image”,…)#…可以包含诸如宽度和高度之类的HTML参数
你就完蛋了!(编辑)
事情“相当简单”(但发现它有点苛刻)
首先,我需要将images目录设置为“资源路径”,如下所示:
addResourcePath(“,”)
如果可能,更喜欢使用system.file()
来定义实际路径,这是一种干净的方法。您还可以使用resourcePath()
然后,您可以在UI中使用标记$img()
调用新注册的文件夹:
tags$img(“/localpath to your image”,…)#…可以包含诸如宽度和高度之类的HTML参数
你就完蛋了
server <- function(input, output,session) {}
/*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;}