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)
Related
Is there way to adjust the width of a well panel as shown in the image below? At the bottom is the code, if the user clicks the "Delete column" action button a conditional panel renders underneath; clicking of any other action button causes the conditional panel to disappear. I'd like the conditional panel to be surrounded in a well panel and am trying to format it nicely.
My guess is this requires some CSS.
Code:
library(shiny)
library(shinyjs)
ui <- fluidPage(
useShinyjs(),
br(),
fluidRow(
column(2,actionButton("addCol","Add column")),
column(2,actionButton("delCol","Delete column")),
column(2,actionButton("savTbl","Save table")),
column(2,actionButton("clrTbl","Clear table")),
br(),
),
br(),
shinyjs::hidden(
div(id="delPanel",
conditionalPanel(
condition="input.delCol > 0 && !output.hide_panel",
fluidRow(
wellPanel(
column(2,textOutput("delFlag")),
column(3,uiOutput("delCol2"))
)
),
style = "display: none;"
)
)
)
)
server <- function(input,output,session)({
observeEvent(input$delCol,{shinyjs::show("delPanel")})
observeEvent(input$addCol|input$savTbl|input$clrTbl,{shinyjs::hide("delPanel")})
output$delFlag <- renderText("Delete column:")
output$delCol2 <-
renderUI(
selectInput("delCol3",
label = NULL,
choices = c(1,2,3),
selected = "")
)
})
shinyApp(ui, server)
Below is a css solution, thanks to post Shiny wellpanel width:
library(shiny)
library(shinyjs)
ui <- fluidPage(
useShinyjs(),
br(),
fluidRow(
column(2,actionButton("addCol","Add column")),
column(2,actionButton("delCol","Delete column")),
column(2,actionButton("savTbl","Save table")),
column(2,actionButton("clrTbl","Clear table")),
br(),
),
br(),
shinyjs::hidden(
div(id="delPanel",
conditionalPanel(
condition="input.delCol > 0 && !output.hide_panel",
fluidRow(tags$div(id="pane", # added
wellPanel(
column(2,textOutput("delFlag")),
column(3,uiOutput("delCol2")),
),
tags$style(type="text/css","#pane{font-size:14px;width:565px;}") # added
)
),
style = "display: none;"
)
)
)
)
server <- function(input,output,session)({
observeEvent(input$delCol,{shinyjs::show("delPanel")})
observeEvent(input$addCol|input$savTbl|input$clrTbl,{shinyjs::hide("delPanel")})
output$delFlag <- renderText("Delete column:")
output$delCol2 <-
renderUI(
selectInput("delCol3",
label = NULL,
choices = c(1,2,3),
selected = "")
)
})
shinyApp(ui, server)
I'm quite new to Shiny and I'm having a hard time to fix the following apparently simple example.
I have the following code:
library(shiny)
u <- fluidPage(
titlePanel("Simple Selectable Reactive Function"),
sidebarLayout(
sidebarPanel(),
mainPanel(
h2("Results"),
fluidRow(column(2,
selectInput("aa", "Choose a function", choices=c("sin","cos","exp"))
),
column(2,
textOutput(outputId = "outputText1")
)
)
))
)
s <- function(input,output){
output$outputText1 <- renderText({
paste("Sample text")
})
}
shinyApp(ui=u,server=s)
All I'm trying to do is to have "Sample text" aligned at the same height on the screen as the drop down box ("sin").
Right now, the words "Sample text" are aligned with the element label "Choose a function".
I checked ?textOutput but it doesn't seem to be very useful.
Thank you
One way is to wrap your textOutput(outputId = "outputText1") with a tags$div and add a top padding.
library(shiny)
u <- fluidPage(
titlePanel("Simple Selectable Reactive Function"),
sidebarLayout(
sidebarPanel(),
mainPanel(
h2("Results"),
fluidRow(column(2,
selectInput("aa", "Choose a function", choices=c("sin","cos","exp"))
),
column(2,
tags$div(textOutput(outputId = "outputText1"), style = "padding-top:30px;")
)
)
))
)
s <- function(input,output){
output$outputText1 <- renderText({
paste("Sample text")
})
}
shinyApp(ui=u,server=s)
Alternative use two fluidRow to make it more responsive.
In this case the label of the selectInput is set to NULL and e.g. a h5 element is used instead.
library(shiny)
u <- fluidPage(
titlePanel("Simple Selectable Reactive Function"),
sidebarLayout(
sidebarPanel(),
mainPanel(
h2("Results"),
fluidRow(column(2, h5(tags$b("Choose a function")))),
fluidRow(column(2, selectInput("aa", label = NULL, choices=c("sin","cos","exp"))),
column(2,textOutput(outputId = "outputText1")))
)
)
)
s <- function(input,output){
output$outputText1 <- renderText({
paste("Sample text")
})
}
shinyApp(ui=u,server=s)
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)
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; } ")))
I just want to remove text value (put blank text) of a textInput after clicking on it. I tryed "updateTextInput" or "onclick" from shinyjs without success, any idea ?
if (interactive()) {
ui <- fluidPage(
titlePanel("test textInput clicking"),
sidebarLayout(
sidebarPanel(
textInput("sequenceTextInput", label = "", value = "Enter sequence
here...")
),
mainPanel(
)
))
server = function(input, output) {
}
shinyApp(ui, server)
}
You can get this to work with shinyjs as follows:
library(shinyjs)
ui <- fluidPage(
titlePanel("test textInput clicking"),
sidebarLayout(
sidebarPanel(
useShinyjs(),
textInput("sequenceTextInput", label = "", value = "Enter sequence here...")
),
mainPanel(
)
))
server = function(input, output,session) {
onclick("sequenceTextInput",updateTextInput(session,"sequenceTextInput",value=""))
}
shinyApp(ui, server)
Hope this helps!