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!
Related
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.)
My shiny app has a box that looks like this:
But the inside UI code is just:
I want to render a table inside of the box instead that looks like this:
Where the random icon is generated from a function RandomIcon(). I've tried all morning to render a table inside and can't figure out how to make the table inside the box.
I didn't have trouble when I was using the server code for renderInfoBox but now I'm using box:
How can I render the table inside the box?
Will the table be dynamic in size, or will it always have the same number of rows/columns? If the former, you'd need to use renderUI to render your table server-side, then call it with uiOutput on the ui side. If the latter, then you could use HTML() and the <table>, <th>, <tr>, and <td> HTML tags to manually create your table. Then, each icon and each data source value (if dynamic), would need to be created server side, and called in the ui individually. renderUI and uiOutput seem to be your best bet.
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 would like to show an image tooltip dynamically via server side code.
For example, when user make a selection in a combo box, i would like to load dynamically a text into an image ToolTip, then automatically show (without the user must move curors on image).
Is it possible ?
Thanks