Question

在以下闪亮的ui和服务器代码中，我想向上移动主页面内容，以便将其与selectInput元素的顶部对齐。

library(datasets)    

shinyUI(
      navbarPage("",

        tabPanel("Test1",
          selectInput("C", "", choices = c("A","B")),         
          navlistPanel("TITLE",
            tabPanel("A",
              column(6,tableOutput("view1"))
            ),
            tabPanel("B"),
            tabPanel("C"),
            "--",
            id="SideTabsA",well = TRUE, widths=c(2,10)
          )
        ),
        tabPanel("Test2",
          navlistPanel("TITLE",
            tabPanel("A",
              column(6,tableOutput("view2"))
            ),
            tabPanel("B"),
            tabPanel("C"),
            "--",
            id="SideTabs2",well = TRUE, widths=c(2,10)
          ), value = "res"
        ),id = "NAVITEMS"
      )
    )

    shinyServer(function(input, output, session) {

            output$view1 <- renderTable({
              head(rock, n = 20)
            })

            output$view2 <- renderTable({
              tail(rock, n = 20)
            })

    })

enter image description here 我想我必须使用一些css来实现这一点，但我找不到如何做到这一点。我试过了：

.tab-content{
 margin-top:-50px;
}

但这也会改变navlistPanel和selectInput元素。

更新：

我也试过了.span10 {margin-top:-50px;}，但是这会移动所有.span10元素，并且会突然显示选项卡中的表格＆＃34; Test2＆＃34;这不是我想要的。我希望每个.span10元素都可以在任何地方使用该应用程序时向上移动50px。

是否有可能以某种方式给它一个id并仅移动所需的span10元素（即属于特定tabPanel的那些元素）？

Answer 1

我终于做到了。实际上这很简单。

必须做的是将tab-contents放在div标签中并分配一个类。然后在css中使用这个类。

最终的ui.r代码是：

 shinyUI( 
  navbarPage("",

    tabPanel("Test1",
    tags$head(tags$style( HTML(' .test1 .tab-content {margin-top:-50px;}'))),
      selectInput("C", "", choices = c("A","B")),         
      tags$div(class = "test1",
      navlistPanel("TITLE",
        tabPanel("A",
          column(6,tableOutput("view1"))
        ),
        tabPanel("B"),
        tabPanel("C"),
        "--",
        id="SideTabsA",well = TRUE, widths=c(2,10)
      )
    )),
    tabPanel("Test2",
      navlistPanel("TITLE",
        tabPanel("A",
          column(6,tableOutput("view2"))
        ),
        tabPanel("B"),
        tabPanel("C"),
        "--",
        id="SideTabs2",well = TRUE, widths=c(2,10)
      ), value = "res"
    ),id = "NAVITEMS"
  )
)

闪亮的CSS：标签内容的最高边距，不包括nav-list

1 个答案: