Search code examples
htmlcssrshinydatatable

Display of text in a new line below the uioutput display


uiOutput('myTable') followed by p("Here is some text....") puts the text next to uioutput display, but I like to print the text in a new line starting from left side of the page. Adding br() is simply adding empty space equivalent to screen width, therefore, text starts from a new line but not from from the left side of the page. Interestingly, adding any control widget, e.g., dateInput displays the widget in a new line. In my case, uioutput input comes from map [ package purrr]. I combined map output and HTML("<br>") via list, but no solution. Here is reproducible code:

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 screen shot. As it is seen, Here is some text is next to uioutput display, which I want to be in a new line below the display enter image description here


Solution

  • After using div with style float:left, you need to clear the floating, for example with 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

    You will find more info about floating div here