CODEWITHSUNDEEP
htmlcssruser-interfaceshiny
Eizy
Eizy

Reputation: 351

Add Black Border to SidebarPanel and MainPanel - R Shiny

How would I add a black boarder to the main panel and side bar panel for the MRE? I would like the panels to stand out slightly more. I have adjusted background color on my app but think adding a black boarder will make each panel stand out better.

UI

library(shiny)
library(shinyalert)

# Define UI for application that draws a histogram
shinyUI(fluidPage(

    # Application title
    titlePanel("Old Faithful Geyser Data"),

    # Sidebar with a slider input for number of bins
    sidebarLayout(
        sidebarPanel(
            
        ),

        # Show a plot of the generated distribution
        mainPanel(
          DT::dataTableOutput("cap_table"),

        )
    )
))

Server

library(shiny)
library(shinyalert)

data <- data.frame(x=rnorm(10),y=rnorm(10))

# Define server logic required to draw a histogram
shinyServer(function(input, output) {


  
  # render data selection
  output$cap_table <- DT::renderDataTable(data)

    

})

Upvotes: 0

Views: 502

Answers (1)

Susan Switzer
Susan Switzer

Reputation: 1922

You may consider adding custom css to your app. I right click the app when it's running to "inspect" the css class that I would like to change.

Here is an example using in-line code.

Here is a link to consider other approaches such as sourcing a css file. https://shiny.rstudio.com/articles/css.html

library(shiny)
library(DT)

# Define UI for application that draws a histogram
ui <- shinyUI(
  fluidPage(
  tags$head(
    # Note the wrapping of the string in HTML()
    tags$style(HTML(".well {
        border: 1px solid #000000;
      }")), 
    tags$style(HTML(".col-sm-8 {
        border: 1px solid #000000;
      }"))
  ),
  # Application title
  titlePanel("Old Faithful Geyser Data"),
  
  # Sidebar with a slider input for number of bins
  sidebarLayout(
    sidebarPanel(
      
    ),
    
    # Show a plot of the generated distribution
    mainPanel(
      DT::dataTableOutput("cap_table"),
      
    )
  )
))


data <- data.frame(x=rnorm(10),y=rnorm(10))

# Define server logic required to draw a histogram
server <- shinyServer(function(input, output) {
  
  
  
  # render data selection
  output$cap_table <- DT::renderDataTable(data)
  
  
  
})

shinyApp(ui = ui, server = server)

sample

Upvotes: 1

Related Questions