Shiny app - after clicking on new tab, the tab remains selected by browser
質問
In Shiny apps when you click on a new tab, the tab remains selected/highlighted by the browser. It creates a dotted-line rectangle around the tab, and you have to click elsewhere to have the tab look normal again. Here's an example from RStudio's gallery: http://shiny.rstudio.com/gallery/tabsets.html
This appears to be a default behavior only in Firefox and Internet Explorer, but not Safari nor Chrome.
It's a small issue, but it's annoying enough that I have spent an hour trying to fix it with no success. I want the tab to retain its tab-esque shape at the most important moment of the user's tab-clicking experience!
Any ideas?
解決
You can remove the dotted lines after tab selection by adding some CSS:
library(shiny)
runApp(list(ui = fluidPage(
titlePanel("Tabsets"),
sidebarLayout(
sidebarPanel(
radioButtons("dist", "Distribution type:",
c("Normal" = "norm",
"Uniform" = "unif",
"Log-normal" = "lnorm",
"Exponential" = "exp")),
br(),
sliderInput("n",
"Number of observations:", value = 500,
min = 1, max = 1000)
),
mainPanel(
tabsetPanel(type = "tabs",
tabPanel("Plot", plotOutput("plot")),
tabPanel("Summary", verbatimTextOutput("summary")),
tabPanel("Table", tableOutput("table"))
)
)
)
, tags$head(tags$style(
HTML(
".nav-tabs > .active > a, .nav-tabs > .active > a:hover { outline: 0;}")
))
)
, server = function(input, output) {
data <- reactive({
dist <- switch(input$dist, norm = rnorm, unif = runif,
lnorm = rlnorm, exp = rexp, rnorm)
dist(input$n)
})
output$plot <- renderPlot({
dist <- input$dist
n <- input$n
hist(data(), main=paste('r', dist, '(', n, ')', sep=''))
})
output$summary <- renderPrint({summary(data())})
output$table <- renderTable({data.frame(x=data())})
})
)
So here
tags$head(tags$style(
HTML(
".nav-tabs > .active > a, .nav-tabs > .active > a:hover { outline: 0;}")
))
sets the outline
attribute to 0 on the relevant quantities.