在 uioutput 显示下方的新行中显示文本 [闪亮]答案

【问题标题】：display of text in a new line below the uioutput display [Shiny]在 uioutput 显示下方的新行中显示文本 [闪亮]
【发布时间】：2017-05-19 03:06:48
【问题描述】：

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

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)

这是屏幕截图。正如所见，Here is some text 在uioutput 显示旁边，我想在显示下方的新行中显示

【问题讨论】：

很难在没有看到任何 CSS 或呈现的 HTML 输出的情况下判断。但似乎<p> 标签是浮动的。你能把样式float: none; display: block;添加到你的<p>，看看你是否得到你想要的？
p("Here is some text...",div(style="float: none; display: block;")) - 没有改变输出。我可以知道您在运行代码时是否有任何不同？闪亮的帮助文件 (shiny.rstudio.com/reference/shiny/latest/htmlOutput.html) 谈到了 inline 功能，但无法将其与我想要的功能联系起来。

标签： html css datatable shiny

【解决方案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")
  ))

你会发现更多关于浮动div here的信息

【讨论】：