How to better position Next/Back button in shiny glide, in order to eliminate large white space?

Question

The Shinyglide package is just what I need, using a carousel for grouped radio buttons giving the user many choices for data parsing.

However, the "Next" (and "Back") button occupies a large white space. I'd like to shift the button in line with the glide row (see image at bottom). Does anyone know how to do this? Is there a CSS trick? Reading through the Glide manual, the only choices are "top" and "bottom".

If moving the Next/Back button isn't possible, a secondary option is to insert (a somewhat superfluous) line of text but in line with the Next/Back buttons, to at least cover up the annoyingly large white space.

The actual panel this is for has much more information presented than in this example, so I'm trying to make the page as clean as possible.

Please see image at bottom that better explains what I'm trying to do.

Reproducible example:

library(dplyr)
library(DT)
library(shiny)
library(shinyglide)

ui <- 
  fluidPage(
    fluidRow(div(style = "margin-top:15px"),
      strong("Input choices shown in row below, click ´Next´ to see more choices:"),
        column(12, glide(
           height = "25",
           controls_position = "top",
           screen(
             div(style = "margin-top:10px"),
             wellPanel(    
               radioButtons(inputId = 'group1',
                 label = NULL,
                 choiceNames = c('By period','By MOA'), 
                 choiceValues = c('Period','MOA'),
                 selected = 'Period',
                 inline = TRUE
                 ),
               style = "padding-top: 12px; padding-bottom: 0px;"
               )
          ),
          screen(
            div(style = "margin-top:10px"),
            wellPanel(    
              radioButtons(inputId = 'group2',
                label = NULL,
                choiceNames = c('Exclude CT','Include CT'), 
                choiceValues = c('Exclude','Include'),
                selected = 'Exclude',
                inline = TRUE
                ),
             style = "padding-top: 12px; padding-bottom: 0px;"
             )
          )
         )
        )
      ),
    DTOutput("plants")
  ) 

server <- function(input, output, session) {
  output$plants <- renderDT({iris %>% datatable(rownames = FALSE)})
}

shinyApp(ui, server)

user_4550695 · Answer

You could use a custom control element with custom_controls, and then have it hover over the displayed screen on the top right with a container set to absolute positioning. Setting a limited width for the container will ensure that the back button won't fly too far out.

Something along these lines:

glide(custom_controls = div(class = "glide-controls", glideControls()), ...)

# Somewhere in the UI
tags$style(
  ".glide-controls { position: absolute; top: 18px; right: 15px; width: 160px; }"
)

Just make sure to also set controls_position = "bottom" so that the controls hover over the screen content, rather than under it.

A minimal example app:

library(shiny)
library(shinyglide)

ui <- fixedPage(
  h3("Simple shinyglide app"),
  tags$style(
    ".glide-controls { position: absolute; top: 18px; right: 15px; width: 160px; }"
  ),
  glide(
    custom_controls = div(class = "glide-controls", glideControls()),
    screen(wellPanel(p("First screen."))),
    screen(wellPanel(p("Second screen.")))
  )
)

server <- function(input, output, session) {}

shinyApp(ui, server)

How to better position Next/Back button in shiny glide, in order to eliminate large white space?

1 Answers