Richten Sie checkBoxGroupInput vertikal und horizontal aus

Ferroao

In einem ähnlichen Beitrag ( So richten Sie eine Gruppe von checkboxGroupInput in R Shiny aus ) werden Kontrollkästchen nur vertikal (wie in meinem Beispiel) oder nur horizontal ( R Shiny zeigt checkboxGroupInput horizontal aus ) ausgerichtet. Ich frage mich, ob es einen Weg gibt, dies in beiden Sinnen zu erreichen (in Spalten).

library(shiny)
examplesubset<-read.table(text="
                          elements locations
                          element_One A,M,P,R
                          element_Two A,B,C,M,P,E,I
                          element_Three G,M,T,F,O,H,A,B,C,D" ,  header=TRUE, stringsAsFactors=FALSE)
examplesubset$elements<-as.factor(examplesubset$elements)

ui<-fluidPage(    
  tags$head(tags$style(HTML("
                            .multicol {
                            -webkit-column-count: 3; /* Chrome, Safari, Opera */
                            -moz-column-count: 3;    /* Firefox */
                            column-count: 3;
                            -moz-column-fill: auto;
                            -column-fill: auto;
                            }
                            "))),
  titlePanel("Panel"),
  sidebarLayout(      
    sidebarPanel(
      selectInput("elements", "Select elements:", 
                  choices=examplesubset$elements)
    ) ,
    mainPanel(
      fluidRow(
        column(3,
               uiOutput("checkboxesui")
        ))))
  )

server<-function(input, output,session) {
  elementsselected<-reactive({
    sp<-examplesubset[examplesubset$elements==input$elements,]
    sp<-droplevels(sp)
  })
  locationsreactive<- reactive({
    j<-as.factor(unique(unlist(strsplit(elementsselected()$locations, ",", fixed = TRUE) ) ) )
    j<-droplevels(j)
  })
  output$checkboxesui<-renderUI({
    tags$div(align = 'left',
             class = 'multicol',
             checkboxGroupInput("locationscheckboxes", "locations",
                                choices=levels(locationsreactive()) 
                                , selected=c() )
             ) 
  })
}
shinyApp(ui = ui, server = server)

Geben Sie hier die Bildbeschreibung ein

Ian Wesley

Der folgende Code sollte den Trick machen. Sie mussten die CSS-Spalten ein Div unterhalb der Stelle anwenden, an der Sie sie hatten, und dann die Auffüllung über und unter den Kontrollkästchen entfernen. Außerdem habe ich die Spaltenfüllung in ausgeglichen geändert:

library(shiny)
examplesubset<-read.table(text="
                          elements locations
                          element_One A,M,P,A,R,T
                          element_Two A,B,C,M,P,E,I,N,S
                          element_Three G,M,T,F,S,V,P" ,  header=TRUE, stringsAsFactors=FALSE)
examplesubset$elements<-as.factor(examplesubset$elements)

ui<-fluidPage(    
  tags$head(tags$style(HTML("
                            .multicol .shiny-options-group{
                            -webkit-column-count: 3; /* Chrome, Safari, Opera */
                            -moz-column-count: 3;    /* Firefox */
                            column-count: 3;
                            -moz-column-fill: balanced;
                            -column-fill: balanced;
                            }
                            .checkbox{
                            margin-top: 0px !important;
                            -webkit-margin-after: 0px !important; 
                            }
                            "))),
  titlePanel("Panel"),
  sidebarLayout(      
    sidebarPanel(
      selectInput("elements", "Select elements:", 
                  choices=examplesubset$elements)
    ) ,
    mainPanel(
      fluidRow(
        column(3,
               uiOutput("checkboxesui")
        ))))
  )

server<-function(input, output,session) {
  elementsselected<-reactive({
    sp<-examplesubset[examplesubset$elements==input$elements,]
    sp<-droplevels(sp)
  })
  locationsreactive<- reactive({
    j<-as.factor(unique(unlist(strsplit(elementsselected()$locations, ",", fixed = TRUE) ) ) )
    j<-droplevels(j)
  })
  output$checkboxesui<-renderUI({
    tags$div(align = 'left',
             class = 'multicol',
             checkboxGroupInput("locationscheckboxes", "locations",
                                choices=levels(locationsreactive()) 
                                , selected=c() )
    ) 
  })
}
shinyApp(ui = ui, server = server)

Fest

Die andere Option ist die Verwendung der CSS-Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Dies würde die von Ihnen beschriebenen Bestellprobleme lösen, aber Sie müssten sich mit den Größen der glänzenden Optionsgruppe div beschäftigen, damit je nach Inhalt alles so passt, wie Sie es möchten. Es ist wahrscheinlich einfacher, die Kontrollkästchenoptionen neu zu ordnen, damit sie so angezeigt werden, wie Sie es möchten.

Verwandte Artikel

Richten Sie das Bild in der Mitte horizontal und vertikal aus

Alexiz Hernandez Ich habe momentan ein headerDiv und darin habe ich header-topund header-bottom. Ich versuche mein Logo auf dem zu platzieren top-headerund es vertikal und horizontal auszurichten. Das Logo wird horizontal, aber vertikal ausgerichtet, es wird e

Richten Sie Symbole und Text vertikal aus

Darren Sweeney Ich habe das Wort STERNE gefolgt von 5 Sternen ( &#9733;) Das Problem, das ich habe, ist, dass die Sterne kleiner als das Wort sind und ich möchte, dass sie vertikal ausgerichtet sind, aber ich kann nicht herausfinden, wie. Folgendes versuche ic

So richten Sie einen Inline-Block horizontal und vertikal aus

Kettenrad12 Was ist das Beste / Sauberste CSS, um das #dates divauf der rechten Seite des Headers und vertikal in der Mitte auszurichten ? Ich habe es versucht float: right, aber das erlaubt das nicht vertical-align. Ich möchte die Verwendung von Floats vermei