Shiny - Draw Right Border Of Column

Question

Suppose I have the following Shiny ui code:

fluidRow(
  column(
    width=4
  ),

  column(
    width=8
  )
)

How can I draw the right border of the first column?

Answer 1

You can add CSS to the column using the style argument. So one way to do this would be:

library(shiny)

ui <- fluidPage(
  fluidRow(
    column(style='border-right: 1px solid red',
      width=4,
      p('Hello')
    ),

    column(
      width=8,
      p('World')
    )
  )
)

server <- function(input,output) {}

shinyApp(ui,server)

Hope this helps!

Answer 2

Another way to approach this is to create the html style outside of the object (the column in this case) and assign the column a css class. By creating the style in this way, you can apply the style to another column more efficiently.

library(shiny)

ui <- fluidPage(
tags$head(
tags$style(HTML("
  
  .column_w_bar {
      border-right-color: #eb4034;
      border-right-width: 1px;
      border-right-style: solid;
}
") # end HTML
) # end tags$style
) # end tags$head

fluidRow(
  column(class = 'column_w_bar',
      width=4
  ),

  column(
      width=8
  )
 ) # end fluidRow
) # end FluidPage

In this example, it is within the R code using tags$head() and tags$style().
You can also create the styles in a separate .css file within the 'www' folder in a shiny project.