css - R:Shiny:如何在shinyapp中将gvisTable与中心对齐

Question

在 Google 上查看 Shiny 的群组:

https://groups.google.com/forum/#!topic/shiny-discuss/J8C2CnFOTOM

我找到了一个解决方案，但是我只知道 HTML 的基础知识和一点 CSS。如何在我的代码中实现该解决方案？

我需要将 gvisTable 放在中心。我将代码直接放入 htmlOutput 函数作为参数，但出现错误:

**注意:这是我对代码所做的唯一更改。

 tabPanel('Ikasa Adwords MotionChart',
                   br(),
                   htmlOutput("resumen",
                              tags$style(type="text/css",
                                         HTML("#summary>div { margin: 0 auto; }")
                              )),
                   br(),
                   br(),

错误:

ERROR: argument is not interpretable as logical

原始 ui.R:

library(shiny)
library(googleVis)
# Rely on the 'WorldPhones' dataset in the datasets
# package (which generally comes preloaded).


# Define the overall UI
shinyUI(

  # Use a fluid Bootstrap layout
  fluidPage(    

    # Give the page a title
    br(),
    br(),
    br(),
    titlePanel("Ikasa Adwords"),

    # Generate a row with a sidebar
    br(),
    br(),
    sidebarLayout(      

      # Define the sidebar with one input



      sidebarPanel(
        dateRangeInput("dates", label = h3("Date range"),
                       start = "2015-01-01", end = "2015-02-15")

      ),



      mainPanel(
        tabsetPanel(

          tabPanel('Ika MotionChart',
                   br(),
                   htmlOutput("resumen",
                              tags$style(type="text/css",
                                         HTML("#summary>div { margin: 0 auto; }")
                              )),
                   br(),
                   br(),

                   htmlOutput("motionchart")

        )

      )
    )
  )))

Answer 1

您可以尝试使用 tag$style 直接在表格上设置 css。

例如:

tabPanel('Ika MotionChart',
                   br(),
                   htmlOutput("resumen"),
                   tags$style(HTML("#resumen table{ 
                                  margin: auto;
                                   }")),
                   br(),
                   br(),

                   htmlOutput("motionchart")
                   tags$script(HTML("
                        var p = document.getElementById('motionchart')
                        $(p).attr('align', 'center');"))

          ) 

css 将具有 resumen 的元素中的所有 table 的左右边距设置为 auto > ID。 表格周围的左右边距应平均分割，形成居中的表格。

对于 motionChart，实际图表是一个 embed 元素，因此您可以通过使用 javascript 设置 align 属性来更改对齐方式。

在 Chrome 中，通过一些 WorldPhone 数据，我得到以下结果: