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) {})
)
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.)
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.
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 was wondering if its possible for Shiny checks boxes to observe each other in the UI such that if I were to check one, the other must be unchecked, vice versa.
I came across the function updateCheckBox but the example shown is used for the server side, is it possible for checkboxes to communicate between each other on the UI side?
Thanks,
This is usually what radio buttons are used for, see ?radioButtons. Is there a reason those wouldn't work here?