Modify CSS from Shiny reactive output

Question

I have a navbarPage in Shiny where i initialize a tab (let's call it tab1) hidden using css. To achieve that, i use the following line:

    tags$head(tags$style(HTML("#tabs li a[data-value = 'tab1'] {display: none;}"))),

Which works perfect.

Now, in the server, i want to show that tab in response to an event, but i don't know how to "update/replace" that css property (display:none) from the R code. I saw that with runjs() can be done, but i'm not really an expert in js/css.

How can i modify that css property for that object in the server?

There is a solution using shinyjs on SO [here](https://stackoverflow.com/questions/31703241/activate-tabpanel-from-another-tabpanel/31719425#31719425). Is this question a duplicate or do you want to avoid using shinyjs and find a native solution? — TimTeaFan, Aug 09 '19 at 08:42
I've tried js solutions but all of them render the element for one second and then hide it (which i'm trying to avoid). The only working solution i've found so far is using css since it prevents the element from rendering from the beginning and not after server is fired. I'm gonna take a look at those, thx a lot guys, but if you come up with the css method, would be nice. — Ghost, Aug 09 '19 at 12:31
Nobody knows how to execute that css command from the server? — Ghost, Aug 09 '19 at 17:18

TimTeaFan · Accepted Answer · 2019-08-09T18:05:27.260

1

Update

I think I got it working. My approach is: define two css styles in the beginning. display: none for the initial tab2 navbar tabsetpanel and display: inline-block !important for a new class called 'showtab'. Then I use shinyjs to add a class to tab2 of the navbar tabsetpanel which overwrites (!important) the original css style of tab2.

The problem with shinyjs original functions was: (1) when using hide/show then you can see tab2 in the initial start up where you do not want it to show up. (2) when using your css style display: none and either shinyjs::show or shinyjqui::jqui_show then the style argument is changed to style = inline which messes the position of the word "tab2" in the navbarpage up.

css <- "
#navbar li a[data-value = tab2] {
display: none;
}
.showtab {
display: inline-block !important;
}
"

# 

library(shiny)
library(shinyjs)

ui <- tagList(

  useShinyjs(),
  inlineCSS(css),

  navbarPage(
    "test navbarPage",
    id = "navbar",
    tabPanel(
      title = "tab1",
      actionButton("show", "Show tab2")
    ),

    tabPanel(
      title = "tab2"
    )
  )
)

server <- function(input, output, session) {

  observeEvent(input$show, {
    addClass(selector = "#navbar li a[data-value = tab2]",
                   class = 'showtab')
  })
}



shinyApp(ui = ui, server = server)

edited Aug 09 '19 at 18:05

answered Aug 09 '19 at 17:28

TimTeaFan

17,549
4
18
39

It's giving me an error: Warning: Error in show: unused argument (selector = "#tabs li a[data-value = 'tab1']"). Show is a function from shiny or shinyjs? – Ghost Aug 09 '19 at 17:53
Note that I changed the id of the `navbarPage` from "tabs" to "navbar". That might be the reason your selector is not working. – TimTeaFan Aug 09 '19 at 17:58
This new line "addClass(selector = "#navbar li a[data-value = tab2]",class = 'showtab')" works, but it's rendered into a 0px x 0px div, how could i change that? – Ghost Aug 09 '19 at 18:05
You would need to provide some example code. In my minimal example it seems to work. – TimTeaFan Aug 09 '19 at 18:07
1

Sorry!! Didn't see the css 'showtab' class. Tested it, now it's working flawless. Thanks a lot mate! – Ghost Aug 09 '19 at 18:08
My mistake, i didn't update the page, so didn't see you changed the css code. – Ghost Aug 09 '19 at 18:09

Modify CSS from Shiny reactive output

1 Answers1