I cannot figure out a way to bottom align downloadButton with a selectizeInput, i.e.,
library(shiny)
runApp(list(
ui = shinyUI(fluidPage(
fluidRow(align="bottom",
column(12, align="bottom",
h4("Download Options:"),
fluidRow(align="bottom",
column(6, selectizeInput("plot_dl", "File Type", width="100%",
choices = list("PDF"="pdf","PNG"="png"))),
column(3, downloadButton('plot1_dl', 'Left Plot')),
column(3, downloadButton('plot2_dl', 'Right Plot'))
)
)
),
tags$style(type='text/css', "#plot1_dl { width:100%; vertical-align:bottom}"),
tags$style(type='text/css', "#plot2_dl { width:100%;}")
)),
server = function(input, output) {
}
))
Placing align="bottom" anywhere and everywhere does not throw an error message, but does not have the desired effect either. Tried playing around with the style tags of the buttons, but well out my depth.
Found an ad-hoc fix with margin-top: 25px in the style tag...
library(shiny)
runApp(list(
ui = shinyUI(fluidPage(
h4("Download Options:"),
fluidRow(
column(6, selectizeInput("plot_dl", "File Type", width="100%",
choices = list("PDF"="pdf","PNG"="png"))),
column(3, downloadButton('plot1_dl', 'Left Plot')),
column(3, downloadButton('plot2_dl', 'Right Plot'))
),
tags$style(type='text/css', "#plot1_dl { width:100%; margin-top: 25px;}"),
tags$style(type='text/css', "#plot2_dl { width:100%; margin-top: 25px;}")
)),
server = function(input, output) {
}
))
Other way to do it is to pass style argument in the column function.
runApp(list(
ui = shinyUI(fluidPage(
h4("Download Options:"),
fluidRow(
column(6, selectizeInput("plot_dl", "File Type", width="100%",
choices = list("PDF"="pdf","PNG"="png"))),
column(3, style = "margin-top: 25px;", downloadButton('plot1_dl', 'Left Plot')),
column(3, style = "margin-top: 25px;", downloadButton('plot2_dl', 'Right Plot'))
)
)),
server = function(input, output) {
}
))
Related
Having this basic shiny app:
I would like to position my title in the header like indicated in red in the image below:
There are already some solutions Add text on right of shinydashboard header
but I am wondering if there is a more "straight" way?
The solution by #matrixloading is appealing but not satisfactory because of the dot in front of the text:
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(title = "Basic dashboard"),
dashboardSidebar(),
dashboardBody(
# Boxes need to be put in a row (or column)
fluidRow(
box(plotOutput("plot1", height = 250)),
box(
title = "Controls",
sliderInput("slider", "Number of observations:", 1, 100, 50)
)
)
)
)
server <- function(input, output) {
set.seed(122)
histdata <- rnorm(500)
output$plot1 <- renderPlot({
data <- histdata[seq_len(input$slider)]
hist(data)
})
}
shinyApp(ui, server)
We can append a child element inside de nav element of the dashboardHeader.
dashboardHeader(title = "Basic dashboard") |>
tagAppendChild(
div(
"This is My Title",
style = "
display: block;
font-size: 1.5em;
margin-block-start: 0.5em;
font-weight: bold;
color: darkred;
margin-right: 50%",
align = "right"
),
.cssSelector = "nav"
)
The CSS text-align property can be used to centre the title. I have used the title argument of the titlePanel function to adjust the code.
Here is the code for the adjustment:
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
titlePanel(title = tags$h2(
tags$b("Title for the Basic Dashboard"),
tags$style(HTML("h2 { text-align: center; }"))
)
),
fluidRow(
box(plotOutput("plot1", height = 250)),
box(
title = "Controls",
sliderInput("slider", "Number of observations:", 1, 100, 50)
)
)
)
)
server <- function(input, output) {
set.seed(122)
histdata <- rnorm(500)
output$plot1 <- renderPlot({
data <- histdata[seq_len(input$slider)]
hist(data)
})
}
shinyApp(ui, server)
Is it possible to move the logo in the header completely to the right side?
I have attached a pic how I would like it to look like.
here is a MWE
logo to the right
library(shiny)
library(shinydashboard)
ui <- function(){
dashboardPage(
dashboardHeader(title = tags$a(href = 'https://google.com',
tags$img(src = 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png', height= 50,width= 50, align = "right"),
'Title')),
dashboardSidebar( sidebarMenu(id="side", menuItem("Option1", tabName="op1"),
menuItem("Option2", tabName="op2"))
),
body=dashboardBody())}
server <- function(input, output, session) {}
shinyApp(ui, server)
You could wrap it in a li wrapper of class dropdown. Try this
library(shiny)
library(shinydashboard)
ui <- function(){
dashboardPage(
dashboardHeader(
title = "Demo",
tags$li(class = "dropdown",
tags$a(href = 'https://google.com',
tags$img(src = 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png', height= 50,width= 50, align = "right")
)
),
dropdownMenuOutput('messageMenu')
),
dashboardSidebar( sidebarMenu(id="side", menuItem("Option1", tabName="op1"),
menuItem("Option2", tabName="op2"))
),
body=dashboardBody())}
server <- function(input, output, session) {}
shinyApp(ui, server)
I have the following code that makes a simple shiny app. My goal is to make the image/logo bigger and push the sidebar menu down a little bit.
library(shinydashboard)
library(shiny)
ui <- dashboardPage(
dashboardHeader(title = tags$img(src='https://cdn.vox-cdn.com/thumbor/Ous3VQj1sn4tvb3H13rIu8eGoZs=/0x0:2012x1341/1400x788/filters:focal(0x0:2012x1341):format(jpeg)/cdn.vox-cdn.com/uploads/chorus_image/image/47070706/google2.0.0.jpg', height = '60', width ='100')),
dashboardSidebar(
sidebarMenuOutput("menu")
),
dashboardBody()
)
server <- function(input, output) {
output$menu <- renderMenu({
sidebarMenu(
menuItem("Overview", icon = icon("tachometer"))
)
})
}
shinyApp(ui, server)
This code above yields the following output.
My desired output this something like this where the image is bigger.
Although if I try editing the width/height directly on the tags$img() it will make the image larger but it becomes cut off as seen below.
ui <- dashboardPage(
dashboardHeader(title = tags$img(src='https://cdn.vox-cdn.com/thumbor/Ous3VQj1sn4tvb3H13rIu8eGoZs=/0x0:2012x1341/1400x788/filters:focal(0x0:2012x1341):format(jpeg)/cdn.vox-cdn.com/uploads/chorus_image/image/47070706/google2.0.0.jpg',
height = '120', width ='200')),
dashboardSidebar(
sidebarMenuOutput("menu")
),
dashboardBody()
)
You can add css elements to override the default css from library(shiny)
https://shiny.rstudio.com/articles/html-tags.html
library(shinydashboard)
library(shiny)
ui <- dashboardPage(
dashboardHeader(title = tags$img(src='https://cdn.vox-cdn.com/thumbor/Ous3VQj1sn4tvb3H13rIu8eGoZs=/0x0:2012x1341/1400x788/filters:focal(0x0:2012x1341):format(jpeg)/cdn.vox-cdn.com/uploads/chorus_image/image/47070706/google2.0.0.jpg', height = '120px', width ='200px')),
dashboardSidebar(
sidebarMenuOutput("menu")
),
dashboardBody(
tags$head(
tags$style(".skin-blue .main-header .logo {
color: #fff;
border-bottom: 0 solid transparent;
height: 125px;
}"),
tags$style(".skin-blue .sidebar a {
color: #b8c7ce;
padding-top: 50%;
}"),
tags$style(".main-header .navbar{
max-height: 10px;")
)
)
)
server <- function(input, output) {
output$menu <- renderMenu({
sidebarMenu(
menuItem("Overview", icon = icon("tachometer-alt"))
)
})
}
shinyApp(ui, server)
I am trying to vertically align an image in the second column of a tabPanel in Shiny. I have managed to align it horizontally (using align="center"), but cannot align it vertically without inserting several br(). I highly suspect there must be a more elegant solution to do this. An example of my code is below (br()'s not included). Any suggestions would be appreciated. Thanks in advance for your help!
mainPanel(
tabsetPanel(type = "tabs",
tabPanel("Plot",
column(width = 6,
plotOutput("plot")),
column(width = 6, align="center",
img(src = "image.jpg", height=140, width=140),
)),
tabPanel("Summary", verbatimTextOutput("summary")),
tabPanel("Table", tableOutput("table"))
)
A not so great solution that greatly reduces the br() congestion:
library(shiny)
library(purrr)
n_br <- 17
ui <- fluidPage(
mainPanel(
tabsetPanel(type = "tabs",
tabPanel("Plot",
column(width = 6,
plotOutput("plot")),
column(width = 6, align="center",
map(1:n_br, ~br()), #add n number of br()
img(src = "image.jpg", height=140, width=140),
)),
tabPanel("Summary", verbatimTextOutput("summary")),
tabPanel("Table", tableOutput("table"))
)
))
server <- function(input, output, session) {
}
shinyApp(ui, server)
Edit:
Following this tutorial and using shiny's tags function:
library(shiny)
library(tidyverse)
ui <- fluidPage(
mainPanel(
tabsetPanel(type = "tabs",
tabPanel("Plot",
column(width = 6,
plotOutput("plot")),
column(width = 6, align = "center",
tags$style(HTML('
.verticalcenter {
display: table-cell;
height: 400px;
vertical-align: middle;
}')),
tags$div(class = "verticalcenter", img(src = "image.png", height = "140px", width = "140px"))
)),
tabPanel("Summary", verbatimTextOutput("summary")),
tabPanel("Table", tableOutput("table"))
)
))
server <- function(input, output, session) {
output$plot <- renderPlot(plot(iris$Sepal.Length, iris$Petal.Length))
}
shinyApp(ui, server)
I would like to change the font family of the verbatimTextOutput to be the same as the input in Shiny and Shinydashboard. Here is an example.
# Load the packages
library(shiny)
library(shinydashboard)
# User Interface
ui <- dashboardPage(
header = dashboardHeader(title = ""),
sidebar = dashboardSidebar(
sidebarMenu(
menuItem(
text = "Example",
tabName = "tab1"
)
)
),
body = dashboardBody(
tabItems(
tabItem(
tabName = "tab1",
fluidRow(
column(
width = 4,
numericInput(inputId = "Number", label = "A numeric input", value = NA),
strong("The same number as the numeric input"),
verbatimTextOutput("Number_out")
)
)
)
)
)
)
server <- function(input, output, session){
output$Number_out <- renderText(as.character(input$Number))
}
# Run the app
shinyApp(ui, server)
By running the app and type in a number, we can see that the font family is different in the numericInput and the verbatimTextOutput.
Based on this answer (https://stackoverflow.com/a/48037443/7669809) and this answer (https://stackoverflow.com/a/50784117/7669809), I edited my script as follows.
# Load the packages
library(shiny)
library(shinydashboard)
# User Interface
ui <- dashboardPage(
header = dashboardHeader(title = ""),
sidebar = dashboardSidebar(
sidebarMenu(
menuItem(
text = "Example",
tabName = "tab1"
)
)
),
body = dashboardBody(
tags$head(
tags$style(
HTML(
'#Number_out {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 12px;
}'
)
)
),
tabItems(
tabItem(
tabName = "tab1",
fluidRow(
column(
width = 4,
numericInput(inputId = "Number", label = "A numeric input", value = NA),
strong("The same number as the numeric input"),
verbatimTextOutput("Number_out")
)
)
)
)
)
)
server <- function(input, output, session){
output$Number_out <- renderText(as.character(input$Number))
}
# Run the app
shinyApp(ui, server)
But the font family is still not the same.
It seems like I have not used the correct font family yet. Please let me know how I can achieve this.
Try font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
So your tags$head will be:
tags$head(
tags$style(
HTML(
"#Number_out {
font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
font-size: 14px;
}"
)
)
)
EDIT
In Chrome, if you right click and click on Inspect then scroll down to find relevant style elements:
And on bottom right you can see: