Hello.
I am trying to align the materialSwitch checkbox with some pickerInput boxes.
Here's what it looks like vs what I want it to look like:
Here is a simplified code of the problem, help please!
library(shiny)
library(shinydashboard)
library(shinyWidgets)
#----------------------------------------------------------------------------#
ui <- {dashboardPage(
dashboardHeader(title=""),
dashboardSidebar(),
dashboardBody(
fluidRow(box(column(materialSwitch("t0"),width=1),
column(pickerInput(inputId="t1",label="",choices=c("Yes","No")),
pickerInput(inputId="t2",label="",choices=c("Yes","No")),width=3),
column(pickerInput(inputId="t3",label="",choices=c("Yes","No")),
pickerInput(inputId="t4",label="",choices=c("Yes","No")),width=4),
column(pickerInput(inputId="t5",label="",choices=c("Yes","No")),
pickerInput(inputId="t6",label="",choices=c("Yes","No")),width=4),
actionButton("t7","",width="100%"),width=12))))
}
#----------------------------------------------------------------------------#
server <- function(input, output) {}
#----------------------------------------------------------------------------#
shinyApp(ui = ui, server = server)
Also, if there's a way to tighten the space, or reduce the margin between the switch and the input boxes that would swell. My current code also makes one of the pickerInputs at a different width than the others (to include the switch), if there's a way to proportion them so they're all the same width that would be extra swell.
Thanks.
You can apply some css to move the materialSwitch.
div(column(materialSwitch("t0"),width=1), style = 'top: 25px;position:relative;')
Complete code -
library(shiny)
library(shinydashboard)
library(shinyWidgets)
#----------------------------------------------------------------------------#
ui <- {dashboardPage(
dashboardHeader(title=""),
dashboardSidebar(),
dashboardBody(
fluidRow(box(div(column(materialSwitch("t0"),width=1), style = ' top: 25px;position: relative;'),
column(pickerInput(inputId="t1",label="",choices=c("Yes","No")),
pickerInput(inputId="t2",label="",choices=c("Yes","No")),width=3),
column(pickerInput(inputId="t3",label="",choices=c("Yes","No")),
pickerInput(inputId="t4",label="",choices=c("Yes","No")),width=4),
column(pickerInput(inputId="t5",label="",choices=c("Yes","No")),
pickerInput(inputId="t6",label="",choices=c("Yes","No")),width=4),
actionButton("t7","",width="100%"),width=12))))
}
#----------------------------------------------------------------------------#
server <- function(input, output) {}
#----------------------------------------------------------------------------#
shinyApp(ui = ui, server = server)
Related
I am having a shiny app with some ui elements.
Is there a way to replace some HTML (e.g. div / div content) with an animation effect, similar to what shinyjs::show(anim=T) does?
library(shiny)
library(shinyjs)
ui <- fluidPage(
shinyjs::useShinyjs(),
actionButton("change","change"),
tags$div(id="someDiv",
"test"),
hidden(tags$div(id="withAnim", "Displayed with animation"))
)
server <- function(input, output) {
observeEvent(input$change, {
shinyjs::html("someDiv", "changed without animation")
shinyjs::delay(1000, show("withAnim", anim=T, animType="fade"))
})
}
shinyApp(ui = ui, server = server)
the shinyjs::html doesn't provide this utility. We can write our own js code and use shinyjs::runjs to run it when button is clicked.
library(shiny)
library(shinyjs)
ui <- fluidPage(
shinyjs::useShinyjs(),
actionButton("change","change"),
tags$div(id="someDiv",
"test"),
hidden(tags$div(id="withAnim", "Displayed with animation"))
)
server <- function(input, output) {
observeEvent(input$change, {
shinyjs::runjs("$('#someDiv').fadeOut(500, function(){$(this).text('changed without animation').fadeIn();})")
shinyjs::delay(1000, show("withAnim", anim=T, animType="fade"))
})
}
shinyApp(ui = ui, server = server)
I am working with R shiny dashboard and was wondering if I can collapse/show the sidebar with an additional button, just like the already existing one on top of the sidebar.
Is that possible?
Cheers
You can add / remove the needed css class to / from the body via shinyjs:
library(shiny)
library(shinyjs)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
shinyjs::useShinyjs(),
actionButton("toggle_btn", "Toggle sidebar")
)
)
server <- function(input, output, session) {
observeEvent(input$toggle_btn, {
shinyjs::toggleClass(selector = "body", class = "sidebar-collapse")
})
}
shinyApp(ui, server)
I am trying to use shiny for the first time to build a very simple web app.
I would like to add a logo on the left hand corner of my dashboard but failing to load the pic
this is what I have written:
library(shiny)
library(shinydashboard)
shinyUI(
dashboardPage(
dashboardHeader(title=tags$img(src='logo.jpg')),
dashboardSidebar(),
dashboardBody()
)
)
This is the structure of my folder
GH
-->model
---->app
------>webapp
server.R
ui.R
--> pictures
logo.jpg
If I run my app I get a question mark as a placeholder of the actual picture
Try forcing it with addResourcePath(prefix, path), and then use src = "prefix/logo.jpg"
library(shiny)
library(shinydashboard)
ui <- function(){
addResourcePath("www", "www")
tagList(
dashboardPage(
dashboardHeader(title = tags$img( src='www/logo.png') ),
dashboardSidebar(),
dashboardBody()
)
)
}
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
I am working on a shiny application and have used shinydashboard package for the UI part. I want to open the sidebar on hover instead of click on the button. I have tried data-trigger option but it is not working. Can anyone please help me in doing this?
A minimal example for the shiny dashboard application
## app.R ##
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody()
)
server <- function(input, output) { }
shinyApp(ui, server)
You can do it with JQuery:
## app.R ##
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(),
tags$head(tags$script(HTML("$(function() { $('a.sidebar-toggle').mouseover(function(e) { $(this).click()})});")))
)
server <- function(input, output) { }
shinyApp(ui, server)
I would like to change background in my shiny dashboard App. I wound in internet function setBackgroundImage (https://rdrr.io/cran/shinyWidgets/man/setBackgroundImage.html). The problem is that I don't know were I should put that function in my app. In example is classic app, not dashboard.
library(shiny)
library(shinydashboard)
library(shinyWidgets)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
setBackgroundImage(src = "http://wallpics4k.com/wp-content/uploads/2014/07/470318.jpg")
)
)
server <- function(input, output) {}
shinyApp(ui, server)
Also it is possible to put leaflet map as a background?
You can do it with tags$img(), and specifying position attribute to absolute. Note that img tag have to be placed as first in dashboardBody:
...
dashboardBody(
tags$img(
src = "http://wallpics4k.com/wp-content/uploads/2014/07/470318.jpg",
style = 'position: absolute'
),
...
)
...
It also accepts width and height parameters. You can also position your image with hspace and vspace parameters.
Now there is also the possibility to add shinydashboard = TRUE to the setBackgroundImage function.
library(shiny)
library(shinydashboard)
library(shinyWidgets)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
setBackgroundImage(
src = "https://www.fillmurray.com/1920/1080",
shinydashboard = TRUE
)
)
)
server <- function(input, output) {}
shinyApp(ui, server)