R Shiny - Сделайте так, чтобы всплывающая панель wellPanel следовала при прокрутке CSS - PullRequest
Новая
       0

R Shiny - Сделайте так, чтобы всплывающая панель wellPanel следовала при прокрутке CSS

6 голосов
/ 07 февраля 2020

ПРОБЛЕМА: R Shiny - Сделайте всплывающее окно wellPanel, следуя при прокрутке с помощью CSS

Пользователи Hi Stack,

Я создал приложение Shiny он имеет таблицу данных, в которой, когда пользователь нажимает на строку, рядом с ней появляется скрытая панель скважины, чтобы показать больше деталей, связанных с этой строкой.

Длина всплывающей панели скважины длинная, но длина таблицы больше (количество строк не подлежит обсуждению). Я бы хотел, чтобы wellPanel следовал по мере прокрутки, пока верхняя часть wellPanel не дойдет до верхней видимой части страницы. В этот момент wellPanel придерживается до тех пор, пока не будет достигнут конец страницы (см. Изображения предпочтительного состояния ниже).

Использование CSS position: fixed не помогло, потому что над таблицей и панелью есть инструкции для предполагаемых пользователей. В результате использование position: fixed просто навсегда прикрепляет wellPanel к одной части веб-страницы, и некоторая информация обрезается (см. Пример приложения ниже).

Теперь я не веб-разработчик / дизайнер Исходя из этого, мои знания о CSS очень и очень минимальны, но я надеялся, что решение CSS в этом предыдущем посте ( Как сделать так, чтобы div следовал при прокрутке? / конкретно: https://www.w3schools.com/css/css_positioning.asp) с использованием position: sticky будет работать, но все равно не будет.

Надеемся услышать мнение экспертов в сообществе. Спасибо!

Миклос

Упрощенный образец моего приложения вместе с изображениями, показывающими предпочтительное состояние ниже:

setup.R 

#### LOAD PACKAGES ######################
require(shiny)
require(shinyjs)
require(data.table)
require(dplyr)
require(DT)

#### PREPARE DATA ######################
id <- c('10001','10002','10003','10004','10005',
        '10006','10007','10008','10009','10010',
        '10011','10012','10013','10014','10015',
        '10016','10017','10018','10019','10020',
        '10021','10022','10023','10024','10025',
        '10026','10027','10028','10029','10030',
        '10031','10032','10033','10034','10035',
        '10036','10037','10038','10039','10040'
        )

info <- c('Info','Info','Info','Info','Info',
          'Info','Info','Info','Info','Info',
          'Info','Info','Info','Info','Info',
          'Info','Info','Info','Info','Info',
          'Info','Info','Info','Info','Info',
          'Info','Info','Info','Info','Info',
          'Info','Info','Info','Info','Info',
          'Info','Info','Info','Info','Info'
          )

info2 <- sample(1:100,40,replace=T)
info3 <- sample(1:100,40,replace=T)
info4 <- sample(1:100,40,replace=T)
info5 <- sample(1:100,40,replace=T)
info6 <- sample(1:100,40,replace=T)
info7 <- sample(1:100,40,replace=T)
info8 <- sample(1:100,40,replace=T)
info9 <- sample(1:100,40,replace=T)
info10 <- sample(1:100,40,replace=T)
info11 <- sample(1:100,40,replace=T)
info12 <- sample(1:100,40,replace=T)
info13 <- sample(1:100,40,replace=T)
info14 <- sample(1:100,40,replace=T)
info15 <- sample(1:100,40,replace=T)
info16 <- sample(1:100,40,replace=T)

dt <- data.table(id=id,info=info,info2=info2,
                 info3=info3,info4=info4,info5=info5,
                 info6=info6,info7=info7,info8=info8,
                 info9=info9,info10=info10,info11=info11,
                 info12=info12,info13=info13,info14=info14,
                 info15=info15,info16=info16
                 )

#### INSTANTIATE FUNCTIONS ######################
get_instructions <- function() {
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
  "
}

render_my_table <- function(dt, sel) {
  if(missing(sel)) {
    sel = list(mode='single')
  }  else {
    sel = list(mode='single', selected = sel)
  }
  return (DT::datatable(dt[, list("ID" = id, "Info"=info)], 
                        selection = sel, filter="top", 
                        options = list(sDom  = '<"top">lrt<"bottom">ip', 
                                       lengthChange = FALSE, 
                                       pageLength = 40)))
}

generate_popup_details <- function(user) {
  c(
    paste("Info 2: ", user$info2),
    paste("Info 3: ", user$info3),
    paste("Info 4: ", user$info4),
    paste("Info 5: ", user$info5),
    paste("Info 6: ", user$info6),
    paste("Info 7: ", user$info7),
    paste("Info 8: ", user$info8),
    paste("Info 9: ", user$info9),
    paste("Info 10: ", user$info10),
    paste("Info 11: ", user$info11),
    paste("Info 12: ", user$info12),
    paste("Info 13: ", user$info13),
    paste("Info 14: ", user$info14),
    paste("Info 15: ", user$info15),
    paste("Info 16: ", user$info16)
    )
}

ui.R 

source("setup.R")

shinyUI(fluidPage(
  useShinyjs(),
  titlePanel("My Shiny Application"),
  hr(),
  h3("Some Instructions to Users:"),
  h5(get_instructions()),
  hr(),
  mainPanel("",         
            fluidRow(
              splitLayout(div(DT::dataTableOutput('my_table')), 
                          div(
                            shinyjs::hidden(
                              wellPanel(id="my_panel", style = "position:fixed;",
                                        h3("More Information",align="center"),
                                        htmlOutput("my_popup")
                              )
                            )
                          )
              )
            )
  ) 
))

server.R 

source("setup.R")

function(input, output, session) {

  output$my_table = DT::renderDataTable({
    render_my_table(dt)
  }, server=TRUE)

  observeEvent(input$my_table_cell_clicked, {
    row = as.numeric(input$my_table_rows_selected)
    user = dt[row]
    if(nrow(user) == 0) {
      return ()
    }
    output$my_popup <- renderUI({ 
      HTML(paste(generate_popup_details(user) ,collapse="<br/>"))
    })

    shinyjs::showElement(id= "my_panel")
  })

}

ПРЕДПОЧТИТЕЛЬНОЕ СОСТОЯНИЕ:

Приложение при загрузке App upon load

Пользователь достигает нижней части страницы, и wellPanel остается в верхней части видимая страница User reaches bottom of the page and wellPanel stays at the top part of the visible page

1 Ответ

2 голосов
/ 07 февраля 2020

Используйте этот JavaScript код: 

js <- "
$(document).ready(function(){
  var tbl = document.getElementById('my_table');
  $('#my_panel').css('top', tbl.getBoundingClientRect().top);
  $(window).scroll(function() { 
    var tbltop = tbl.getBoundingClientRect().top;
    var x = tbltop < 0 ? 0 : tbltop;
    $('#my_panel').css('top', x);
  });
});"

Для включения в приложение, как это: 

ui <- fluidPage(
  tags$head(tags$script(HTML(js))),
  useShinyjs(),
  ......

(не меняйте ничего больше).

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...