I am using the R Shiny Dashboard package in order to create a dashboard. I actually want a fixed header which will not move when I will scroll down. On the upper right side of this header I would like to put a image. My css file is named "remaniement" and is in the the folder \\www
First idea: I tried to parametrize the width of each element for example put the width of .skin-blue .main-header .navbar
at 80% and the width of my picture at 20% but problems come when the browser window size change.
I tried to put the header width at 100% and to put my image above the header. I don't know why, the image is always under the header even when I put a z-index: 9999999;
on my css file.
For both ideas above, I tried with the picture coded on the functions dashboardBody() or dashboardHeader() whithout success.
Here my ui.R code :
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)
my server.R code:
server <- function(input, output,session) {}
and my css code:
/*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;}
I am really lost, It's been more than 3 days I am stuck at it...
Thank you in advance !
(edited)
Things are "pretty simple" (but finding it is somewhat harsh).
First, I needed to set the images directory as a "resource path" like this:
addResourcePath("<name for my resource path>", "<actual path>"
Prefer using system.file()
to define the actual path if possible, it is a clean way. You can also check your current resource paths (shiny defaults + yours) with resourcePath()
Then, you can call your newly registered folder with tags$img()
in your UI:
tags$img("<actual path>/local-path-to-your-image", ...) # ... can contain HTML parameter such as width and height
And you shall be done !
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.