Shiny fileInput widget in sidebar scrolls to the top of the page - shiny

My shinyApp has lots of input options in the sidebar that go well below the screen height and the user access them after scrolling. One of the last options at the bottom of the scrolling is a fileInput widget. When one clicks on it, the page automatically jumps to the top of the sidebar right before the file browser opens.
Is there a way to avoid that automatic scrolling/jump?
I'm using Shiny v 1.7.1. I'm not 100% sure, but I think this was not the behavior of fileInput in past versions of Shiny (?).
This is an example of what happens in my case, but limited to 500 px for simplicity. Just imagine a much longer list of input options with different widgets.
ui <- fluidPage(
sidebarLayout(
sidebarPanel(
width = 4,
style = "height: 500px; overflow-y: scroll;",
fileInput("file1", "Choose file 1"),
fileInput("file2", "Choose file 2"),
fileInput("file3", "Choose file 3"),
fileInput("file4", "Choose file 4"),
fileInput("file5", "Choose file 5"),
fileInput("file6", "Choose file 6"),
fileInput("file7", "Choose file 7"),
),
mainPanel(
# something very interesting is shown here
)
)
)
server <- function(input, output) {
# something very interesting is done here
}
shinyApp(ui, server)

Related

make a tabPanel x scrollable in Shiny

I am using rpivotTable inside a tabsetPanel in Shiny.
tabPanel("Pivot Table",
tags$head(tags$style("
div[data-tabsetid='7008'] {
width:500px !important,
height:500px !important,
overflow-x: scroll !important;
}"
)
),
shinycssloaders::withSpinner(
rpivotTableOutput("pivot_table")
)
)
I can't work out how to make the content x-scollable, the data-tabsetid changes every execution, and I dont know in advance how wide the pivot table will be so need to make the content x scrollable.

Changing the text color for matrixInput in sidebar of shinydashboard

I am working with Shinydashboard and I would like to use a matrixInput widget in the sidebar. When I try input a value, the background in the input cell highlights in white and the input text is also white. As a result I am not able to view the text.
I would like to use CSS to change the font colour to black, but I am not getting it right. I included a simple example below of my problem.
Kind regards
Daniel
library(shiny)
library(shinydashboard)
library(shinyMatrix)
mat <- matrix(rep("text", 9), 3, 3)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(
tags$style(".skin-blue .sidebar .matrix-input-cell {color: #444; }"), #my attempted css to change the color of the text
matrixInput(
"mInput",
value = mat,
class = "character"
)
),
dashboardBody()
)
server <- function(input, output) {
}
shinyApp(ui = ui, server = server)
You need to modify the CSS when the matrix cell is active.
By the way, I found this using the browser inspector mode of CSS and HTML, and activating the ":active" option in CSS (you also have ":hover", ":focus" ...)
tags$style(".vue-input td.active, .vue-input th.active {color: #444;}")
Edit : note that if you have another table in your app, it may affect it because I modified the CSS class and not a div. You will need to parent the CSS modifications with your input id if you want to make sure only this matrix input have black text when a cell is active

Shiny - how to center and fix width of dashboard

Hello R Studio Community,
I've been developing an app in Shiny and it's be great. I have one simple question.
As different browsers have different widths, is there a way to set the rule on resizing the Shiny dashboard based on the following:
1) If browser width is more than x, limit to width to x and center the entire dashboard
2) If browser width is less than x, follow default autosizing
3) Not essential. But how do I set the blank space color to the left and right of the dashboard
The motivation is that I need a fixed width so that some pictures are scaled correctly. I hope my request can be done through some div tag on the dashboardPage.
This is the current behavior which I do NOT want.
Shiny dashboard stretches to fit window
Cheers,
Donny
Hi to achive what you are asking for just add the following code to the beginning of your dashboardBody. something like this
dashboardBody(
tags$head(
tags$style(
"body{
min-height: 611px;
height: auto;
max-width: 800px;
margin: auto;
}"
)
),
... #the rest of you ui code
hope this helps

Shinyjs: On click option in shiny dashboard

I have a shiny dashboard app with 3 tabs and a notification menu. I am trying to track user activity on the dashboard and wish to log each of their clicks on the dashboard.
The code in server.R for the tabset panel is as below:
output$tabs1=renderUI(
tabsetPanel(type="tab",
tabPanel(id="OverallTab","Overall Activity"),
tabPanel(id="Tab1","Tab 1 details"),
tabPanel(id="Tab2","Tab 2 details"))
Part of my notification code is as below:
output$notiMenu <- renderMenu({
all_nots <- apply(u_notd, 1, function(row) {
notificationItem(text = row[["notification"]], icon("users"))
})
dropdownMenu(type = "notifications", .list = all_nots)
})
I am trying to use shinyjs to write to a dataframe if a user clicks on either of the tabs or notification menu as below:
tab1_clicled=""
tab2_clicked=""
noti_clicked=""
shinyjs::onclick("notiMenu",print("Notification clicked"),noti_clicked="YES")
shinyjs::onclick("Tab1",print("Tab1 clicked"),tab1_clicled="YES")
shinyjs::onclick("Tab2", print("Tab2 clicked"),tab2_clicled="YES")
df=as.data.frame(tab1_clicked,tab2_clicked,noti_clicked)
I face 2 issues here,
1) the on click option doesn't appear to work for the tab panels, using the shinyjs reference(here), I see that there is only a mention of using on click for the tabset panel and not for each tab panel?
2) I'm unable to modify the value of tab1_clicked inside the onclick function. It throws an error saying: Unhandled error in observer: unused argument (tab1_clicled = "YES")
Appreciate any help.
I just quickly skimmed your code and I can see two errors. The first parameter of onclick is the ID of the element. In your case, you want the ID of the actual tab button, but unfortunately the way tabs work in shiny, "Tab1" is actually the ID of the container of the tab panel but it's not the id of the tab button itself. Look at the HTML of a shiny app and you'll see that. Tabs are a bit weird and annoying and it's really difficult to deal with the tab buttons themselves in shiny.
Secondly, The second argument of onclick is the expression, but you're trying to run two expressions print("Tab1 clicked") and tab1_clicled="YES". You need to wrap these in {} so that it's considered one expression, like this:
onclick(id, {print("Tab1 clicked"); tab1_clicled="YES"}
But unfortunately getting the id of the tab button is difficult so I don't think onclick will be useful for that

reactive Slider in Shiny and rendering a html file does not work together

I would like to use tabPanels and have a problem with the combination of a reactive Slider and including a html file in ui.R. It seems that this problem is not due to tabPanel and also shows up when I put it all with includeX in the mainPanel.
If I do this like shown here I get Panel text with formulas rendered right, but the slider is messed up.
If the text is included as rmd ( or as md ) the slider is shown right, but the formulas are not rendered right.
I have posted a similar, but slightly different question here at stackoverflow, these question may have the same reason, but I am not sure.
server.R
library(shiny)
shinyServer(function(input, output, session) {
output$first <- renderUI({
sliderInput('xScale', '',
min=7.0,max=9.0, value=c(7.5, 8.5), step=0.01)
})
session$onSessionEnded(function() {
stopApp()
})
})
ui.R
shinyUI(fluidPage(
titlePanel("Test"),
sidebarLayout(
sidebarPanel(
uiOutput('first')
),
mainPanel(
tabsetPanel(
tabPanel('Text', includeHTML("post.html"))
#tabPanel('Text', includeMarkdown('post.rmd'))
)
)
)
)
)
Any help is appreciated. Thanks.