I am trying to semi-hide the side bar from shiny app.
Using this function on the body:
tags$script(HTML("$('body').addClass('sidebar-mini');"))
I got this result:
Is there a way to hide the sidebar, without hiding the title, just modifying this script ?
You can define a short title, it will be displayed when the sidebar is collapsed :
library(shiny)
library(shinydashboard)
shinyApp(
ui = dashboardPage(
dashboardHeader(
title = tagList(
tags$span(
class = "logo-mini", "Short"
),
tags$span(
class = "logo-lg", "My Long Title"
)
)
),
dashboardSidebar(),
dashboardBody(
tags$script(HTML("$('body').addClass('sidebar-mini');"))
),
title = "Dashboard example"
),
server = function(input, output) { }
)
}
Normal:
Collapsed:
assuming that you have a built in CSS class called "hide".
tags$script(HTML("$('.sidebar-mini #YOUR_SIDEBAR_ID').addClass('hide');"))
IF you want to get fancy then do things like absolute position -9999 and opacity 0, then "reveal it" when needed...
The sample code below generates a UI with some text in one column and image on the other column.
library(shiny)
library(stringi)
ui = fluidPage(
fluidRow(
column(6,
h4('Text Section'),
p(stri_rand_lipsum(2)),
p(stri_rand_lipsum(2))),
column(6,
img(src = 'http://via.placeholder.com/200x200')
)
))
server = function(input,output){}
shinyApp(ui = ui, server = server)
Depending on the width of the page the first column can be longer or shorter than the image in the second column. Below is a case where the first column is longer.
Question is, is there a layout that'll allow the text of the first column to occupy the empty space left in the second column as shown in the image below?
The only way you could do that is by removing your extra column grid and then putting all in the same with image aligned to right.
library(shiny)
library(stringi)
ui = fluidPage(
fluidRow(
column(8,
h4('Text Section'),
img(src = 'http://via.placeholder.com/200x200', align = 'right'),
p(stri_rand_lipsum(2)),
p(stri_rand_lipsum(2)))
))
server = function(input,output){}
shinyApp(ui = ui, server = server)
I want put multiple line breaks in my shiny app.
Instead of
br(),
br(),
br(),
...
is there any more convenient way of doing it?Thanks.
I have no idea if that's convenient for you, but it saves you some typing.
linebreaks(n) repeats <br/> n times and parses it as HTML.
library(shiny)
linebreaks <- function(n){HTML(strrep(br(), n))}
ui <- fluidPage(
titlePanel(
p(
h1("first sentence", align = "center"),
linebreaks(10),
h3("second sentence", align = "center")
)
)
)
I'm having issues aligning two input widgets in Shiny.
Specifically, I can't seem to get a password input and an action button (generated using uiOutput()) to be bottom aligned in the same row.
My current approach offsets the two widgets:
when what I want is:
My code:
library(shiny)
ui <- fluidPage(
fluidRow(
column(width = 4,
passwordInput(inputId = "answer.pass", label = "", value = "",
placeholder = "Enter Password for Answer")
),
column(width = 2, offset = 0,
uiOutput("actionBut.out")
)
)
)
server <- function(input, output) {
output$actionBut.out <- renderUI({
actionButton("copyButton1","Copy Code")
})
}
shinyApp(ui = ui, server = server)
I've come across other SO posts and other sites that seem to have similar problems, but none of their solutions work for my example.
Bottom align a button in R shiny
Shiny R Button Alignment
UI: positioning widgets (UI elements) side by side [Google Groups]
Can anyone suggest a working solution? Thanks!
I want to put multiple links within a dropdown menu in the header panel, but now I can only create it with a flat horizonal layout through tags$li, while I want a vertical grouped dropdown menu.
A minimal repeatable code is as below, I means I want to put the linkA and linkB under grouplinkAB, and users can open one of them in a new window. It may be achieved with dropdownMenu(type='notifications',...) as in the code, but I do not know where to put the group name of "grouplinkAB", and which can not open a new window when clicking on the link, also I have to hide the text "You have 2 notifications", so I want to achieve it with tags$li and tags$ul, but I have little knowledge on HTML, any help will be appreciated.
library(shinydashboard)
library(shiny)
runApp(
shinyApp(
ui = shinyUI(
dashboardPage(
dashboardHeader(title='Reporting Dashboard',
tags$li(class="dropdown",tags$a("grouplinkAB",href="http://stackoverflow.com/", target="_blank")),
tags$li(class="dropdown",tags$a("linkA",href="http://stackoverflow.com/", target="_blank")),
tags$li(class="dropdown",tags$a("linkB",href="http://stackoverflow.com/", target="_blank")),
dropdownMenu(type='notifications',
notificationItem(text='linkA',href="http://stackoverflow.com/"),
notificationItem(text='linkB',href="http://stackoverflow.com/")
)
),
dashboardSidebar(),
dashboardBody()
)
),
server = function(input, output){}
), launch.browser = TRUE
)
Ok, I saw a similar request about a year ago, but didn't look much deeper. This time I tried to get your code to work and couldn't then I looked at the dropdownMenu code and saw it simply wasn't setup to handle this, but could be modified to do so fairly easily.
I choose not to do that though, instead I created a new version of dropdownMenu specialized to do just this.
Here is the code:
library(shinydashboard)
dropdownHack <- function (...,badgeStatus = NULL, .list = NULL,menuname=NULL)
{
if (!is.null(badgeStatus)){
shinydashboard:::validateStatus(badgeStatus)
}
items <- c(list(...), .list)
lapply(items, shinydashboard:::tagAssert, type = "li")
dropdownClass <- paste0("dropdown ", "text-menu")
numItems <- length(items)
if (is.null(badgeStatus)) {
badge <- NULL
}
else {
badge <- span(class = paste0("label label-", badgeStatus), numItems)
}
tags$li(class = dropdownClass, a( href="#", class="dropdown-toggle",
`data-toggle`="dropdown", menuname, badge),
tags$ul(class = "dropdown-menu", items )
)
}
menuitemHack <- function(text,href){
notificationItem(text=text,href=href,icon=shiny::icon("rocket") )
}
runApp(
shinyApp(
ui = shinyUI(
dashboardPage(
dashboardHeader(title='Reporting Dashboard',
dropdownHack(menuname="GroupAB",
menuitemHack(text='linkA',href="http://stackoverflow.com/"),
menuitemHack(text='linkB',href="http://stackoverflow.com/")
),
dropdownMenu(type='notifications',
notificationItem(text='linkA',href="http://stackoverflow.com/"),
notificationItem(text='linkB',href="http://stackoverflow.com/")
)
),
dashboardSidebar(),
dashboardBody()
)
),
server = function(input, output){}
), launch.browser = TRUE
)
And here is the result:
Notes:
It needs an icon, you can select any fontAwesome or Glyphicons, there is probably a blank one there somewhere if you want to have nothing.
I imagine it will break if the ShinyDashboard structure changes much, so keep that in mind.
Maybe the next version will support this option as well, it would just be a few lines of extra code.