html - 在 uioutput 显示下方的新行中显示文本[ Shiny ]

标签 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

最佳答案

使用 div 样式 float:left 后,需要清除 float ,例如使用 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

您将找到有关 float div 的更多信息 here

关于html - 在 uioutput 显示下方的新行中显示文本[ Shiny ],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41470353/

相关文章:

html - 如何在不使用javascript的情况下设置默认图像宽度的1/2

html - 在其父表格单元格上拉伸(stretch)链接

html - 为什么 &lt;textarea&gt; 和 &lt;input&gt; 元素不遵守最大宽度?

html - 垂直对齐不适用于 div

java.util.Map 与 HtmlDataTable

javascript - 使用附加 div 时 MVC 5 View 看不到 html 图像

javascript - 我如何确定 -webkit-transitions 指的是 :focus and some to :hover?

css - 标题中的导航元素不起作用

Angularjs 延迟数据表刷新直到 $http 调用返回

jquery - 在 dataTable 上滚动数据应从服务器端加载并附加到现有记录