How to have the pagination display correctly?

Question

Currently, the pagination for the data table is displaying on two rows. As you can see here:

I would like it to be on one line instead as it looks a bit messy. I've not been able to figure out how to do this.

Here is my code:

library(shiny)
library(ggplot2)
library(DT)

# Define UI
ui <- library(shiny)
library(ggplot2)
library(DT)

# Define UI
ui <- fluidPage(
  tags$head(
    tags$style(HTML("
      .container-fluid {
        width: 100% !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
      }
      .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
      .dataTables_wrapper .dataTables_paginate .paginate_button.next {
        margin-top: 0px !important;
      }
      .dataTables_wrapper .dataTables_paginate .paginate_button {
        margin-left: 5px !important;
      }
    "))
  ),
  sidebarLayout(
    sidebarPanel(
      selectInput("variable", "Select Variable:", choices = c("setosa", "versicolor", "virginica"), selected = "A"),
      sliderInput("range", "Select Range:", min = 4.3, max = 7.9, value = c(4.3, 7.9))
    ),
    mainPanel(
      fluidRow(
        column(width = 8, plotOutput("barplot", height = "300px")),
        column(width = 4, DTOutput("table"))
      )
    )
  )
)

# Define server
server <- function(input, output) {
  
  # Generate input data based on user selections
  input_data <- reactive({
    iris[iris$Species == input$variable & iris$Sepal.Length >= input$range[1] & iris$Sepal.Length <= input$range[2], ]
  })
  
  # Render bar plot
  output$barplot <- renderPlot({
    ggplot(input_data(), aes(x = Species, fill = Species)) +
      geom_bar() +
      labs(title = "Bar Plot")
  })
  
  # Render table
  output$table <- renderDT({
    datatable(input_data(), options = list(pageLength = 5))
  })
}

# Run the app
shinyApp(ui, server)

Anybody know how this can be done? I've tried to change the CSS but I think I'm doing it wrong.

Answer 1

This would look similar to the usual design. The key is white-space: nowrap; for .dataTables_paginate.

.container-fluid {
  padding-left: 0px !important;
}
.dataTables_paginate {
  white-space: nowrap;
}
.dataTables_wrapper .dataTables_paginate {
  float: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  margin-left: 0px !important;
}