How to edit the CSS to change the width of the progress-bar?
I put in
div.progress-bar{
width:100px
}
progress-bar{
width:100px
}
but it doesn't work.
Your bar has an Id = file1_progress so you can style that. Have a look at my example below, I set mine to 100px
rm(list = ls())
library(shiny)
ui <- fluidPage(
titlePanel("My R Shiny App"),
sidebarPanel(
fileInput('file', 'Choose file to upload.' ),width=3),
tags$style(type="text/css", "#file_progress { max-width: 100px; }")
)
server <- function(input, output, session) {}
shinyApp(ui, server)
Related
Is it possible to put all tabPanels in a row below the title of a navbarPage? In other words, I would like to keep the appearance of the navbarPage but on two rows: the title on the first one, and the tabPanels on the second. This would allow to "isolate" the title by keeping it on a single row.
library(shiny)
ui <- navbarPage(
title = "some title",
tabPanel("first tab"),
tabPanel("second tab")
)
server <- function(input, output, session) {}
shinyApp(ui, server)
Note that this doesn't have to be a navbarPage. Any UI that could do that is accepted but it has to have the appearance of a navbarPage (no space between the rows, etc.). Hope this is clear enough.
Also asked on RStudio Community
You can force the title to have 100% width via CSS, thereby moving the tabPanels below it:
library(shiny)
ui <- navbarPage(
title = "some title",
tabPanel("first tab"),
tabPanel("second tab"),
tags$style(HTML(".navbar-header { width:100% }
.navbar-brand { width: 100%; text-align: center }")) # center text
)
server <- function(input, output, session) {}
shinyApp(ui, server)
I am facing some trouble including particles.js output (API provided by shinyparticles in shinydashboard. I am working with R.
Following is an example that works for shiny
library(shiny)
library(shinyparticles)
ui <- fluidPage(
particles(),
headerPanel("This is a sample app")
)
server <- function(input, output, session){}
shinyApp(ui, server)
And here is one for shinydashboard that does not seem to work
library(shinydashboard)
library(shinyparticles)
shinyApp(
ui = dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(tags$body(div(particles()))),
title = "Dashboard example",
skin = "black"
),
server = function(input, output) { }
)
The resulting HTMLs seem identical when I view the page source, but the viz for particles does not appear.
The particles don't appear because they are below the dashboardBody (by default: z-index: -10).
If you set the z-index of the particles to 1 they will be visible, however any element you add to the body will be under the particles.
So set elements z-index to a higher number. (in this example I only use boxes)
Code:
dashboardBody(
tags$head(tags$style("
.particles-full {
z-index: 1;
}
.box {
z-index: 2;
}
")),
particles(),
box(
h2("Header"),
p("Paragraph")
),
box(
plotOutput("plot")
)
)
Output:
Is there a way to use a web image as cursor when hovering over a button?
I tried something like this:
tags$head(tags$style(HTML(" .custom { cursor: url(https://c2.staticflickr.com/2/1907/31794847918_04f9e687e1_b.jpg), auto;
} ")))
which has no effect, and I can't find any other examples on the web how to manage this in R shiny.
library(shiny)
ui <- fluidPage(
actionButton(inputId = 'messagebutton', label = 'click me')
)
server <- function(input, output, session) {}
shinyApp(ui = ui, server = server)
This example works for me. I think your image isnt working, but I'm not sure why exactly. It might be too big.
library(shiny)
csscode <- HTML("
#messagebutton {
cursor: url(http://www.javascriptkit.com/ajax.gif), auto;
}
")
ui <- fluidPage(
tags$head(tags$style(csscode)),
actionButton(inputId = 'messagebutton', label = 'click me')
)
server <- function(input, output, session) {}
shinyApp(ui = ui, server = server)
By default tabs in a tabsetPanel are put on the left. Is it possible to place a tab on the right side, while still having other tabs on the left? So that it looks like this?
library(shiny)
ui <- fluidPage(
tabsetPanel(
tabPanel("tab_left1"),
tabPanel("tab_left2"),
tabPanel("tab_right")
)
)
server <- function(input, output, session) {}
shinyApp(ui, server)
Using float-right should indeed work. The problem with using 2 tabsetPanel is that there are 2 active tabs at the same time.
library(shiny)
ui <- fluidPage(
tags$head(
tags$style(HTML(
".tabbable ul li:nth-child(3) { float: right; }"
))
),
tabsetPanel(
tabPanel("tab_left1"),
tabPanel("tab_left2"),
tabPanel("tab_right")
)
)
server <- function(input, output, session) {}
shinyApp(ui, server)
Maybe you can create 2 tabsetPanel and pull one over to the right?
rm(list = ls())
library(shiny)
ui <- fluidPage(
div(style="display:inline-block",tabsetPanel(type = c("pills"),tabPanel("tab_left1"),tabPanel("tab_left2"))),
div(style="display:inline-block;float: right",tabsetPanel(type = c("pills"),tabPanel("tab_right")))
)
server <- function(input, output, session) {}
shinyApp(ui, server)
When you apply the class float-right to the ones you want to float to the right, it should do the trick.
I'm getting stuck while building a Shiny Dashboard in R (using the shinydashboard package). I want to lock my sidebar so that it does not scroll while I look through the content of my tabs, but I'm not sure how to pull this off.
As an example, the following block of code will create a long-scrolling dashboard. It would be nice to lock the sidebar so that you can still see the menu tabs whilst scrolling through the obscenely-long data table.
library(ggplot2) ## for mpg dataset
library(shinydashboard)
## ui
ui <- dashboardPage(
dashboardHeader(title="MPG Data"),
dashboardSidebar(sidebarMenu(menuItem("MPG", tabName="mpg"))),
dashboardBody(tabItems(tabItem(tabName="mpg", fluidRow(tableOutput("mpgTable"))))))
## server
server <- function(input, output) {
output$mpgTable <- renderTable({mpg})
}
## launch dashboard
shinyApp(ui, server)
You should just add the style = "position:fixed; overflow: visible" at the ui sidebar.
library(ggplot2) ## for mpg dataset
library(shinydashboard)
## ui
ui <- dashboardPage(
dashboardHeader(title="MPG Data"),
dashboardSidebar(
sidebarMenu(style = "position: fixed; overflow: visible;",
menuItem("MPG", tabName="mpg"))),
dashboardBody(
tabItems(
tabItem(tabName="mpg",
fluidRow(tableOutput("mpgTable"))))))
## server
server <- function(input, output) {
output$mpgTable <- renderTable({mpg})
}
## launch dashboard
shinyApp(ui, server)
**disclaimer: I am no css expert by any means
You can set the option in DT for the actual table but if you want to have the tab in the actual dashboard scroll free from the sidebar(assuming you aren't using a navbar based on your code) give this a shot:
the css would look like this:
.sidebar {
color: #FFF;
position: fixed;
width: 220px;
white-space: nowrap;
overflow: visible;
}
if you have a .css file working in your 'www' folder you can call it from the ui with a number of functions; so let's assume your file is named "style.css".
the ui now looks like this:
dashboardPage(
dashboardHeader(title="MPG Data"),
dashboardSidebar(
sidebarMenu(
menuItem("MPG",tabName="mpg")
)
),
dashboardBody(
#here's where you throw the css into the header
tags$head(
includeCSS('www/style.css')
),
tabItems(
tabItem(tabName="mpg",
fluidRow(tableOutput("mpgTable"))
)
)
)
)
Nothing on the server side changes, but you might want to check out using DT or setting options in your table to work more easily with the data. DT package ref.
Hope this helps.
#HipHopPhysician can you post what you're trying to run? otherwise here's the simplest way to use DT as a workaround...there are a lot of options to set; so i'm just going to give the default:
library(ggplot2)
library(DT)
library(shinydashboard)
ui <-
dashboardPage(
dashboardHeader(title="MPG Data"),
dashboardSidebar(
sidebarMenu(
menuItem("MPG",tabName="mpg")
)
),
dashboardBody(
#here's where you throw the css into the header
tags$head(
includeCSS('www/style.css')
),
tabItems(
tabItem(tabName="mpg",
dataTableOutput("mpgTable"))
)
)
)
server <- function(input, output) {
output$mpgTable <- renderDataTable({ mpg })
}