如何更好地定位 Next/Back button in shiny glide，以消除大白 space？

Question

Shinyglide 包正是我所需要的，它为分组单选按钮使用旋转木马，为用户提供多种数据解析选择。

但是，“下一步”（和“返回”）按钮占据了一大片白色 space。我想将按钮移动到与滑行行一致的位置（见底部图片）。有谁知道如何做到这一点？有 CSS 技巧吗？阅读 Glide 手册，唯一的选择是“顶部”和“底部”。

如果无法移动 Next/Back 按钮，第二个选项是插入（有点多余的）文本行但与 Next/Back 按钮保持一致，以至少掩盖烦人的大白space.

实际的面板显示的信息比这个例子多得多，所以我尽量让页面干净。

请查看底部的图片，它更好地解释了我正在尝试做的事情。

可重现的例子：

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)

Answer 1

您可以将自定义控件元素与 custom_controls 一起使用，然后将其悬停在右上角的显示屏幕上，并将容器设置为绝对定位。为容器设置一个有限的宽度将确保后退按钮不会飞得太远。

大致如下：

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

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

只需确保同时设置 controls_position = "bottom" 以便控件悬停在上方屏幕内容上方，而不是下方。

一个最小的示例应用程序：

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)

如何更好地定位 Next/Back button in shiny glide，以消除大白 space？

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

css

r

widget

shiny