Vertical align checkboxInput and its label

[Gerben]

I am building a Shiny app using shinytheme cerulean.
I have a problem with the vertical alignment of a checkboxInput and the label when I format the label using e.g. h3.

Code example:

library(shiny)
library(shinythemes)

ui <- fluidPage( theme = shinytheme("cerulean"),
  
  fluidRow(column(6, checkboxInput("show_values", 
                                   label = HTML("<h3>Show values</h3>"), 
                                   value = FALSE)))
)
server <- function(input, output, session) {}

shinyApp(ui, server)

The result of this code looks awful. The label is far below the checkbox. Would it be possible to vertically align the checkbox and its label?

I searched the internet for solutions. Some suggest the use of a HTML table. I tried but was not successful.

All suggestions highly appreciated.

Gerben

[nirgrahamuk]

library(shiny)
library(shinythemes)

ui <- fluidPage(
  theme = shinytheme("cerulean"),

  fluidRow(
    tags$style("#show_values {
    height: 50px;
    width: 50px;}"),
    column(6, checkboxInput("show_values",
      label = HTML('<h3 
                    style="position: fixed;left: 75px;">
                   Show values
                   </h3>'),
      value = FALSE
    ))
  )
)
server <- function(input, output, session) {}

shinyApp(ui, server)

[Gerben]

Thanks for your answer and pointing me in the direction of CSS for solving this kind of problems. I am new to CSS but I studied it in more detail now. I took your solution and changed it a bit for use in my actual Shiny app. This is the code that I use now:

library(shiny)
library(shinythemes)

ui <- fluidPage(
  theme = shinytheme("cerulean"),
  
  fluidRow(
    HTML("<style> #show_values {height: 20px; width: 20px;} </style>"),
    checkboxInput("show_values", label = NULL, value = FALSE),
    
    HTML('<div style="position: relative; top: -36px; left: 30px;">'),
    HTML('<h4>Show values</h4>'),
    HTML("</div>")
    
  ) # fluidRow
) # fluidPage

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

shinyApp(ui, server)

It takes some trial and error but using the CSS position style you can get the label where you want it.