What causes the sudden shift in shape for a numericInput corner from round to 90 degrees in shinydashboard?

After creating a numericInput and a selectInput field using scripts in both shiny and shinydashboard, I noticed that the corner of the numericInput changes to 90 degrees in shinydashboard. For reference, you can view screenshots of both examples below:

https://i.sstatic.net/36QO2.png

In Example 1, both input fields have round corners.

https://i.sstatic.net/3nizN.png

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

I am seeking assistance in understanding this behavior and finding a way to ensure all corners are consistent, whether they are round or 90 degrees.

Example 1 ()

# 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 ()

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

Answer №1

@MistaPrime has pointed out that the issue lies in a CSS border-radius problem related to numericInput and selectInput. It's worth mentioning that numericInput is styled by .form-control, while selectInput is styled by .selectizeInput, so both need to be adjusted. Here's how you can update the 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)
)

https://i.sstatic.net/PjPrd.png

In response to your question on why shinydashboard behaves this way--it could possibly be due to the default browser behavior.

Answer №2

Bootstrap's CSS seems to be the culprit behind the 4px corner radius being added. To get rid of it, simply include this in your custom CSS:

.form-control {
    border-radius: 0px;
}

On the flip side, you have the option to add a 4px border radius to another section on your website:

.form-control {
    border-radius: 4px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Refreshing the page after executing a MySQL UPDATE statement

There seems to be a problem with the page refreshing faster than the query execution. I have an UPDATE query to update my database with values in my fields, triggered by pushing a button. However, upon clicking the button (which refreshes the website), th ...

Troubleshooting IE7's overflow problem

In my website, I have a ul element with overflow-y set to auto for displaying a nice scroll bar with all the li elements. However, in IE7, this setting is ignored and the list overflows outside the container. To see the issue directly, you can visit http: ...

What is the best way to retrieve user data and format the output using JavaScript into a structured form?

I am trying to achieve the functionality shown in this image: https://i.sstatic.net/svzvc.png My goal is to extract user input from a form and display it on my webpage using JavaScript. Below is the code snippet that I have been working on. Code: f ...

I am looking to use a loop to remove certain values in an ANOVA analysis

Looking to assess the impact of data points on an ANOVA by excluding them: wanted =(1:10 !=10) wanted summary(aov(log(Sdrtl)~location,subset=wanted)) Instead of manually excluding 1:10, I want to create a loop to generate all ANOVAs at once. As a beginne ...

style the table cells based on results of winner values retrieved from JSON

After fetching JSON data, I am utilizing angular JS to present it in a table. The table consists of multiple rows that are populated from the JSON file using ng-repeat. The value for Status.winner can either be 0 or 1. If the winner's value for a p ...

What are some ways to implement drop-down functionality using CSS?

I've been working on tweaking the CSS of this website for what feels like an eternity. I just can't seem to figure out how to make the "medical" menu item drop down to display the rest of the hidden menu items. I've managed to unhide and exp ...

Use jQuery to select and emphasize the following menu option

Hey there! I'm currently working on adding a new feature to my website. I want the menu items to highlight in succession when clicked. For example, if I click on people, I want it to highlight and then move on to highlight the next item in the menu, w ...

Selecting specific features from a subset of the overall feature set

I am currently facing a challenge with feature selection using the Boruta package in R. The issue arises from my extensive feature set, which consists of 70518 features, making the dataframe too large (2Gb) for the Boruta package to handle all at once. I ...

Using the AIC function to process elements within a list

My objective is to apply the function AIC to multiple elements within a list. Below is the code I am using: library(urca) set.seed(1234) df_example <- data.frame(a = rnorm(75), b = rnorm(75), c = rnorm(75)) df_UR_za <- lapply( df_example, fu ...

Invoking a function means calling another one simultaneously

There are two buttons in my code: The button on the right triggers a function called update(): <script> function update(buttonid){ document.getElementById(buttonid).disabled = true; event.stopPropagation(); var textboxid = buttonid.sli ...

Tips for updating a portion of your code using new variables in JavaScript

I'm currently working on implementing a commenting feature for my website. The goal is to display new comments above the existing comment section when users submit their feedback. However, I'm facing challenges in dynamically updating the HTML wi ...

Error message: PHP uninitialized array key within nested if statement

Encountering an issue with Undefined Index on line 2 in this scenario: if ($_POST['go'] == 'create') { Aware that resolving it requires using isset, but unsure how to implement it within another if statement. Appreciate any help, tha ...

Is it possible for HTML to appear differently on various monitors?

Consider this scenario: I created a button or header using html and css, positioning it on my 1920x1080 monitor with a margin of 50%. However, my friend's monitor resolution is 1378x768. Will there be any difference in the display between our monitors ...

How to enhance the design with a box-shadow for a :after pseudo element

One of the challenges I'm facing involves a CSS design with a div called .testimonial-inner that has an arrow created using the :after pseudo element. The issue is making them appear as one cohesive element, especially when applying a box-shadow. Her ...

I need help figuring out how to create dynamic bars that change colors based on their values. Any suggestions on how to

Seeking a solution to create interactive live-charts similar to the image provided. I've explored various chart libraries like Highcharts, fusioncharts, raphaeljs and many others, but haven't found one that fits my needs perfectly. I experimented ...

Exploring linear regression with a single variable in R

Looking at some baseball statistics, specifically RBIs by season, we have the following data: player s1 s2 s3 Brian_Giles 66 68 70 Joe_Thomas 71 72 71 Robin_Yount 71 69 68 Jim_Jones 66 66 65 I am interested in performing a simple linear ...

How can I prevent the content from sliding out of view in a Bootstrap carousel?

I am looking to create a slider that includes a form or text. However, I have noticed that when scaling up by 50-75% or when there is a lot of content, the content extends beyond the slider. Image Check out my code on jsfiddle: jsfiddle.net/sL70r2an/ ...

retrieve the data-initial-value's value through JavaScript

Hello, I am currently attempting to retrieve the text from this input field but all I'm getting is an empty value. <input type="text" class="quantumWizTextinputPaperinputInput exportInput" jsname="YPqjbf" autocomplete= ...

Trouble achieving center alignment of navigation bar using @media query in Firefox and IE

Looking for help with creating a video hub that includes a navigation bar? Instead of using an accordion nav collapse, I prefer the menu to carry onto the next line and be centered. Here is the code snippet I used to achieve this effect: @media screen and ...

elements within the adaptable grid structure

I'm experimenting with the Responsive Grid System for the first time and encountering difficulties getting my columns to display side by side. I have a two column grid setup for some design elements and centered content for others. Below is the relev ...