So ändern Sie die Größe und den Abstand von check-Boxen und radio-buttons in Shiny-app?

Wie Sie:

  1. Ändern Sie die Größe über die check Boxen und radio buttons in Shiny?

  2. Ändern Sie den vertikalen Abstand zwischen den Boxen/Tasten?

Ich bin ganz neu auf Glänzend (Tag 1), also tut mir Leid, wenn dies offensichtlich zu sein scheint.

Follow-up: was sind einige gute Quellen zu erfahren Formatierung Lexikon??


Mein Code bisher:

ui <- fluidPage(

  sidebarPanel(width = 3,

    fluidRow(
      column(6,offset=0,
        div(style = "font-size: 8px;",      
          selectInput(inputId = "size",
            label = "Tree Size",
            choices = c("All","Canopy","Subcanopy","Small"),
            selected = "All"),
        )
      ),

      column(6,offset=0,
        div(style = "font-size: 8px;padding:0px;",
          checkboxGroupInput(inputId = "labels",
             label = "Labels",
             choices = c("SPEC","Plot-End","Plot-Start"),
             selected = c("SPEC","Plot-End","Plot-Start")
          )    
        )
      )
    ),

    fluidRow(
      column(6,offset=0,
        div(style = "font-size: 8px;",      
          radioButtons(inputId = "data",
          label = "Data",
          choices = c("PSP Only","PSP + MAP"),
          selected = "PSP + MAP")
        )    
      ),

      column(2,offset=0,
        div(style = "font-size: 8px;padding:0px;",  
          radioButtons(inputId = "freq",
            label = "Frequency",
            choices = c(0.025,0.05),
            selected = 0.05)
        )
      )
    )
  )

  mainPanel(
    plotOutput(outputId = "plot")
  )
)

server <- function(input, output) {

  output$nms <- renderPlot({
    plot(runif(99),runif(99))

  })

}

shinyApp(ui = ui, server = server)

(Wieder, ich bin gerade erst anfangen zu lernen, dieses Zeug, also mein code ist wahrscheinlich Mist – sorry!).

  • Ich fand einen Weg, um schrumpfen der text, aber jetzt, wie abotu die Tasten? Ich bemerkte auch, durch das schrumpfen der text, der text ist nicht mehr ausgerichtet mit den Tasten-Sie sind verzerrt!



One Reply
  1. 5

    Ich bin überrascht, es ist keine Antwort, aber; es ist eine gute Frage. Sie werden wahrscheinlich wollen lernen, einige grundlegende CSS-wenn Sie interessiert sind, in custom-styling. In der Regel für Glänzende, würde ich erstellen Sie eine separate/externe Datei für die CSS-Dokument, aber ich habe es im R-Skript für die Einfachheit in diesem Beispiel. Leider, styling, radio-buttons und Checkboxen ist nicht die einfachste Aufgabe, wenn Sie neu in CSS und kann variieren zwischen den Browsern, aber der Beispiel-code hier funktioniert gut in Chrome zumindest. Radio buttons sollten funktionieren ähnlich, aber nicht exakt die gleichen. Hinzufügen -webkit-transform: scale(1.5); zu .checkbox ist auch eine option für webkit-Browser. Fügen Sie den folgenden code innerhalb fluidPage() als erstes Element (vor sidebarPanel):

      tags$style("
          .checkbox { /* checkbox is a div class*/
            line-height: 30px;
            margin-bottom: 40px; /*set the margin, so boxes don't overlap*/
          }
          input[type='checkbox']{ /* style for checkboxes */
            width: 30px; /*Desired width*/
            height: 30px; /*Desired height*/
            line-height: 30px; 
          }
          span { 
              margin-left: 15px;  /*set the margin, so boxes don't overlap labels*/
              line-height: 30px; 
          }
      "),

    So ändern Sie die Größe und den Abstand von check-Boxen und radio-buttons in Shiny-app?

    Sicherstellen, dass Sie das styling der richtigen Komponenten, müssen Sie die HTML-tags beim erstellen der Seite. Suchen Sie in der Struktur weiter unten können Aufschluss geben, warum ich brauchte, um den Stil bestimmter Elemente in meinem code oben.

    So ändern Sie die Größe und den Abstand von check-Boxen und radio-buttons in Shiny-app?

    • Wird dies nicht beeinflussen, alle anderen Spannweiten in Ihre app zu? Und wenn ja, wie verhindern?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.