ShinyでCSS


久々のCSS。F12が大切ってことだ。

.after .shiny-input-container {
  margin-top: -10px;
  margin-bottom: -10px;
}

上記のstyles.cssをwwwに配置して下記を実行。

library(shiny)

ui <- fluidPage(
  tags$head(tags$link(rel="stylesheet", type="text/css", href="styles.css")),

  h1("before"),
  div(
    class="before",
    checkboxInput(inputId="x1", label="x1"),
    checkboxInput(inputId="x2", label="x2"),
    checkboxInput(inputId="x3", label="x3"),
    checkboxInput(inputId="x4", label="x4"),
    checkboxInput(inputId="x5", label="x5")
  ),

  h1("after"),
  div(
    class="after",
    checkboxInput(inputId="x1", label="x1"),
    checkboxInput(inputId="x2", label="x2"),
    checkboxInput(inputId="x3", label="x3"),
    checkboxInput(inputId="x4", label="x4"),
    checkboxInput(inputId="x5", label="x5")
  ),

  absolutePanel(
    h1("after"),
    div(
      class="after",
      checkboxInput(inputId="x1", label="x1"),
      checkboxInput(inputId="x2", label="x2"),
      checkboxInput(inputId="x3", label="x3"),
      checkboxInput(inputId="x4", label="x4"),
      checkboxInput(inputId="x5", label="x5")
    ),
    top=10, right=10, draggable=TRUE)
)

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

shinyApp(ui, server)