I'm using a side-by-side layout to display multiple plots on the same row. However it looks bad on mobile. How can I keep the side by side layout on desktop, but 1 plot per row on mobile?
fluidRow(
splitLayout(cellWidths = c('49%', '49%'),
plotlyOutput('pWaterLvl'),
plotlyOutput('pHumidity')
)
),
fluidRow(
splitLayout(cellWidths = c('49%', '49%'),
plotlyOutput('pWaterTemp'),
plotlyOutput('pAirTemp')
)
)
I think you can let bootstrap grid system handle it.
fluidRow(
column(6, plotlyOutput('pWaterLvl')),
column(6, plotlyOutput('pHumidity'))
)
If you need to control the grid sizes on multiple devices, you can use a combination of the width and class settings (width controls 'col-sm' by default).
This example puts the plots on top of each other on small screens, next to each other on medium screens, and makes the second plot slightly wider on large screens.
fluidRow(
column(12, class = "col-md-6 col-lg-5", plotlyOutput('pWaterLvl')),
column(12, class = "col-md-6 col-lg-7", plotlyOutput('pHumidity'))
)
Related
This SO post describes how to add an actionButton to the top right of the dashboardHeader in a shinydashboard. I would like to add two action buttons next to each other in the dashboardHeader. How can I place the buttons within the header bar so that they do not overlap? More specifically, is there a way to move a button to the left and centre it vertically within the dashboardHeader?
Perhaps you are looking for this
ui <- dashboardPage(
dashboardHeader(title = div("Testing Work Space",
img(src = 'YBS.png',
title = "Just a Test Application", height = "30px"),
style = "position: relative; margin:-3px 0px 0px 5px; display:right-align;"
),
titleWidth=350,
tags$li(div(
img(src = 'YBS.png',
title = "A Test Graphics Application", height = "30px"),
style = "padding-top:15px; padding-right:100px;"),
class = "dropdown"),
tags$li(a(href = 'http://www.cnn.com',
icon("power-off"),
title = "CNN Home"),
class = "dropdown"),
tags$li(a(href = 'https://en.wikipedia.org/wiki/Mouse',
tags$img(src = 'mouse.png', height = "30px"),
title = "Mouse Home"),
class = "dropdown")
),
dashboardSidebar(),
dashboardBody()
)
server <- function(input, output,session) {}
shinyApp(ui, server)
You can adjust padding and margin to suit your needs. Also, you can add multiple actionButtons.
I can't answer your question directly because I have only used Flexdashboard. But there is a shinyWidgets package that contains a DropDown widget that allows you to embed multiple widgets into the DropDown. So if the dashboard header only allows a single widget, you could use a dropdown widget to access multiple widgets indirectly See:
http://shinyapps.dreamrs.fr/shinyWidgets/
And the dropdowns & sweetalert menu item. The sample dropdowns there contain links to the underlying shinyWidgets code.
I have a Shiny app which is working exactly as I want :-) ... except for an annoying layout glitch when a conditional panel is displayed - the layout is shown below ...
My issue is that when the "Other" check box is checked, a conditional textInput is displayed ( in-line) and all the form objects below 'jump' down the screen (by about half a line height).
I presume that it's because the textInput box is centered in its line (and taller than the other objects on the line) - but the 'jumping' of screen elements looks a little amateurish. Does anyone have ideas about how to stop this behaviour ?
The code for the UI element is ...
fluidRow(
column(5,
checkboxGroupInput("sampleTypes",
"Applicable Sample Type(s)", c("Blood","Serum","Plasma","Fluid","Tissue","Urine","Faeces","Swab", "Other"), selected = "Blood", width = '800px', inline = T)),
conditionalPanel(condition = "input.sampleTypes.includes('Other')",
textInput("otherSample",'',
placeholder = "Other Sample", width = "150px"), style = "display:inline-block;")
),
library(shiny)
ui <- fluidPage(
titlePanel("Hello"),
sidebarLayout(
sidebarPanel("Hello SideBar"),
mainPanel("Hello MainPanel")
)
)
server <- function(input, output) {
}
shinyApp(ui = ui, server = server)
Just by eyeballing I can tell right now my sidebar panel takes up about 33% of the width of the screen. Any idea how I can reduce the width of the sidebar so that the main Panel is larger?
sidebarPanel has a width argument
width: The width of the sidebar. For fluid layouts this is out of 12
total units; for fixed layouts it is out of whatever the width of the
sidebar's parent column is.
The default width is 4, which confirms your eyeballing estimate that 4/12 is one third. So to make it e.g 1/2 the current width you would do:
ui <- fluidPage(
titlePanel("Hello"),
sidebarLayout(
sidebarPanel("Hello SideBar", width=2),
mainPanel("Hello MainPanel")
)
)
I was wondering if it's possible to set a leaflet output's height to "100%" relative to it's parent container in Shiny/R. I've seen some solutions which set the height relative to an entire body output but for my purpose, my map appears in a small tab panel, as seen here.
I've tried creating a surrounding div with modified CSS and simply changing the output's height variable to 100% with no prevail. I was wondering if anyone has a solution which is responsive to changes of the parent container.
From my understanding, the issue is that the column container created by Shiny doesn't have defined dimension. Below is the related code segements and to look at the issue first hand you can go to my shiny app.
UI
fluidRow(
br(),
tabsetPanel(
tabPanel("Drink Information",
column(2,
withSpinner(htmlOutput("beerImage"))
),
column(5,align = "center",
strong(h4("Name")),
textOutput('beerName'),
strong(h4("Primary Category")),
textOutput('beerPrimaryCategory'),
strong(h4("Secondary Category")),
textOutput('beerSecondaryCategory')
),column(5, align = "center",
strong(h4("Varietal")),
textOutput('beervarietal'),
strong(h4("Tertiary Category")),
textOutput('beerTertiaryCategory'),
strong(h4("Style")),
textOutput('beerStyle')
)
),
tabPanel("Drink Location",
column(9,
br(),
#This is the output I would like to use 100% of the row
withSpinner(leafletOutput("lcboLocations"))
),
column(3,h6("temp"))
)
)
)
I'm trying to create a tabBox that spans the entire mainPanel. I'm able to get the width to span the entire screen but I'm unable to get the height to do the same. I do not wish to use absolute values in pixels (or some other unit) since I expect the app to be used across different screens.
I played with the example and an example of the modified tabBox is as below
fluidRow(
tabBox(
title = "First tabBox",
# The id lets us use input$tabset1 on the server to find the current tab
id = "tabset1", height = "450px",
tabPanel("Tab1", "First tab content"),
tabPanel("Tab2", "Tab content 2"),
width = 12
),
height = '20%',
width = 12
)
You can use the vh css unit that is defined as 1% of viewport height and then basically follow the example in this answer where you set the relative height in the css:
fluidRow(
tabBox(
tags$head(
tags$style(HTML(" #tabBox { height:90vh !important; } "))
),
id="tabBox",
title = "tabBox",
width = 12
)
You can of course also put this in an external css file, especially if you are going to do more than one of these css tricks. With 100% goes slightly over the bottom edge because of the header. Around 90% seems to work fine.