为什么Shinydashboard将数字输入的角从圆形更改为90度? [英] Why shinydashboard changes the corner of a numericInput from round to 90 degree?

问题描述

我有以下两个脚本创建一个 numericInput 和一个 selectInput 字段.一个在 shiny 中，另一个在 shinydashboard 中.我还创建了指向这两个示例的Shinyapps.io链接.

我的问题是为什么 shinydashboard 将 numericInput 的角更改为90度?请查看屏幕截图.在示例1中，两个输入字段都具有圆角.

但是，在示例2中， numericInput 的角变为90度.

如果有人可以帮助我理解此行为并开发出一种方法来使所有拐角变为圆形或90度，那将是很好的.

示例1 (

要真正回答您有关为何闪亮仪表板执行此操作的问题，我不确定，但这可能只是浏览器提供的默认行为.

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.

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

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)

解决方案

@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)
)

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.

这篇关于为什么Shinydashboard将数字输入的角从圆形更改为90度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！