I've some Shiny app with download button:
column(width=1,downloadButton("downloadData", "download", class = "btn-success",style = "font-family:calibri;font-size: 45px !important;")),
I want also some button but just to upload file, I don't want to use "fileInput" because I want
to set style to my button and I don't want also the text box that comes with "fileInput",
I just want a button.
You can use the default fileInput and style-away the text input element used to show the filename.
# modified https://stackoverflow.com/a/54447823/3358272
library(shiny)
library(shinyjs)
ui <- fluidPage(
useShinyjs(),
titlePanel(""),
sidebarLayout(
sidebarPanel(
fileInput("file", "Select a file")
),
mainPanel()
)
)
server <- function(input, output){
runjs("$('#file').parent().parent().siblings().removeClass('form-control').attr('hidden','true');")
}
shinyApp(ui, server)
Notes:
You may want to finesse the rest of the styling of it, as two corners are rounded, two not.
Depending on the interface, you are likely to see the input box momentarily before it is deleted. This is due to running this in javascript once the layout has already been set.
I believe the encasing div is sized based on the input form element being present before it disappears.
There might be other interactions I haven't tested.
A better solution might be to implement this in raw CSS and read in from the start without running it in javascript. (I encourage somebody else to go that route.)
Related
I'm trying to display an information (i) image next to a selectInput control in Shiny, which the user can click on to display some more extensive help about the control.
I can use renderImage to display the image and modalDialog combined with a click event on the rendered image to display the information. HOWEVER what I am unable to achieve is to put the image next to the widget. By default it displays below the widget. Theoretically I could put the image in a new column but this leads to far too much space between the widget and the image.
Is there any way around this? Alternatively, can I display the image in the control's label while still allowing it to be clicked?
You could use the property display:inline-block the elements that should appear next to each other. Working example:
library(shiny)
ui <- fluidPage(
div(style='display: inline-block;',
selectInput('input','Input: ', choices=LETTERS[1:10])
),
img(src='https://www.zorro.com/wp-content/uploads/cc_resize/005-1200x542.jpg',height='100px',style='display: inline-block;'))
server <- function(input, output, session) {
}
shinyApp(ui, server)
Furthermore, you can use e.g. margin-left:100px in the image style to control the space between the elements.
Hope this helps!
I am trying to make input group in the html page produced by the shiny app. I would like to have input box and button side by side for planed select and confirm way of using, either by simulating or using bootstrap's input-group class. I am still failing to write right code to achieve this.
I do not want to use scaffolding for this.
Thanks for any advice.
In the snippet below the two inputs render row by row. I need it tightly in group side by side.
App snippet
copy and paste to your R console
library(shiny)
shinyApp(
ui=fluidPage(
div(class="input-group",
selectInput("sel",label=NA,choices=LETTERS,width=150),
actionButton("btn",label="go"))
),
server=shinyServer(function(input, output) {})
)
I have created an action button as follows in my ui
div(style="display:inline-block",actionButton("action", label = "Help"))
I want this button to create a help box which the user can close which contains text on how to use this app. How do i do this?
Also, how do I customise this button? such as font, colour, alignment...
Thanks
Clicking the action button increments a value, initially 0. You could use renderUI in your server.R file to define a widget that is empty when input$action is even, and helpText when it is odd. That way, the same action button would both open and close the help.
output$HelpBox = renderUI({
if (input$action %% 2){
helpText("Here is some help for you")
} else {
return()
}
})
In ui.R, use the uiOutput function to display the widget. Remember that it will display nothing until the action button is clicked.
uiOutput("HelpBox")
I want to create a welcome message for when a user first opens the shiny webpage. Currently I have it such that it is constantly on the first tabPanel. Is there a way to make it disappear when the user navigates away and then back to that panel?
fluidRow(
column(width=12,
tabsetPanel(type = "tabs", id = "tabs1",
tabPanel("Express Usage", wellPanel("Welcome! Please select the libraries you are interested in viewing from below and use the tabs to navigate between graphs. It is best to limit your selection to no more than 5 libraries at a time"), plotOutput("express_Plot", height=400)),
tabPanel("Juvenile Usage", plotOutput("juvenile_Plot", height=400)),
tabPanel("test", h3(textOutput("text_test")))))
),
I'm developing a Shiny app using the development version of the package, as documented here.
When I use navbarPage with tabsetPanel, everything works as expected:
library(shiny)
shinyUI(
navbarPage("Page Title",
tabPanel("Panel 1")
tabPanel("Panel 2"),
tabPanel("Panel 3"))
)
But when I add a navbarMenu to one of the tabs:
library(shiny)
shinyUI(
navbarPage("Page Title",
navbarMenu("Menu",
tabPanel("Panel 1.1"),
tabPanel("Panel 1.2")),
tabPanel("Panel 2"),
tabPanel("Panel 3"))
)
The text 'tab-pane active' appears on every tab of the app, even the ones not inside the navbarMenu. It seems like 'tab-pane active' is a CSS class that should be inside of a div tag, but somehow it's appearing as plain text in the page source code.
Does anyone have an idea about what's causing that, or how it can be fixed?
I wish I could find a good analogy or were a better writer to explain this in few words.
But I think of it in terms of containers and content. In your fist example you have a "navbar page". That is a container that can be filled with other "pages" such as tabPanels.
But tabPanels cannot be filled with tabPanels, only with content like graphs or tables that your R output is generating. If you want a page with multiple tabPanels you need a container that is able to contain them: a tabsetPanel (literally a set of tabpanels).
shinyUI(
navbarPage("Page Title",
tabPanel("Panel 1",
tabsetPanel(
tabPanel("Panel 1.1"),
tabPanel("Panel 1.2")
)),
tabPanel("Panel 2"),
tabPanel("Panel 3")
)
)
now you will see that you have an extra "page" set by the tabsetPanel (a set of tabs) with its own tabs.
You can try to follow that analogy through with other examples on the shiny app layout guide that you link to. So for instance, in your example you will never be able to make a submenu but just adding another tabPanel to a tabPanel (a tabPanel cannot be a container for a tabPanel as we saw above). You would first need to say that you want a navbarMenu, which in fact can contain multiple tabPanels.
It seems complex because navigation and pages are very closely related, and if a container contains containers, it becomes in practice a navigation item. There are good hints in the terms that the RStudio team chose for these lay-out items, but it is not always immediately obvious how it works.