【发布时间】：2019-03-22 15:52:34
【问题描述】：
我在闪亮的应用程序中使用流畅的行和列布局。当我减小屏幕尺寸时，两列中的元素重叠。如果它们是两个不同的列并且使用流体行，则内容不应重叠。下面是代码。我有两列，宽度分别为 4 和 8。它们似乎在常规屏幕尺寸下工作正常，但一旦我最小化它们重叠的窗口。
library(shiny)
library(shinyjs)
ui <- navbarPage(
"Bootstrap scrollspy on multiple tabs",
id = "navbar",
header = div(
useShinyjs(),
extendShinyjs("www/app-shinyjs.js", functions = c("updateScrollspy")),
includeCSS("www/app.css"),
includeScript("https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/1.4.3/jquery.scrollTo.min.js")
),
# tab 1 contains 4 sections and a scrollspy on the left with text
tabPanel(
"tab1",
div(id = "tab1-content",
fluidRow(
column(
4,
div(
id = "tab1-scrollspy",
class = "potential-scrollspy",
tags$ul(
class = "nav nav-pills nav-stacked",
tags$li(tags$a(href = "#section1-1", "Section 1-1")),
tags$li(tags$a(href = "#section1-2", "Section 1-2")),
tags$li(tags$a(href = "#section1-3", "Section 1-3")),
tags$li(tags$a(href = "#section1-4", "Section 1-4"))
)
)
),
column(
8,
div(id = "section1-1",
class = "scrollspy-section",
p('Section 1-1')
),
div(id = "section1-2",
class = "scrollspy-section",
p('Section 1-2')
),
div(id = "section1-3",
class = "scrollspy-section",
p('Section 1-3')
),
div(id = "section1-4",
class = "scrollspy-section",
p('Section 1-4')
)
)
)
)
),
# tab 2 contains 3 sections and a scrollspy on the right without text
tabPanel(
"tab2",
div(id = "tab2-content",
fluidRow(
column(
8,
div(id = "section2-1",
class = "scrollspy-section",
p('Section 2-1')
),
div(id = "section2-2",
class = "scrollspy-section",
p('Section 2-2')
),
div(id = "section2-3",
class = "scrollspy-section",
p('Section 2-3')
)
),
column(
4,
div(
id = "tab2-scrollspy",
class = "potential-scrollspy",
`data-offset` = 50,
tags$ul(
class = "nav nav-pills nav-stacked",
tags$li(tags$a(href = "#section2-1")),
tags$li(tags$a(href = "#section2-2")),
tags$li(tags$a(href = "#section2-3"))
)
)
)
)
)
)
)
server <- function(input, output, session) {
# when changing tabs, update the scrollspy control
observeEvent(input$navbar, {
js$updateScrollspy(input$navbar)
})
}
shinyApp(ui = ui, server = server)
// initialize common scrollspy control
shinyjs.init = function() {
$('body').scrollspy({ target: '.active-scrollspy' });
}
// update the active scrollspy control and refresh so that it will function
shinyjs.updateScrollspy = function(tab) {
// make all scrollspy controls inactive
$('active-scrollspy').removeClass('active-scrollspy');
// get the content in the current tab
var $tabContent = $('#' + tab + '-content');
if ($tabContent.length) {
// find the scrollspy control in the current tab
var $scrollspy = $tabContent.find('.potential-scrollspy');
if ($scrollspy.length) {
// mark the scrollspy in the current tab as active
$scrollspy.addClass('active-scrollspy');
// figure out the offset for this scrollspy
var offset = 0;
if ($scrollspy.data('offset')) {
offset = $scrollspy.data('offset');
}
// update the scrollspy object
$('body').data('bs.scrollspy').options.offset = offset;
$('body').scrollspy('refresh');
// unbind click events and re-bind clicks to animate scrolling
$scrollspy.unbind('click.scrollto');
$scrollspy.bind('click.scrollto', 'ul li a', function(event) {
event.preventDefault();
$.scrollTo(event.target.hash, 500, {
offset: -offset
});
});
}
}
}#tab1-content .scrollspy-section {
height: 500px;
border: 1px solid #DDD;
}
#tab1-scrollspy {
position: fixed;
}
#tab1-scrollspy li > a {
background-color: #FFF;
}
#tab1-scrollspy li > a:hover {
background-color: #EEE;
}
#tab1-scrollspy li.active > a {
background-color: #AAA;
}
#tab2-content .scrollspy-section {
height: 900px;
border: 1px solid #DDD;
}
#tab2-scrollspy {
position: fixed;
top: 300px;
}
#tab2-scrollspy li > a {
padding: 0;
width: 15px;
height: 15px;
background-color: #DDD;
margin-bottom: 5px;
}
#tab2-scrollspy li > a:hover {
background-color: #AAA;
}
#tab2-scrollspy li.active > a {
background-color: #444;
}【问题讨论】：
-
您应该发布
app-shinyjs.js和app.css文件以重现您的代码。 -
@alessio 我刚刚添加了支持文件。