fileInput looks messy

[ghost]

Hi, The widget for fileInput looks messy and the upload message bar seems too thin, as demonstrated below.

If you could point me to which CSS files need editing, I'll tweak them accordingly and issue a pull request.

Cheers!

[DivadNojnarg]

Hi, this is not surprising:

• the fileInput has a progress bar. In shiny it has bootstrap 3 dependencies.
• in argon, there are dedicated progress bars with probably the same class as in bootstrap 3
• bootstrap is overwritten by argon CSS, giving this tiny progress bars.
• There are no argument for the progress bar size in argon: https://demos.creative-tim.com/argon-design-system/docs/components/progress.html
• same thing for buttons: argon has its own buttons
• same for the textArea

However, there are easy solutions:

library(shiny)
library(argonR)
library(argonDash)
shinyApp(
  ui = argonDashPage(
   title = "test",
   navbar   = argonDashNavbar(),
   sidebar = argonDashSidebar(id = "sidebar"),
   body = argonDashBody(
     tags$head(
       tags$style(
         ".progress {height: 20px;}"
       )
     ),
     fileInput("file1", "Choose CSV File")
   ),
  ),
  server = function(input, output) {}
)

I simply increase the height of the progress class (I think its 10 px by default...)

[krisvanlog]

The progress bar looks much better at 20px. Thanks for that solution.

Is it possible to modify the size of the button and text box so they are the same height using the same method? They don't quite line up.. I have no experience with CSS so am no sure how to go about it. I tried ".button {padding: 14px 40px;}" but it doesn't seem to change anything.

Edit: Got it....
tags$style( ".btn {padding: 11.5px 40px;}" )