css - 找到css用cicerone修改tabPanel的高亮

Question

我正在使用包 {cicerone} 在我 Shiny 的应用程序上创建一个导览。问题是当导航栏为 fixed-top 时，突出显示完全不透明。 .我在几个小时内搜索了如何修改 CSS，以便结果与导航栏为 static 时的结果相同。但没有成功。我问过包维护者，但到目前为止没有解决方案。
显示良好的导航栏:

library(shiny)
library(cicerone)

home_guide <- Cicerone$
  new(id = "homeGuide")$
  step(
    "[data-value='home']",
    "Hello",
    "Hello from tab 1",
    is_id = FALSE
  )$
  step(
    "[data-value='tab']",
    "Text",
    "This is an input",
    is_id = FALSE
  )

ui <- navbarPage(
  "cicerone",
  header = list(use_cicerone()),
  id = "nav",
  # position = "fixed-top",
  tabPanel(
    "home",
    h1("First tab", id = "home_primary"),
    textInput("home_secondary", "Text")
  ),
  tabPanel(
    "tab",
    h1("Second tab", id = "tab_primary"),
    textInput("tab_secondary", "Text")
  )
)

server <- function(input, output, session){
  
  home_guide$init()$start()
  
}

shinyApp(ui, server)

显示错误的导航栏(在 position = "fixed-top" 中添加 ui):

library(shiny)
library(cicerone)

home_guide <- Cicerone$
  new(id = "homeGuide")$
  step(
    "[data-value='home']",
    "Hello",
    "Hello from tab 1",
    is_id = FALSE
  )$
  step(
    "[data-value='tab']",
    "Text",
    "This is an input",
    is_id = FALSE
  )

ui <- navbarPage(
  "cicerone",
  header = list(use_cicerone()),
  id = "nav",
  position = "fixed-top",
  tabPanel(
    "home",
    h1("First tab", id = "home_primary"),
    textInput("home_secondary", "Text")
  ),
  tabPanel(
    "tab",
    h1("Second tab", id = "tab_primary"),
    textInput("tab_secondary", "Text")
  )
)

server <- function(input, output, session){
  
  home_guide$init()$start()
  
}

shinyApp(ui, server)

是否有 CSS 专家愿意向我展示如何在第二种情况下修改 CSS 以使结果与第一种相同？此人还可以发出拉取请求以在包中实现他/她的解决方案。
注意:目前(2020 年 10 月 12 日)，您可能需要安装 {cicerone} 的开发版( devtools::install_github("JohnCoene/cicerone") )。

Answer 1

该错误是由 position: fixed; 引起的看看导航栏是最上面的元素，即 body 的 child ，以及 position : absolute;解决这个问题的方法是修改 css

.navbar-fixed-top, .navbar-fixed-bottom{
    position : absolute;
}

然而，这会使 position : fixed; 的效果无效。 .因此，一种方法是通过监听用户点击 next|previous按钮，在固定位置和绝对位置之间切换，这可以使用 js 来完成。并且要从 Shiny 运行 js，我们需要 shinyjs包裹。

install.packages("shinyjs")
library(shiny)
library(shinyjs)
library(cicerone)

homeGuide <- Cicerone$
  new(id = "homeGuide")$
  step(
    "[data-value='home']",
    "Hello",
    "Hello from tab 1",
    is_id = FALSE
  )$
  step(
    "[data-value='tab']",
    "Tab :(",
    "This is a tab",
    is_id = FALSE
  )$
  step(
    "[data-value='last']",
    "Last",
    "This is the last tab the one we check for",
    is_id = FALSE
  )$
  step(
    "home_secondary",
    "Text",
    "This is an input"
  )

用户界面

调用 useShinyjs将shinyjs javascript 库导入网页。

下一行将样式默认设置为绝对位置。

ui <- tagList(
  useShinyjs(),
  tags$head(tags$style(HTML("
      .navbar-fixed-top, .navbar-fixed-bottom{
        position : absolute;
      }
  "))),
  navbarPage(
  "cicerone",
  header = list(use_cicerone()),
  id = "nav",
   position = "fixed-top",
  tabPanel(
    "home",
    h1("First tab", id = "home_primary"),
    textInput("home_secondary", "Text")
  ),
  tabPanel(
    "tab",
    h1("Second tab", id = "tab_primary"),
    textInput("tab_secondary", "Text")
  ),
  tabPanel(
    "last",
    h1("last tab", id = "tab_last"),
    textInput("inp_text", "Text")
  )
))

服务器 :

server <- function(input, output, session){
  homeGuide$init()$start()
  # if the user clicks the next button
  observeEvent(input$homeGuide_cicerone_next, {
    # check if the last highlighted element is the last tab
    if(grepl("last",input$homeGuide_cicerone_next$highlighted) ) runjs("document.querySelector('.navbar').style.position = 'fixed'; document.querySelector('.navbar').style.position") 
# because of some weird glitch you need to call the value of document.querySelector('.navbar').style.position in order for it to be changed took me a day to figure this out
   })
  # now for the previous button
  observeEvent(input$homeGuide_cicerone_previous, {
    # check if the before previous element is the last tab
    # i don't know if this is the way it should behave but apparently shiny is called before the click is sent to js and before previous actually contains the value of the previous element
      if(grepl("last",input$homeGuide_cicerone_previous$before_previous) ) runjs("document.querySelector('.navbar').style.position = 'absolute'; document.querySelector('.navbar').style.position")
   })
}

shinyApp(ui, server)

注意:更改 z-index以上 100002将把元素推到灰色覆盖之上。