I've got a shiny application like this:
server.R:
library(shiny)
function(input, output) { NULL }
and ui.R:
library(shiny)
pageWithSidebar(
headerPanel("side-by-side"),
fluidRow(
column(2),
column(4,
wellPanel(
selectInput(inputId = "options", label = "some text",
choices = list(a = 0, b = 1)))
)
),
fluidRow(
h3("bla bla")
)
)
And I would like to have the label of selectInput next to it, not above. Do you know how to do it?
I've found this: Positioning Shiny widgets beside their headers
but it doesn't work for me.
There's multiple ways of doing this, here's one:
library(shiny)
server <- shinyServer(function(input, output) { NULL })
ui <- shinyUI(
pageWithSidebar(
headerPanel("side-by-side"),
sidebarPanel(
fluidRow(
tags$head(
tags$style(type="text/css", "label.control-label, .selectize-control.single{ display: table-cell; text-align: center; vertical-align: middle; } .form-group { display: table-row;}")
),
column(2),
column(4,
selectInput(inputId = "options", label = "some text",
choices = list(a = 0, b = 1))
)
)),
mainPanel(
fluidRow(
h3("bla bla")
))
)
)
shinyApp(ui=ui,server=server)
If you don't want to mess with shinys default CSS you can just leave the label empty and create a label next to it instead of forcing the existing label to the side.
Related
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)
Is there a R function to adjust the title " Factors under the dataset " and "Numbers under the dataset". Below is the code I have tried. So I need the title at the middle of the grey coloured bar
library(shiny)
ui <- fluidPage(
tabsetPanel(tabPanel(
"Factor_Univariate_Analysis",sidebarLayout(
sidebarPanel(
column(h6(selectInput("se1","Factors under the dataset",choices =
c("","Add","sub"))),width = 11,height= 20,offset = 0),width = 1000),
mainPanel(h5(plotOutput("Plot1",width = 1000,height = 1500)))
)
),
tabPanel(
"Numeric_Univariate_Analysis",sidebarLayout(
sidebarPanel(
column(h6(selectInput("se2","Numbers under the dataset",choices =
c("","mean","median","standard_deviation","Data Distribution"))),width
= 11,height= 20,offset = 0),width = 1000),
mainPanel(h5(plotOutput("Plot2",width = 1500,height = 500)))
)
)
)
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
Here is some code which I think is close to what you want to do, I'll just explain a few things first:
I have five years experience as a web developer, so I enjoy using CSS, and I would recommend using it where ever possible. What I beleive you were trying to do is give the label a background, this can be done with CSS. In this case I have put it in the style and html tags. label {} applies styles to all labels. You might want to agust the background color.
I have removed the side panel layouts.
Hopefully you find this helpful.
library(shiny)
ui <- fluidPage(
tags$style(HTML("
label {
width: 100%;
background: lightgrey;
padding: 5px;
border-radius: 5px;
}
")),
tabsetPanel(
tabPanel(
"Factor_Univariate_Analysis",
div(
column(width = 12,
h6(
selectInput(
"se1",
label = "Factors under the dataset",
choices = c("","Add","sub"),
width = "100%"
)
)
),
div(plotOutput("Plot1",width = 1000,height = 1500))
)
),
tabPanel(
"Numeric_Univariate_Analysis",
column(width = 12,
h6(
selectInput(
"se2",
"Numbers under the dataset",
choices = c("","mean","median","standard_deviation","Data Distribution"),
width = "100%"
)
)
),
div(plotOutput("Plot2",width = 1500,height = 500))
)
)
)
server <- function(input, output, session) {
observe({
print(input$se1)
updateSelectInput(session, input$se1, label = "Factors under the dataset replaced")
})
}
# https://shiny.rstudio.com/reference/shiny/latest/updateSelectInput.html
shinyApp(ui, server)
Consider the example below
ui.R:
library(shiny)
library(shinyjs)
shinyUI(
tabPanel("VIEW",
tabsetPanel(id="viewic",
tabPanel("view1",
fluidRow( column(2,
actionButton("button1", "BUTTON1")),
column(2,
actionButton("button2", "BUTTON2"))
))
tabPanel(" View2"))),
fluidRow(
uiOutput("ui1")
),
fluidRow(
uiOutput("ui2")
))
Server:
library(shiny)
library(shinyjs)
shinyServer(function(input, output,session){
observeEvent(
input$button1,
output$ui1 <- renderUI({isolate({
column(3,
selectInput("selectview1",
label = "Select Id",
choices = c("1","2","3")
))})}))
observeEvent(
input$button2,
output$ui2 <- renderUI({isolate({
column(3,
selectInput("selectview2",
label = "Select Id",
choices = c("4","5","6")
))})}))
})
How to reset the session,ie; when I press button1 the selectinput with id selectview1 appears and when I press the button2 the selectInput with id selectview2 defined inside it appears but the selectinput that appeared firstly when the button1 was clicked is also being displayed along with it and vice versa.I tried reset and toggle but it didn't worked properly.
EDIT: use conditionalPanel on your selectInputs. So something to the effect of:
conditionalPanel(condition = 'input.button1 % 2 > 0',
uiOutput("ui1")
)
This checks whether or not the value of your actionButton is even and only displays it when it is odd. So assuming the button starts at a 0 value, it will display after 1, 3, 5, 7... clicks.
I think this should work. Can you try it out?
If you just want to hide a button depending on a click, look into conditionalPanel() and wrap your button code (ui side) in that function.
http://shiny.rstudio.com/reference/shiny/latest/conditionalPanel.html
ui.R
library(shiny)
library(shinyjs)
shinyUI(
fluidPage(
tabPanel("VIEW",
tabsetPanel(id="viewic",
tabPanel("view1",
fluidRow( column(2,
actionButton("button1", "BUTTON1")),
column(2,
actionButton("button2", "BUTTON2"))
)),
tabPanel(" View2"))),
fluidRow(
uiOutput("ui1")
),
fluidRow(
uiOutput("ui2")
)))
server.R
library(shiny)
library(shinyjs)
shinyServer(function(input, output,session){
observeEvent(
input$button1,
output$ui1 <- renderUI({isolate({
output$ui2<-renderUI(
isolate({
dataTableOutput(NULL)
} ) )
column(3,
selectInput("selectview1",
label = "Select Id",
choices = c("1","2","3")
))})}))
observeEvent(
input$button2,
output$ui2 <- renderUI({isolate({
output$ui1<-renderUI(
isolate({
dataTableOutput(NULL)
} ) )
column(3,
selectInput("selectview2",
label = "Select Id",
choices = c("4","5","6")
))})}))
})
This code worked.
How can I position Shiny widgets (e.g. the dropdown box of selectInput()) besides their headers? I've been playing around with various tags formulations without any luck. Grateful for any pointers.
ui.R
library(shiny)
pageWithSidebar(
headerPanel("side-by-side"),
sidebarPanel(
tags$head(
tags$style(type="text/css", ".control-label {display: inline-block;}"),
tags$style(type="text/css", "#options { display: inline-block; }"),
tags$style(type="text/css", "select { display: inline-block; }")
),
selectInput(inputId = "options", label = "dropdown dox:",
choices = list(a = 0, b = 1))
),
mainPanel(
h3("bla bla")
)
)
server.R
shinyServer(function(input, output) { NULL })
Is this what you want?
library(shiny)
runApp(list(ui = pageWithSidebar(
headerPanel("side-by-side"),
sidebarPanel(
tags$head(
tags$style(type="text/css", "label.control-label, .selectize-control.single{ display: inline-block!important; }")
),
selectInput(inputId = "options", label = "dropdown dox:",
choices = list(a = 0, b = 1))
),
mainPanel(
h3("bla bla")
)
)
, server = function(input, output) { NULL })
)
This is a simplification of my Shiny UI. My issue is that the pull-down menu from the SelectizeInput is hidden. It is a bit of a pain having to scroll down. Also, it just does not look very nice. I have tried playing with the z-index to bring it up front but have not had any success.
This is my code:
library(shiny)
runApp(list(
ui = fluidPage(
tabsetPanel(id = "tabs",
tabPanel("Search",
fluidRow(
column(12,
inputPanel(
selectizeInput("s1", h4("Select State:"),
choices = state.name),
tags$head(tags$style(".selectize-control.single { width: 400px; z-index: 1; }")),
dateInput("day", h4("Input Date:"), value = Sys.Date())
)
)
)
)
)),
server = function(input,output,session)
{
})
)
Basically, I want the SelectizeInput menu to display on top like the DateInput calendar.
Thanks for the help!
Carlos
You can use the options from the selectize.js library https://github.com/brianreavis/selectize.js/blob/master/docs/usage.md . dropdownParentmaybe what you are looking for:
library(shiny)
runApp(list(
ui = fluidPage(
tabsetPanel(id = "tabs",
tabPanel("Search",
fluidRow(
column(12,
inputPanel(
selectizeInput("s1", h4("Select State:")
, options = list(dropdownParent = 'body')
, choices = state.name),
tags$head(tags$style(".selectize-control.single { width: 400px; z-index: 1; }")),
dateInput("day", h4("Input Date:"), value = Sys.Date())
)
)
)
)
)),
server = function(input,output,session)
{
})
)
Alternatively you can look at CSS and something like the overflow attribute. See Dropdowns not extending in shiny tabPanel . So in this case use
tags$head(tags$style(".tab-content {overflow: visible;}")),