Как центрировать элемент CSS под другим в Shiny - PullRequest
Новая
       23

Как центрировать элемент CSS под другим в Shiny

1 голос
/ 14 апреля 2020

Я разрабатываю приложение Shiny, и у меня есть абсолютная панель, которую я хотел бы иметь в стиле приборной панели.

По сути, у меня есть несколько текстовых описаний кнопок, которые я хотел бы видеть на приборной панели, причем кнопки отображаются по центру под текстовыми описаниями. В настоящее время я использовал элемент управления абсолютной позицией в CSS, чтобы определить размещение на панели. Хотя пока это работает, я не думаю, что это особенно масштабируемый метод.

Я приложил некоторый воспроизводимый код, чтобы вы поняли, о чем я говорю.

Большое спасибо за вашу помощь. 

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  absolutePanel(
    id = "quick-glance", style="z-index:500; opacity: 0.90",
    class = "panel panel-default",
    draggable=TRUE,
    fixed=TRUE,
    width = 180,
    height = 75,
    top = 20, left = 50,

    textOutput("label1"), tags$head(tags$style("#label1{
                                               color: steelblue;
                                               font-weight: bold; 
                                               border: none;
                                               position: absolute; top: 5px; left: 30px;
                                               ")),
    actionBttn("bttn1",label = "$##",style = "bordered",color = "primary"),
    tags$head(tags$style("#bttn1{ position: absolute; bottom: 5px; left: 20px;}")),

    textOutput("label2"),tags$head(tags$style("#label2{
                                              color: steelblue;
                                              font-weight: bold; 
                                              border: none;
                                              position: absolute; top: 5px; left: 100px;
                                              ")),
    actionBttn("bttn2",label = "#",style = "bordered",color = "danger"),
    tags$head(tags$style("#bttn2{ position: absolute; bottom: 5px; left: 110px;}"))


    )
    )

server <- function(input, output, session) {
  output$bttn1 = renderPrint(input$bttn1)
  output$label1 = renderText("Text")

  output$label2 = renderText("Text Text")
  output$bttn2 = renderPrint(input$bttn2)

}

shinyApp(ui, server)

1 Ответ

0 голосов
/ 14 апреля 2020

Лучше обернуть вещи, которые вы хотите сгруппировать в column(), что создает div, который вы затем можете центрировать. Затем внутри каждого такого div вы можете центрировать текст и кнопку. 

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  absolutePanel(
    id = "quick-glance", style="z-index:500; opacity: 0.90",
    class = "panel panel-default",
    draggable=TRUE,
    fixed=TRUE,
    width = 180,
    height = 75,
    top = 20, left = 50,
    fluidRow(
      column(
        textOutput("label1"), 
        actionBttn("bttn1",label = "$##",style = "bordered",color = "primary"),
        width = 1
      ),
      column(
        textOutput("label2"), 
        actionBttn("bttn2",label = "#",style = "bordered",color = "danger"),
        width = 1
      )
    ),
    tags$head(tags$style(".col-sm-1 {width: 50%; margin: 0px;}
                          #label1, #bttn1, #label2, #bttn2 {margin: 0 auto; width: 100%; text-align: center}"))
  )
)

server <- function(input, output, session) {
  output$bttn1 = renderPrint(input$bttn1)
  output$label1 = renderText("Text")

  output$label2 = renderText("Text Text")
  output$bttn2 = renderPrint(input$bttn2)

}

shinyApp(ui, server)
...