10

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?

1
  • Add custom css? Shiny doesn't support drawing lines on the column borders i guess.
    – Claud H
    Mar 4, 2018 at 19:47

2 Answers 2

Reset to default

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

11

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!

1
  • Yes @Florian many thanks! I did know about the custom CSS option but could not get it to draw the line. I missed the 'solid' you put in there. That is what happens when you try to customize Shiny without knowing CSS. Mar 5, 2018 at 11:07
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.