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.
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 developing a shiny application. It is almost completed.
I need to hide one tab dynamically. But this tab also has one dynamic selectInput option.
I am able to only hide a tab when it does not have any dynamic input selection.
Here I am confused that if in UI part I am using for example:
htmlOutput("selectUI"))
for Dynamic tab then where should I mention
htmlOutput("selectUI1"))
for dynamic selectInput option.
Please assist. Let me know if you need more information.
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 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
Attached is the screenshot of the UI that I would like to have in my app. When I click on the listitems on the fragment on the left side I see a arrow pointing(question mark in red) on the list item which was clicked, I would like to know how can we achieve this in UI layout. Any special settings to be set?
I was looking at the same feature.
To implement similar, I'd suggest showing an image on the selected item in the list, this would require code rather than Layout XML, It would be controlled by the list fragment when an item is selected. That way you get the visual effect that the two fragments are related via the arrow image.
Did you end up giving it a go for yourself?