Search code examples
htmlcssrshinyshinydashboard

Why shinydashboard changes the corner of a numericInput from round to 90 degree?

I have the following two scripts creating one numericInput and one selectInput fields. One is in shiny, and the other is in shinydashboard. I also created shinyapps.io link to these two examples.

My question is why shinydashboard changes the corner of the numericInput to be 90 degrees? Please see the screenshots. In example 1, both input fields have round corners.

enter image description here

However, in example 2, the corner of the numericInput becomes 90 degrees.

enter image description here

It would be great if someone can help me understand this behavior and develop a way to make all the corners either round or 90 degrees.

Example 1 (https://yuchenw.shinyapps.io/Corner_Input_Example1/)

# Load the packages
library(shiny)

# User Interface
ui <- fluidPage(
  numericInput(inputId = "Number", label = "A numericInput with round corner", value = NA),
  selectInput(inputId = "Select", label = "A selectInput with round corner", choices = 1:3)
)

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

# Run the app
shinyApp(ui, server)

Example 2 (https://yuchenw.shinyapps.io/Corner_Input_Example2/)

# Load the packages
library(shiny)
library(shinydashboard)

# User Interface
ui <- dashboardPage(
    header = dashboardHeader(title = ""),
    sidebar = dashboardSidebar(
      sidebarMenu(
        menuItem(
          text = "Example",
          tabName = "tab1"
        )
      )
    ),
    body = dashboardBody(
      tabItems(
        tabItem(
          tabName = "tab1",
          numericInput(inputId = "Number", label = "A numericInput with 90-degree corner", value = NA),
          selectInput(inputId = "Select", label = "A selectInput with round corner", choices = 1:3)
        )
      )
    )
  )

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

# Run the app
shinyApp(ui, server)
Solution

  • @MistaPrime is correct that this is a border-radius CSS issue. One more thing to note is that numericInput is styled by .form-control, while selectInput is styled by .selectizeInput, so you will need to modify both. Here's the modified UI:

    ui <- fluidPage(

    tags$head(
        tags$style(
            HTML(
                "
                .form-control {
                    border-radius: 0px 0px 0px 0px;
                }

                .selectize-input {
                    border-radius: 0px 0px 0px 0px;
                }
                "
            )
        )
    ),

  numericInput(inputId = "Number", label = "A numericInput with round corner", value = NA),
  selectInput(inputId = "Select", label = "A selectInput with round corner", choices = 1:3)
)

    image

    To actually answer your question as to why shinydashboard does this--I'm not sure, but it might just be the default behaviour provided by the browser.