Can anyone help to get this button vertically in-line (visually, not in a css sense) with the other input widgets?
require(shiny)
ui = fluidPage(
verticalLayout(
fluidRow(style = "background-color: orange;",
column(3, actionButton('button', 'A button')),
column(3, textInput('text', 'text', width = '100%')),
column(3, selectizeInput('selectize1', 'letters', letters, multiple=TRUE)),
column(3, selectizeInput('selectize2', 'LETTERS', LETTERS, multiple=TRUE))
)
)
)
server = function(input, output, session) { NULL }
shinyApp(ui = ui, server = server)
Thanks
Use the div() function to edit html elements
require(shiny)
ui = fluidPage(
verticalLayout(
fluidRow(style = "background-color: orange;",
column(3, div(align = "center",style="padding-top: 30px;width:100%", actionButton('button', 'A button'))),
column(3, textInput('text', 'text', width = '100%')),
column(3, selectizeInput('selectize1', 'letters', letters, multiple=TRUE)),
column(3, selectizeInput('selectize2', 'LETTERS', LETTERS, multiple=TRUE))
)
)
)
server = function(input, output, session) { NULL }
shinyApp(ui = ui, server = server)
This did it:
tags$head(tags$style(HTML("#button { margin-top: 25px; } ")))
Related
The toy app in the example below contains an R/Shiny actionGroupButtons element. I am looking for guidance please on how to start the actionGroupButtons with button ‘btn_edit’ disabled, which can then become enabled on a click of the button ‘btn_enable’.
Button ‘btn_duplicate’ should remain enabled at all times.
#DeanAttali mentions the use of the ‘disabled’ attribute here (Shiny: how to start application with action button disabled?), though I think that it is one of the inputs that it doesn’t work with.
Any ideas please? TIA
library(shiny)
library(shinyWidgets)
library(shinyjs)
ui <- fluidPage(
useShinyjs(),
fluidRow(
actionGroupButtons(
inputIds = c("btn_edit", "btn_duplicate"),
labels = list("Edit", "Duplicate")
)
),
br(),
fluidRow(
actionButton('btn_enable', 'enable edit')
),
br(),
fluidRow(
verbatimTextOutput('btns')
),
br(),
fluidRow(
verbatimTextOutput('btn_enable')
)
)
server <- function(input, output) {
observeEvent((input$btn_edit|input$btn_duplicate),{
output$btns <- renderPrint({paste(input$btn_edit, 'and', input$btn_duplicate)})
})
observeEvent(input$btn_enable,{
output$btn_enable <- renderPrint({input$btn_enable})
if(input$btn_enable > 0) {
shinyjs::enable("btn_edit")
} else {
shinyjs::disable("btn_edit")
}
}, ignoreInit = TRUE)
}
shinyApp(ui = ui, server = server)
You need to set ignoreNULL = FALSE in your observeEvent call, otherwise it will run only after btn_enable was pressed:
library(shiny)
library(shinyWidgets)
library(shinyjs)
ui <- fluidPage(
useShinyjs(),
fluidRow(
actionGroupButtons(
inputIds = c("btn_edit", "btn_duplicate"),
labels = list("Edit", "Duplicate")
)
),
br(),
fluidRow(
actionButton('btn_enable', 'enable edit')
),
br(),
fluidRow(
verbatimTextOutput('btns')
),
br(),
fluidRow(
verbatimTextOutput('btn_enable')
)
)
server <- function(input, output, session) {
observeEvent((input$btn_edit|input$btn_duplicate),{
output$btns <- renderPrint({paste(input$btn_edit, 'and', input$btn_duplicate)})
})
observeEvent(input$btn_enable, {
output$btn_enable <- renderPrint({input$btn_enable})
if(input$btn_enable > 0) {
shinyjs::enable("btn_edit")
} else {
shinyjs::disable("btn_edit")
}
}, ignoreInit = FALSE, ignoreNULL = FALSE)
}
shinyApp(ui = ui, server = server)
Another approach would be to disable the button outside of the observer:
library(shiny)
library(shinyWidgets)
library(shinyjs)
ui <- fluidPage(
useShinyjs(),
fluidRow(
actionGroupButtons(
inputIds = c("btn_edit", "btn_duplicate"),
labels = list("Edit", "Duplicate")
)
),
br(),
fluidRow(
actionButton('btn_enable', 'enable edit')
),
br(),
fluidRow(
verbatimTextOutput('btns')
),
br(),
fluidRow(
verbatimTextOutput('btn_enable')
)
)
server <- function(input, output, session) {
shinyjs::disable("btn_edit")
observeEvent((input$btn_edit|input$btn_duplicate),{
output$btns <- renderPrint({paste(input$btn_edit, 'and', input$btn_duplicate)})
})
observeEvent(input$btn_enable, {
output$btn_enable <- renderPrint({input$btn_enable})
shinyjs::enable("btn_edit")
})
}
shinyApp(ui = ui, server = server)
In the example below how I can have "Input two" match the appearance of "Input one" in terms of bolding the font and putting the label above the checkbox?
I imagine the answer is some kind of css wizardry but not sure how to approach it.
ui <- fluidPage(
fluidRow(
column(3,
sliderInput(inputId = "foo",label="Input one",min = 0,max = 100,value = 50,step = 10)
),
column(3,
checkboxInput(inputId = "bar",label="Input two")
)
)
)
)
server <- function(input, output, session) {}
shinyApp(ui, server)
One simple solution could be:
library(shiny)
ui <- fluidPage(
fluidRow(
column(3,
sliderInput(inputId = "foo",label="Input one",min = 0,max = 100,value = 50,step = 10)
),
column(3,
p(strong("Input two")),
checkboxInput(inputId = "bar",label=NULL)
)
)
)
server <- function(input, output, session) {}
shinyApp(ui, server)
Is there a way to collapse the sidebar by default. Right now, it is showing by default once the application is open. Can we make it collapsed by default
library(shiny)
library(shinyjs)
ui <- fluidPage(
useShinyjs(),
navbarPage("",
tabPanel("tab",
div( id ="Sidebar",sidebarPanel(
)),
mainPanel(actionButton("toggleSidebar", "Toggle sidebar")
)
)
)
)
server <-function(input, output, session) {
observeEvent(input$toggleSidebar, {
shinyjs::toggle(id = "Sidebar")
})
}
shinyApp(ui, server)
Here is a UI based solution which avoids flashing the sidebarPanel on startup:
library(shiny)
library(shinyjs)
ui <- fluidPage(useShinyjs(),
navbarPage("",
tabPanel(
"tab",
div(id = "sidebarWrapper", sidebarPanel(), style = "display: none;"),
mainPanel(actionButton("toggleSidebar", "Toggle sidebar"))
)))
server <- function(input, output, session) {
observeEvent(input$toggleSidebar, {
shinyjs::toggle(id = "sidebarWrapper")
})
}
shinyApp(ui, server)
PS: the same can be achived by using shinyjs::hidden(div(<...>)).
You can use the ignoreNULL argument at FALSE to trigger at initialization:
observeEvent(input$toggleSidebar, {
shinyjs::toggle(id = "Sidebar")
}, ignoreNULL = FALSE)
With the Github version of shinyGizmo (which should be on CRAN soon) you can toggle the sidebar with amazing effects:
# remotes::install_github("r-world-devs/shinyGizmo")
library(shiny)
library(shinyGizmo)
ui <- fluidPage(
navbarPage(
"",
tabPanel(
"tab",
conditionalJS(
div(
id = "Sidebar",
sidebarPanel(
sliderInput(
"obs", "Number of observations:",
min = 0, max = 1000, value = 500
)
)
),
condition = "input.toggleSidebar % 2 === 1",
jsCalls$animateVisibility("jello", "tada", duration = 1500)
),
mainPanel(
actionButton("toggleSidebar", "Toggle sidebar")
)
)
)
)
server <-function(input, output, session) {
}
shinyApp(ui, server)
I'm trying to align the actionButton right next to the textbox.
Is there a way to add an argument to the column function? Or is there a simple css workaround?
Code:
library(shiny)
ui <- fluidPage(
sidebarLayout(
sidebarPanel(),
mainPanel(
fluidRow(
column(11, textInput("code", label = " ", width = "100%")),
column(1, actionButton("run", "Run")))
)
)
)
server <- function(input, output) {
}
shinyApp(ui = ui, server = server)
Right now it looks like this:
But I want to achieve something like this:
Try margin-top as shown below.
library(shiny)
ui <- fluidPage(
sidebarLayout(
sidebarPanel(),
mainPanel(
fluidRow(
column(11, textInput("code", label = " ", width = "100%")),
column(1, div( style = "margin-top: 20px;", actionButton("run", "Run"))))
)
)
)
server <- function(input, output) {
}
shinyApp(ui = ui, server = server)
I am new in shiny, I wonder how to put the "=" close beside the selectInput box?
library(shiny)
ui = fluidPage(
mainPanel(
titlePanel("Calculation:"),#Voltage calculation
fluidRow(
column(3,
selectInput("selc11", h4("Cable"),#Resistivity
choices = list("Copper" = 0.0174, "Alum" = 0.0282), selected = 1)),
h4("=")
)
)
)
server = function(input, output) {
}
shinyApp(ui = ui, server = server)
If you want something like this:
You can achive it with:
library(shiny)
library(shinyjs)
ui = fluidPage(
useShinyjs(),
mainPanel(
titlePanel("Calculation:"),#Voltage calculation
fluidRow(
column(1, h4('Cable')),
column(3, selectInput(
"selc11",
label = '',
choices = list("Copper" = 0.0174, "Alum" = 0.0282), selected = 1)
),
column(3, h4("="))
)
)
)
server = function(input, output) {
runjs("$('label.control-label').remove()")
}
shinyApp(ui = ui, server = server)