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!
Related
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.
I have a shiny dashboard with many tabs - now there are enough tabs that when the window size is small enough, the tabs wrap into a second row. For some reason, this second row overlaps the content of my sidebar, but the content in my main panel adjusts to accomodate the navbar's new size.
ui11 <- shinyUI(navbarPage("Beasts of Bellevue",
tabPanel("Head to Head", fluid = TRUE,
useShinydashboard(),
dashboardSidebar(
sidebarMenu(),
# Select variable for left plot
selectInput(inputId = "left",
label = "Manager 1:",
choices = c("Kevin", "Jake", "Lyons",
"Nipples", "Dan", "Shuds",
"Karp", "Mills", "Joey",
"Raffy", "Oster", "Scott", "Sam"),
selected = "Kevin"),
# Select variable for right plot
selectInput(inputId = "right",
label = "Manager 2:",
choices = c("Kevin", "Jake", "Lyons",
"Nipples", "Dan", "Shuds",
"Karp", "Mills", "Joey",
"Raffy", "Oster", "Scott", "Sam"),
selected = "Lyons"),
# Select which game type to include
checkboxGroupInput(inputId = "selected_gametype",
label = "Select game type(s):",
choices = c("Regular Season", "Playoffs", "Consolation"),
selected = c("Regular Season", "Playoffs", "Consolation")),
# Select which seasons to include
sliderInput(inputId = "slider",
label = "Seasons",
min = 2012,
max = max(h2h$Year),
value = c(2012, max(h2h$Year)),
sep = "",
ticks = FALSE,
dragRange = TRUE),
br(),
tags$img(src = "bob.png", height = 225, width = 225)),
#Header
header <- dashboardHeader(
disable = TRUE
),
mainPanel(width = 12,
dashboardBody(tags$head(tags$meta(name = "viewport", content = "width=1600")),
shinyDashboardThemes(
theme = "grey_light"
),
fluidRow(
# Row 1, Column 1
column(width = 6,
h3(textOutput("left"))
),
#Row 1, Column 2
column(width = 6,
h3(textOutput("right"))
)
),
fluidRow(
# Row 2, Column 1
column(width = 6,
withLoader(valueBoxOutput(
outputId = "leftnumber",
width = NULL), type = "html", loader = "loader7")),
# Row 2, Column 2
column(width = 6,
valueBoxOutput(
outputId = "rightnumber",
width = NULL))
),
fluidRow(
column(width = 12,
valueBoxOutput(
outputId = "leftnumberavg",
width = 2),
valueBoxOutput(
outputId = "leftnumberavg2",
width = 2),
valueBoxOutput(
outputId = "leftmargofvic",
width = 2),
valueBoxOutput(
outputId = "rightnumberavg",
width = 2),
valueBoxOutput(
outputId = "rightnumberavg2",
width = 2),
valueBoxOutput(
outputId = "rightmargofvic",
width = 2))
),
plotlyOutput(outputId = "plot")
)
)
)))
Here is an image of how the issue renders: Overlapping navbar
I have a question regarding adding a horizontal and vertical scroll bars to my R Shiny App to display a complete heatmap plot (382 rows and 800 columns). I managed to configure most of the features in the app, however I am confused and stuck how to add a scroll bars since only partial plots are being displayed. After going through few questions in Stack Overflow, I learnt that this issue could be related to html, css and javascript which I am not familiar and some suggested to try with adding options = list(scrollX = TRUE) or 'overflow-x': 'scroll', and 'overflow-y': 'scroll',for horizontal and vertical scroll bar. Please assist me with how the scroll bars can be added horizontally and vertically to view the complete heatmap plot.
Thank you,
Toufiq
Example code UI and Server code is provided below along with the example screenshot of the plot4:
Define UI
ui <- dashboardPage(skin = "green",
dashboardHeader(title = "Test") ,
dashboardSidebar(
sidebarMenu(
menuItem("MENU")
),
sidebarMenuOutput("menu")
),
dashboardBody(
tabItems(
tabItem("gridfingerprint",
fluidRow(
box(width = NULL,solidHeader = TRUE,
plotOutput("plot2", height = 500)
),
fluidRow(
box(width = NULL,solidHeader = TRUE,
plotOutput("plot_map", height = 500))
),
fluidRow(
column(width = 4,
box(width = NULL,status = "warning",
downloadButton("gridplot",label = "Download image")
)
),
column(width = 3, offset = 1,
box(width = NULL, status = "warning",
downloadButton("downloadlist",label = "Download table")
))
)
)
),
tabItem(tabName = "individualfingerprint",
h5("Fingerprint heatmap displaying patterns of annotated modules across individual study subjects"),
fluidRow(
box(width = 12,solidHeader = TRUE,
plotOutput("plot4",height = 1200)
),
fluidRow(
column(width = 4,
box(width = NULL,status = "warning",
downloadButton("downloadindplot",label = "Download image")
)
),
column(width = 3, offset = 1,
box(width = NULL, status = "warning",
downloadButton("individualtable",label = "Download table")
))
)
)),
tabItem("complexplot",
fluidRow(
column(width = 12,
box(width = NULL,solidHeader = TRUE,
plotOutput("plot3",height = 800)),
fluidRow(
column(width = 4,
box(width = NULL,status = "warning",
downloadButton("aggregateplot",label = "Download image")
)
),
column(width = 3, offset = 1,
box(width = NULL, status = "warning",
downloadButton("downloadaggregate",label = "Download table")
))
)
)
))
)
)
)
I added the below code to the plot4 and this resolved the issue.
fluidRow(
box(width = 12,solidHeader = TRUE, (div(style='width:1400px;overflow-x: scroll;height:800px;overflow-y: scroll;',
plotOutput("plot4",height = 1200, width = 2000)))
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.
ui <- dashboardPage(
dashboardHeader(title = "Sales"),
dashboardSidebar(),
dashboardBody(
tags$style(HTML(".box-header{background:#d2d2d2; color:#d83000; text-align:center;}")),
shinyUI(fluidPage(
fluidRow(
box(fluidRow(column(width = 12,
valueBox(1000,"Total Sales", width = 2),
valueBox(500,"Existing Sales", width = 2),
valueBox(300,"New Sales", width = 2),
valueBox(100,"Lost Sales", width = 2),
valueBox(100,"Unclassified Sales", width = 2))),
fluidRow(column(width=12, offset = 2,valueBox(250, "within existing sales", width = 2))),
width = 12, title = tags$b("BUSINESS MODEL"), solidHeader = TRUE)
)#,
#box(title = "Title", height = 20, width = 8, solidHeader = TRUE)
))))
# Define server logic required to draw a histogram
server <- shinyServer(function(input, output) {
})
# Run the application
shinyApp(ui = ui, server = server)
Result
As you can see the "within existing sales" valuebox is not in align with "existing sales" valuebox. I tried offsetting with as 3.5 but it does not work. I even tried inspecting the result but I not much of a programmer.
The second row is not aligned because you are adding a offset of 2 to a column with a width of 12. On Bootstrap, you can not use more than 12 column in a row.
To solve that you should use a column-based layout, using a column for each valueBox and setting width = NULL. The follow example is using to separate rows, but you can also use only one row.
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(title = "Sales"),
dashboardSidebar(),
dashboardBody(
tags$style(HTML(".box-header{background:#d2d2d2; color:#d83000; text-align:center;}")),
shinyUI(fluidPage(
fluidRow(
box( width = 12, title = tags$b("BUSINESS MODEL"), solidHeader = TRUE,
fluidRow(
column(width = 2, valueBox(1000,"Total Sales", width = NULL)),
column(width = 2, valueBox(500,"Existing Sales", width = NULL)),
column(width = 2, valueBox(300,"New Sales", width = NULL)),
column(width = 2, valueBox(100,"Lost Sales", width = NULL)),
column(width = 2, valueBox(100,"Unclassified Sales", width = NULL))
),
fluidRow(
column(width = 2, offset = 2,
valueBox(250, "within existing sales", width = NULL)
)
)
)
)#,
#box(title = "Title", height = 20, width = 8, solidHeader = TRUE)
))))
# Define server logic required to draw a histogram
server <- shinyServer(function(input, output) {
})
# Run the application
shinyApp(ui = ui, server = server)