I am trying to display some input field alongside some output field inputted from another tab. However the output field is going below and cannot align with the rest.
Code given below:-
fluidRow(
column(3, sliderInput(inputId = "avg_planned_miles", label = "Average Planner Miles", min = 5, max = 50, value = 9, step = 0.1)),
column(3, textInput(inputId = "batch_pct", label = "Batch %", value = "0.5")),
column(3, h4("Volume: "), verbatimTextOutput(outputId = "planner_volume"))
)
Try this code, it looks better to me
fluidRow(
column(3,
tagList(
tags$style(type = 'text/css','#avg_planned_miles .irs-grid-text {font-size: 12px}'), #the grid numbers size
div(id = 'avg_planned_miles', style='font-size: 16px;', #label font size
sliderInput(inputId = "avg_planned_miles", label = "Average Planner Miles\n", min = 5, max = 50, value = 9, step = 0.1)
)#div
)#tags
),
column(3,
tagList(
div(id = 'batch_pct',
style='position:absolute; top:10px; right:5px;', #add margin space
textInput(inputId = "batch_pct", width = 280,
label = "Batch%", value = "0.5")
)
)
),
column(3, p(strong("Volume")), #bold font to match the other fields
verbatimTextOutput(outputId = "planner_volume", placeholder = 1)
),
)
You can keep the sliderInput as it is in your code, I thought if the font sizes are bigger it looks better.
Related
I have created the following interface using R shiny.
library(shiny)
ui <- fluidPage(
#Can be fluid row also
fluidRow(
column(3,
h3("Excel DB"),
hr(),
fileInput("file1", "Excel DB",
multiple = TRUE,
accept = c("text/csv/xlsx/xls",
"text/comma-separated-values,text/plain",
".csv", ".xls", ".xlsx")),
textInput(inputId = 'Type',label = 'Type'),
textInput(inputId = 'Client',label = 'Client'),
textInput(inputId = "Task", label = "Task"),
actionButton(inputId = "ClearAll", label = "Clear Screen"),
radioButtons("dist", "Vertical Axis Scale",
c("Linear" = "Linear Regression",
"Log" = "Logistic Regression"))
),
column(5,h5(' '),
hr(), downloadButton(outputId = "Downloaddata", label = "Fetch Dataset"),
textInput(inputId = "Commodity", label = "Commodity"),
textInput(inputId = "Year", label = "Year"),
radioButtons("dist", "Horizontal Axis Scale",
c("Linear" = "Linear Regression",
"Log" = "Logistic Regression")),
numericInput(inputId = "Numberinput", label = "Numinput", min = -1000000000, max = 1000000000, value = 0,step = 1)
)
), sliderInput(inputId = "Scale", label = "Scale", min = 0, max = 100, step
= 2.5, value = 1)
)
I have created the following empty server
server<-function(input, output){}
shinyApp(ui, server)
The above code creates a shiny application with a sidebar panel having two columns. However, the 2 columns are not aligned with each other. I would like to know how to arrange the components of the app as follows.
The fetch dataset button should be along the browse button. Similarly the commodity text box should be next to type text box and the year box should come near the client. The two sets of radio buttons should align with each other. I request some help here. Am unable to arrange them in that pattern
To achieve this you need to do some nesting of column() and fluidRow(). This answer should explain enough to get you started, along with the examples on Shiny's layout guide. I believe the following should get you roughly what you want:
library(shiny)
ui <- fluidPage(
#Can be fluid row also
h3("Excel DB"),
hr(),
fluidRow(
column(12,
fluidRow(
column(3,
fileInput("file1", NULL,
multiple = TRUE,
accept = c("text/csv/xlsx/xls",
"text/comma-separated-values,text/plain",
".csv", ".xls", ".xlsx"))),
column(5,
column(3,
downloadButton(outputId = "Downloaddata", label = "Fetch Dataset")),
column(2, offset = 2,
actionButton(inputId = "ClearAll", label = "Clear Screen"))
)
),
fluidRow(
column(3,
textInput(inputId = 'Type',label = 'Type'),
textInput(inputId = 'Client',label = 'Client'),
textInput(inputId = "Task", label = "Task")
),
column(5,
textInput(inputId = "Commodity", label = "Commodity"),
textInput(inputId = "Year", label = "Year"),
numericInput(inputId = "Numberinput", label = "Numinput", min = -1000000000, max = 1000000000, value = 0,step = 1)
)),
fluidRow(
column(3,
radioButtons("dist", "Vertical Axis Scale",
c("Linear" = "Linear Regression",
"Log" = "Logistic Regression"))),
column(5,
radioButtons("dist", "Horizontal Axis Scale",
c("Linear" = "Linear Regression",
"Log" = "Logistic Regression")))
),
fluidRow(
column(5,
sliderInput(inputId = "Scale", label = "Scale", min = 0, max = 100,
step = 2.5, value = 1))
)
)
)
)
Created on 2018-09-20 by the reprex package (v0.2.1)
I started learning shiny recently and I am toying around with wellPanels. I am trying to create a wellPanel which will be no larger than necessary to fit its contents. I've managed to get the following:
but have not found a way to eliminate the right-hand side extra space of the wellPanel. If possible, I would also like to place the "X" button on the top right corner of the wellPanel. Is there a way to do these? Thanks in advance!
Here is the working code:
library(shiny)
ui <- fluidPage(
fluidRow(column(width = 6,
wellPanel(
fluidRow(
column(width = 3, textInput(inputId = "layer", label = "Layer name", placeholder = "Layer name")),
column(width = 3, numericInput(inputId = "att_point", label = "Attachment Point", value = 100)),
column(width = 3, numericInput(inputId = "capacity", label = "Capacity", value = 100)),
column(width = 3, actionButton(inputId = "rm_btn", label = "", icon = icon("times")))
)))))
shinyApp(ui, function(input,output){})
You need to adjust the widths something like this:
library(shiny)
ui <- fluidPage(
fluidRow(column(width = 6,
wellPanel(
fluidRow(
column(width = 4, textInput(inputId = "layer", label = "Layer name", placeholder = "Layer name")),
column(width = 4, numericInput(inputId = "att_point", label = "Attachment Point", value = 100)),
column(width = 3, numericInput(inputId = "capacity", label = "Capacity", value = 100)),
column(width = 1, actionButton(inputId = "rm_btn", label = "", icon = icon("times")))
)))))
shinyApp(ui, function(input,output){})
With this you get an output which looks like this:
Hope it helps!
Lets assume I have a very simple application that only has 8 inputs grouped in 2 Panels (4 inputs | 4 inputs - see picture bellow) and based on these, I plot a small plot (easy peasy).
The problem that I face is that I want to have the labels only for the first panel, and on the left of the textInput box.
e.g. (Please excuse my sloppy image editing!)
Any suggestion?
My MWE for Figure 1 output:
library(shiny)
ui<-shinyUI(fluidPage(
wellPanel(
tags$style(type="text/css", '#leftPanel { max-width:300px; float:left;}'),
id = "leftPanel",
textInput("Population1000", 'Population 1000',"15"),
textInput("Area1000",'Area 1000', "20"),
textInput("GNI1000", 'GNI 1000', "2314"),
textInput("GDP1000", "GDP 1000", "1000")
),
wellPanel(
tags$style(type="text/css", '#RightPanel { max-width:300px; float:left;}'),
id = "RightPanel",
textInput("Population2000", 'Population 2000',"15"),
textInput("Area2000",'Area 2000', "20"),
textInput("GNI2000", 'GNI 2000', "2314"),
textInput("GDP2000", "GDP 2000", "1000")
)
)
)
server<-shinyServer(function(input, output) {NULL})
shinyApp(ui,server)
Hi you can try to use Bootstrap's horizontal form, look at the code below, it create 3 columns of width 4 each. You can change width in class = "col-sm-4 control-label" for labels, and in width = 4 for inputs.
library("shiny")
ui <- fluidPage(
fluidRow(
column(
width = 4,
tags$form(
class="form-horizontal",
tags$div(
class="form-group",
tags$label(class = "col-sm-4 control-label", `for` = "Population1000", br(), "Population"),
column(width = 4, textInput(inputId = "Population1000", label = "Year 1000", value = "15")),
column(width = 4, textInput(inputId = "Population2000", label = "Year 2000", value = "15"))
),
tags$div(
class="form-group",
tags$label(class = "col-sm-4 control-label", `for` = "Area1000", "Area"),
column(width = 4, textInput(inputId = "Area1000", label = NULL, value = "20")),
column(width = 4, textInput(inputId = "Area2000", label = NULL, value = "20"))
),
"..."
)
)
)
)
server <- function(input, output) {
}
shinyApp(ui = ui, server = server)
Result :
PS : you should not use same ids for inputs.
I have a shiny app that have 2 bar charts and one heat chart, they have the same x axis (year), I want the years to be aligned in all the plots, but I don't know how to do it. below is my UI code:
ui = fluidPage(
titlePanel("Global Terrorism, is it getting worse?"),
tabsetPanel(
tabPanel("Plot", fluid = TRUE,
sidebarLayout(
sidebarPanel(radioButtons(
inputId="radio",
label="Variable Selection Type:",
choices=list(
"All Countries",
"Select a Country"
),
selected="All Countries")
,conditionalPanel(
condition = "input.radio != 'All Countries'",
selectInput("Country", "Select Country", choices = sort(unique(mydat$Country)), selected = "Iraq"),
sliderInput("freq", "Minimum Frequency:",min = 1, max = 50, value = 15),
sliderInput("max", "Maximum Number of Words:", min = 1, max = 100, value = 100)
), width=2),
mainPanel(fluidRow(
column(8, plotlyOutput("trendbarPlot", height = "200px",width = 845)),
column(8, plotlyOutput("trendheatrPlot", height = "300px",width = 845)),
column(2, plotOutput("WordCloud", height = "200px",width = 400)),
column(8, plotlyOutput("trendstakbarPlot", height = "200px",width = 895))
)
)
)
),
tabPanel("Map", fluid = TRUE,
sidebarLayout(
sidebarPanel(sliderInput("year", "Select Year:", min = 1968, max = 2009, value = 2009, sep='')),
mainPanel(
htmlOutput("Attacks")
)
)
)
)
I have a top banner that I want to split into two separate sections representing two different inputs. To do this, I've created a fluidRow and with two columns, one for each input. However, as it is now there is a little bit of white space between the columns, despite putting offset = 0. Is there any way to remove this white space so that the columns are immediately next to one another?
colors = c("green","blue","red")
library(shiny)
ui <- fluidPage(
tabsetPanel(
tabPanel("Info",
fluidRow(
column(width = 6, offset = 0,
div(style = "height:50px;width:100%;background-color: #999999;border-style: solid;border-color: #000000",
tags$h3("Section 1")
)
),
column(width = 6, offset = 0,
div(style = "height:50px;width:100%;background-color: #999999;border-style: solid;border-color: #000000",
tags$h3("Section 2")
)
)
),
fluidRow(
column(width = 6, offset = 0,
div(style = "height:50px;width:100%;background-color: #999999;border-style: solid;border-color: #000000",
selectInput(inputId = "color",label = "color:",
choices = colors,
selected = colors[2],
multiple = FALSE)
)
),
column(width = 6, offset = 0,
div(style = "height:50px;width:100%;background-color: #999999;border-style: solid;border-color: #000000",
selectInput(inputId = "points",label = "Number of Points:",
choices = c("30","60","90"),
selected = "10",
multiple = FALSE) )
)
),
br(),
br(),
fluidRow(
actionButton(inputId = "go",
label = "Update"
)
),
fluidRow(
plotOutput("plot", width = "100%")
)
)
)
)
server <- function(input, output,session) {
data = eventReactive(input$go, {
var1 = rnorm(isolate(as.numeric(input$points)),5)
cat1 = c(rep("red",length(var1)/3),rep("blue",length(var1)/3),rep("green",length(var1)/3))
data = cbind.data.frame(var1,cat1)
plotdata = data[which(data$cat1 ==isolate(input$color)),]
}
)
output$plot = renderPlot({
plotdata = data()
plotcol = isolate(input$color)
plot(plotdata$var1, col = plotcol)
})
}
shinyApp(ui = ui,server = server)
The white space is the padding of the column div. To remove that, use
column(width = 6, offset = 0, style='padding:0px;', ...)