Zeilenabstand in R Shiny anpassen: eine Schritt-für-Schritt-Anleitung

Question

Ich versuche, die Lücken zwischen Zeilen in einem actionButton() anzupassen, das in einer Shiny-App gerendert wurde, wie unten gezeigt und basierend auf dem MWE-Code unten. Wie passt man den Zeilenabstand an?

Gilt nur für diese Aktionsschaltfläche, nicht für die gesamte App. Ich bin nicht sehr vertraut mit HTML oder CSS, aber wenn ich mich erinnere, gibt es eine Möglichkeit, die HTML/CSS-Formatierung auf alle Objekte in der Anwendung oder nur auf bestimmte Objekte in der Anwendung anzuwenden: Ich bin daran interessiert, sie nur auf die anzuwenden angegebenes Objekt.

MWE-Code:

library(shiny)

ui <- fluidPage(
  br(),
  actionButton(
    "add",
    HTML("Add <br/> column"), 
    width = '80px',
    style='padding:0px; font-size:100%')
  )

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

shinyApp(ui, server)

Answer 1

您可以覆盖闪亮的默认 line-height css 规则。

actionButton(
    "add",
    HTML("Add 
 column"), 
    width = '80px',
    style='padding:0px; font-size:100%; line-height:1;') // notice addition of 'line-height:1;'
  )

/*this is default styling aplied by shiny*/

button {
  color: #333;
  background-color: #fff;
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  border: 1px solid #ccc;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  -webkit-appearance: button;
  text-transform: none;
}

 Add 
 column