My UI code is the following:
ui <- navbarPage(
theme = shinytheme("paper"),
title = div(img(src="ballerlablogo.png", style="margin-top: -14px;", height = 50)),
...
)
which works well, but then the title on webpage tab looks like this:
is there a way to have the page title be "Baller Lab" without getting rid of the image in the navbar or adding the "baller lab" text in the navbar?
Here is a link to the site: BallerLab.us
With fluidPage you can use tags$head to modify the title on the webpage tab
library(shiny)
library(shinythemes)
ui <- fluidPage(
theme = shinytheme("paper"),
tags$head(HTML("<title>Baller Lab</title>")), #Without company logo
#tags$head(HTML("<title>Baller Lab</title> <link rel='icon' type='image/gif/png' href='ballerlablogo.png'>")), #WIth company logo
navbarPage(title = div(img(src="ballerlablogo.png", style="margin-top: -14px;", height = 50))))
server <- function(input, output, session) {}
shinyApp(ui, server)
Related
The following code can be used to show how I would want a tooltip to appear. If version=3 then the function in shinyBS works and produces the tooltip. However with version=4 it does not work. I don't want to use the shinyBS package as it seems it's still in dev mode and would rather just straight prefer to wrap my button with some HTML using tooltips from bootstrap directly as shown here.
I'm not having success in doing it this way and wonder if anyone can suggest a good way to get the tool top for my button just using the pure HTML?
library(shiny)
library(bslib)
library(shinyBS)
ui <- fluidPage(
navbarPage(
theme = bs_theme(bootswatch = "flatly", version = 4),
title = 'Methods',
tabPanel('One'),
),
mainPanel(
h1('Hello World'),
actionButton("button", "Some Button"),
bsTooltip("button", "Something to be said here", "top"),
)
)
server <- function(input, output) {
}
shinyApp(ui, server)
Hello.
I would like to change the color of this dropdown box which appears for numeric filters.
Sample code:
library(DT)
library(shiny)
ui <- basicPage(
h2("The mtcars data"),
DT::dataTableOutput("mytable")
)
server <- function(input, output) {
output$mytable = DT::renderDataTable({
DT::datatable(mtcars,filter="top")
})
}
shinyApp(ui, server)
Thanks
You only have to modify the suitable CSS on the ui function:
ui <- basicPage(
h2("The mtcars data"),
DT::dataTableOutput("mytable"),
tags$style(type = "text/css",
".noUi-connect {background: red;}")
)
Update
As explained in the comments, you can see in the next image (open it to see larger) where is the CSS modified to get a dark red where you want (in the right column of left window above is the element.style to which my comment below refers). The issue I am not able to solve is how to modify that tag (the shadowed one at the left) ` without a class or an id, with CSS or Shiny.
I would like to include a small image at the left of the title of my navbarPage, and to include another image completely at the right of this same navbarPage. I found this answer which provides the same layout than the one I would like to have. The problem is that this solution does not provide a fully reproducible example and I can't figure out how to include the chunks of code in the ui part.
Does anybody know how to make a reproducible example from this answer?
Here's what I've tried so far:
library(shiny)
ui <- navbarPage(
tags$script(HTML("var header = $('.navbar > .container-fluid');
header.append('<div style=\"float:right\"><h3>This is R</h3></div>');"
)),
tags$script(HTML("var header = $('.navbar > .container-fluid');
header.append('<div style=\"float:right\"><img src=\"image.png\" alt=\"alt\" style=\"float:right;width:33px;height:41px;padding-top:10px;\"> `</div>');
console.log(header)")
),
title = div(img(src="image.png", height = '40px', width = '40px'), "something"),
tabPanel("foo")
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
This is the image called image.png. I put it in the www folder, which is placed in my app directory.
There are mainly two things to solve:
* some text is displayed on the below the navbar whereas it shouldn't be displayed at all
* the image and the text at the left are not centered
I did not make any change to your code (well except the tags$head() at the begining, but that's an add on).
The only problem with your code is not the problem in your code, is the problem in your files structure.You have to place your images inside a new folder called www (Note that the folder www is in the same place as your R code which is app.R or ui.R).
library(shiny)
ui <- fluidPage(
tags$head(
tags$link(rel = "shortcut icon", type = "image/png", href = "image.png"),
tags$title("Browser tab title")
),
navbarPage(
tags$script(HTML("var header = $('.navbar > .container-fluid');
header.append('<div style=\"float:right\"><h3>This is R</h3></div>');"
)),
tags$script(HTML("var header = $('.navbar > .container-fluid');
header.append('<div style=\"float:right\"><img src=\"image.png\" alt=\"alt\" style=\"float:right;width:33px;height:41px;padding-top:10px;\"> </div>');
console.log(header)")
),
title = tags$div(img(src="image.png", height = '40px', width = '40px'), "something"),
tabPanel("foo")
)
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
Note: I've added the navbarPage inside a fluidPage because without the fluidPage, the title of the NavBarPage will be the title in the browser tab!But now the main UI is the fluidPage so it's title will be the browser title. this also gives you flexiblity to add a new image for the browser tab, different from the navbar page's tab.
Here's the screen shot of the output.
Hope this helps!
The whole code/files can be found in this answer
UI.R file
library(shiny)
library(shinydashboard)
shinyUI(
dashboardPage(
dashboardHeader(disable = TRUE), #title=textOutput("title")),
dashboardSidebar(uiOutput("side")),
dashboardBody(
uiOutput("page")
)))
However, I want to disable header in my dashboard, with help from here I managed to disable but then there is some white space added in my dashboard. (see image, the orange highlighed box).
How can I get rid of this? This is not only on login page, the problem persist even after logged in.
I think that it is a missing feature on shiny dashboard to automatically add to the body the height of the header. I fixed it with a trick using JavaScript. The solution is based on add 50px to the CSS min-height attribute of body just after creating the page. Also I added an event listener to add the 50px if the size of the window changes.
library(shiny)
library(shinydashboard)
server <- function(input, output) {
}
ui <- dashboardPage(
dashboardHeader(disable = TRUE),
dashboardSidebar(),
dashboardBody(
tags$script('window.onload = function() {
function fixBodyHeight() {
var el = $(document.getElementsByClassName("content-wrapper")[0]);
var h = el.height();
el.css("min-height", h + 50 + "px");
};
window.addEventListener("resize", fixBodyHeight);
fixBodyHeight();
};')
)
)
shinyApp(ui, server)
You can add class and then remove it from server side
(idea of hide head get here )
library(shiny)
library(shinyjs)
library(shinydashboard)
server=shinyServer(
function(input, output,session) {
observeEvent(input$activate,{
js$hidehead('') # show head
removeClass("body_d","DISABLED") # remove class
})
})
ui=
shinyUI(
dashboardPage(
dashboardHeader(disable = T), #title=textOutput("title")),
dashboardSidebar(uiOutput("side")),
dashboardBody(class="DISABLED",id="body_d",
useShinyjs(),
extendShinyjs(text = "shinyjs.hidehead = function(parm){
$('header').css('display', parm);
}"),
tags$style(".DISABLED { min-height: 100vh !important};
"),
actionButton("activate","activate header")
)))
shinyApp(ui,server)
If you dont want to show header after something -- all you need is add class and add css min-height: 100vh !important as example
I have some trouble with inserting a link into a navbar with navbarPage in shiny. I can put a link but the navbar looks weird. Does anyone know how to fix it ?
To produce an app with a link in the navbar :
library(shiny)
runApp(list(
ui = navbarPage(
title="My App",
tabPanel("tab1"),
tabPanel("tab2"),
tabPanel(a(href="http://stackoverflow.com", "stackoverflow"))),
server = function(input, output) { }
))
With shiny_0.9.1
Thanks !
EDIT :
A colleague show me a workaround, it consist of puting the link we want in panel 3 into the headerof panel 2.
An app to demonstrate this and the solution from #
20050 8519 21102 26896 16937 for the link in the title's app :
runApp(list(
ui = navbarPage(
title=HTML("stackoverflow"),
tabPanel("tab1"),
tabPanel(HTML("tab2</a></li><li><a href=\"http://stackoverflow.com\">stackoverflow"))
),
server = function(input, output) { }
))
I managed to get it working on a more recent version of Shiny for the left-hand site element of the NavBar, the title, with this:
corner_element = HTML(paste0('<a href=',shQuote(paste0("https://my.page.com/",page_name,"/")), '>', 'Foo', '</a>'))
navbarPage(corner_element, id="page", collapsable=TRUE, inverse=FALSE,
# [...]
)
With shiny 1.7.0 and bslib 0.3.0, it became easier to customize the navbar:
library(shiny)
library(bslib)
ui <- page_navbar(
nav("First tab"),
nav("Second tab"),
nav_item(a(href="http://stackoverflow.com", "stackoverflow")))
)
shinyApp(ui, server = function(...){})