Change The Size /Spacing of Label Text in R Shiny Fileinput

Change the size /spacing of label text in R Shiny fileInput?

This article pretty neatly summarizes the three ways you can style Shiny with CSS. If you end up styling more than a few elements, it's often best to add the CSS through a style sheet (i.e. an actual .css file), which in Shiny needs to be placed in a subdirectory named "www", which in turn is in your app directory.

If you're styling just one element ("element" meaning a UI output from a function), and you want the styling to apply to the entire element, you can wrap the element in a div tag and use the style attribute like so:

div(
   fileInput("file1", "Choose CSV File",
               accept = c(
               "text/csv",
               "text/comma-separated-values,text/plain",
               ".csv")
   ), style="font-size:80%; font-family:Arial;"
)

If you only want to style one component of the element, as you've described, then you need to use the developer tools in your browser to figure out what HTML you can target for your styling. In the case of a fileInput label, an actual <label> HTML tag is our target. If you'd rather avoid needing a stylesheet, then you can add the necessary CSS through the third approach described in the Shiny article, which is through the tags function. You can add the following code to your UI (right at the top of fluidPage) to change the font and add padding below the label:

tags$head(
  tags$style(HTML(
    "label { font-size:80%; font-family:Times New Roman; margin-bottom: 
    20px; }"
  ))
)

Changing the distance between the label text and a selectizeInput element in R Shiny?

I think that should do it.

library(shiny)

ui <- fluidPage(
  tags$head(
    tags$style(HTML(
       ".checkbox {margin: 0}
        .checkbox p {margin: 0;}
        .shiny-input-container {margin-bottom: 0;}
       "
    ))
    # inlineCSS(".checkbox margin: 0;")
  ),
  fluidRow(
    column(2,
           selectizeInput("S1", label = checkboxInput(inputId = "chk1", label = p('Test - ', strong('Test:'))), c("A","B")),
           selectizeInput("S2", label = checkboxInput(inputId = "chk2", label = div(icon("filter"), strong('Test:'))), c("A", "B")),
           selectizeInput("S3", "Test:", c("A", "B")),
           selectizeInput("S4", "Test:", c("A", "B"))
    )))

server <- function(input, output){}

shinyApp(ui = ui, server = server)

Reduce space between fileInput and text in Shiny

You can apply some style to it and adjust it using margin-top:

library(shiny)
runApp(
    list(ui = fluidPage(
        tags$head(tags$style(' #tab {margin-top:-30px;}')),
        fileInput("data", h3("Excel database import")), uiOutput("tab"),
    ),
    server = function(input, output, session){
        url <- a("Google Homepage", href="https://www.google.com/")
        output$tab <- renderUI({
            tagList("Access the page:", url)
        })
    })
)

Shiny - how to change the font size in select tags?

You had the right idea, but the select input in shiny actually uses selectize JavaScript to show the UI instead of the traditional select HTML tag. That's why your CSS isn't catching.

What you want instead of the select CSS is ".selectize-input { font-size: 32px; }

However, if you only have that CSS then the dropdown menu options will still be the default size and also there will be no padding around the text which looks very awkward. Here's some CSS you might want to use:

.selectize-input { font-size: 32px; line-height: 32px;}
.selectize-dropdown { font-size: 28px; line-height: 28px; }

So adding that to an app gives this:

runApp(shinyApp(
  ui = fluidPage(
    tags$style(type='text/css', ".selectize-input { font-size: 32px; line-height: 32px;} .selectize-dropdown { font-size: 28px; line-height: 28px; }"),
    selectInput("test","Test", 1:5)
  ),
  server = function(input, output, session) {
  }
))

How to make a label of a shiny widget the same as plain text?

Adding this line to your ui will remove the bold from labels:

tags$head(tags$style(HTML("label {font-weight:normal;}"))),

Sample Image

Added, we can wrap it in a div and give it a class:

tags$head(tags$style(HTML(".not_bold label {font-weight:normal;}"))),
    div(numericInput(inputId = "num1",
                 label = "This is a numeric input",
                 value = NA),class="not_bold")  
    ,numericInput(inputId = "num2",
                 label = "This is a numeric input too",
                 value = NA)

Sample Image

How to add text formatting like superscript or subscript to a label in a Shiny app?

Here are two option -

You can copy paste the superscript directly into your text.
Use tags$sup

library(shiny)

ui <- fluidPage({
  fluidRow(
           column(6, numericInput("input_a", "Label (unit = m²)", value = 1)), 
           column(6, numericInput("input_b", HTML(paste0("Label (unit = m",tags$sup("2"), ')')), value = 1))
           )  
})
server <- function(input, output) {}
shinyApp(ui, server)

Sample Image

Reduce the font size of the text within a sidebarPanel

You can maybe wrap it in a div and style it with style = "font-size:75%;". For selectizeInput you will need to do the same as its a different object you can either do it by id or overall with .selectize-input { font-size: 75%;}:

library(shiny)

ui <- fluidPage(
  tags$style(type='text/css', ".selectize-input { font-size: 75%;} .selectize-dropdown { font-size: 75%; }"),
  div(style = "font-size:75%;",
      sidebarPanel(
        selectizeInput(
          "s1",
          "Select s1",
          choices = c('A', 'B'),
          multiple = FALSE
        ),
        radioButtons(
          "r1",
          "Select r1",
          choices = c("A", "B", "C")
        ),
        radioButtons(
          "r2",
          "Select r2",
          choices = c("P", "R")
        ),
        selectizeInput(
          "s3",
          "Select s3",
          choices = c('C', 'D'),
          multiple = FALSE
        ),
        selectizeInput(
          "s4",
          "Select s4",
          choices = c('A', 'B'),
          multiple = TRUE
        ),
        actionButton(
          "b1",
          "Enter"
        )
      )
  )
)

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

shinyApp(ui, server)

Make space between title and other items in R (Shiny App)

You can add custom CSS as follows:

tags$head(tags$style(HTML('.navbar-brand {width: 300px; font-size:35px; text-align:center;}')))               )

Which would make your example look as follows:

Sample Image

You may want to play around with the numbers a bit to make it match your preferences. The code to reproduce the image above is given below. Hope this helps!

ui<-navbarPage("Intervals",
               tabPanel("Data Import",
                        sidebarLayout(sidebarPanel( fileInput("file","Upload your 
                                                              CSV",multiple = FALSE),
                                                    tags$hr(),
                                                    h5(helpText("Select the read.table parameters below")),
                                                    checkboxInput(inputId = 'header', label = 'Header', value = 
                                                                    FALSE),
                                                    checkboxInput(inputId = "stringAsFactors", "stringAsFactors", 
                                                                  FALSE),
                                                    radioButtons(inputId = 'sep', label = 'Separator', 
                                                                 choices = c(Comma=',',Semicolon=';',Tab='\t', Space=''), selected 
                                                                 = ',')),
                                      mainPanel(uiOutput("tb1")) ) ),        
               tabPanel("95% Continious RI",
                        sidebarLayout(sidebarPanel(
                          uiOutput("model_select"),
                          uiOutput("var1_select"),
                          uiOutput("rest_var_select")),
                          mainPanel( helpText("Selected variables and Fitted values"),
                                     verbatimTextOutput("other_val_show")))),
               tabPanel("Model Summary", verbatimTextOutput("summary")), 
               tabPanel("Scatterplot", plotOutput("scatterplot")),
               tags$head(tags$style(HTML('.navbar-brand {width: 300px; font-size:35px; text-align:center;}')))
)

server <- function(input,output) {}

shinyApp(ui,server)

RStudio Shiny renderDataTable font size

You can put dataTableOutput("tableName") inside of div()and change the font using the style parameter. style takes CSS arguments.

For example, if have this...

dataTableOutput("tableName")

you can change it like this...

div(dataTableOutput("tableName"), style = "font-size:80%")

to make the font size 20% smaller.

Change The Size /Spacing of Label Text in R Shiny Fileinput