CODEWITHSUNDEEP
htmlruser-interfaceshiny
OmG
OmG

Reputation: 18838

How to set style for a conditional panel in Shiny

I have the following conditional panel:

conditionalPanel
(condition = 'input.show_p =="1"',
    fluidRow(
      box(width =12,
          actionLink(inputId = "p_name", label = "Path"),
          HTML("/"),
          conditionalPanel(condition = 'input.show_l == "1"',
            actionLink(inputId = "l_name", label = "Path"),
            HTML("/")
          )
      )
   )
)

As I have seen in the generated html, I found the inner most conditional panel is translated to a div with display: block as below:

<div data-display-if="input.show_l == &quot;1&quot;" data-ns-prefix="" style="display: block;">
    <a id="pl_name" href="#" class="action-button shiny-bound-input"> LM </a>
                        /
</div>

The question is how can I change it to display: inline in R? Or in the other words, how can I set style for the conditional panel in R Shiny?

Upvotes: 2

Views: 1643

Answers (3)

Cai
Cai

Reputation: 2120

If you're wanting to use a CSS class selector, you can add a class to the conditionalPanel using conditionalPanel(…) %>% tagAppendAttributes(class = "inline"), then add .inline {display: inline-block;} to your CSS.

Upvotes: 0

K. Rohde
K. Rohde

Reputation: 9676

Style can be added to a conditional panel just as to most other elements, using the style argument with a valid css string.

Conditional Panels use the jQuery show and hide methods, which have the feature to set the display property to none for hide and show to block or any value the element had before jQuery was manipulating it. This last part means, we can just set the display to inline-block and it will be preserved like regular styling.

A short version would be like this:

library(shiny)

ui <- fluidPage(
    actionButton("show_p", "Toggle"),
    "Some text to wrap the", 
    conditionalPanel(condition = 'input.show_p % 2', id="nice", style="display: inline-block;", "hidden"),
    "conditional panel."
)

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

shinyApp(ui, server)

Upvotes: 3

OmG
OmG

Reputation: 18838

Add an id for the panel, and then modify it in custom.css referenced file:

# in shiny dashboard
tags$head(tags$link(rel = "stylesheet", type = "text/css", href = "custom.css"))

#...

conditionalPanel
(condition = 'input.show_p =="1"',
  fluidRow(
    box(width =12,
        actionLink(inputId = "p_name", label = "Path"),
        HTML("/"),
        conditionalPanel(condition = 'input.show_l == "1"', id="pl_panel"
          actionLink(inputId = "l_name", label = "Path"),
          HTML("/")
        )
    )
  )
)

And, as you knew, modify the referenced style file (custom.css):

#pl_panel
{
    display: inline-block
}

Upvotes: 0

Related Questions