在uioutput显示屏下方的新行中显示文字[Shiny]

时间:2017-01-04 17:59:03

标签: html css datatable shiny

uiOutput('myTable')后跟p("Here is some text....")将文本放在uioutput显示旁边,但我喜欢从页面左侧开始以新行打印文本。添加br()只是添加相当于屏幕宽度的空白空间,因此,文本从新行开始,但不是从页面左侧开始。有趣的是,添加任何控件窗口小部件(例如dateInput)都会在新行中显示窗口小部件。在我的情况下,uioutput输入来自map [ purrr]。我通过map合并HTML("<br>")输出和list,但没有解决方案。这是可重现的代码:

library(shiny)
ui <- fluidPage(
   tabPanel("Test",
            numericInput("samsize","specify sample size",4,1,52),
            uiOutput('myTable'),
            #dateInput("date", label = "Today's Date")
            #br(""),
            p("Here is some text...")
   ))

server <- function(input, output) {
   data <- reactive({
      alphabets <- c(letters,LETTERS)
      Index <- seq(1,length(alphabets),1)
      names(Index) <- alphabets

      # Notice I don't put the vector in a one row matrix as in you example
      sample(Index,input$samsize)
   })

   library(purrr) # map is a nice alternative to lapply
   output$myTable <- renderUI(map(names(data()),~div(strong(.),
                                                     div(data()[.]),
                                                     style="float:left;padding:10px 20px;")))
}

shinyApp(ui, server)

这是屏幕截图。如图所示,以下是uioutput显示旁边的一些文字,我希望它位于显示enter image description here

下方的新行中

1 个答案:

答案 0 :(得分:1)

使用div样式float:left后,您需要清除浮动,例如使用clear:left

ui <- fluidPage(
  tabPanel("Test",
           numericInput("samsize","specify sample size",4,1,52),
           uiOutput('myTable'),
           div("Here is some text...", style="clear:left;"),
           dateInput("date", label = "Today's Date")
  ))

Result using clear:left

您会找到有关浮动div here

的更多信息