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"))
)
)
)
Related
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;")
),
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'))
)
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.
I have a very basic Shiny app.
ui.R:
library(shiny)
shinyUI(fluidPage(
titlePanel("Average Run Length Simulation"),
fluidRow(
tabsetPanel(
tabPanel("Shewhart v. Shewhart",
fluidRow(
column(4,"Rule"),
column(2,"Group 1"),
column(2,"Group 2")
),
fluidRow(
column(4,"1 point more than k sigma away from mean"),
column(2,
checkboxInput("svsg1r1",label=" ",value=F),
numericInput("svsg1k1",label=" ",value=3,min=1,step=1)
),
column(2,
checkboxInput("svsg2r1",label=" ",value=F),
numericInput("svsg2k1",label=" ",value=3,min=1,step=1)
)
)
)
)
)
))
The server.r file is the basic one created by Rstudio in a new project.
What I really want is a tabular layout of widget elements, but, I don't think I'll get that without a lot of work and this isn't worth it. So, instead, I want to reduce the width of the numericInput() boxes akin the the size attribute of an <input> element in an HTML form.
How would I do this in shiny? Is there a standard way to apply css/html specifics to particular elements?
This works, though it's global css and I'd rather have element specific. I added this inside the fluidPage() element in ui.r and it resized both boxes.
tags$head(
tags$style(HTML("
input[type=\"number\"] {
width: 100px;
}
"))
)
For a numericInput box specific resizing, you can use the CSS id selector. In the example above, the following should work to just resize the first box.
tags$head(
tags$style(HTML("
#svsg1k1 {
width: 100px;
}
")))
I have almost completed a web app, which allows the user to subset the data frame underlying the web app, using the text input control created by textInput; see my related question for parsing the string as an expression.
It would be more user friendly if I could increase the width of this text input control. Does anybody know how to do this?
Cheers for any help.
If your textInput is as follows:
textInput(inputId="someid", label="somelable", value = 0.0)
tags$head(tags$style(type="text/css", "#someid {width: 150px}")),
you can add some css.
or
tags$head(
tags$link(rel = 'stylesheet', type = 'text/css', href = 'styles.css'),
)
and add an appropriate entry in styles.css
I created a custom.css file for things like this.
Put the custom.css file in a www directory in the app home directory.
Add this line to the custom.css file to make all of the selectize inputs fit the full width of their containers.
.shiny-input-container:not(.shiny-input-container-inline) {
width: 100%;
}
This is very useful for text inputs or dropdowns that have options with long names, or many options. It also just makes the app look more full. I put all of my filters at the top of the page and there is a lot of white space if I don't force the inputs to fill their containers.
Then you can control your input size easily in the ui.R file by setting the width of the column that contains the input container. Something like this...
fluidRow(
column(4, offset = 0, align = 'center', uiOutput(ns("select_category_type"))),
column(4, offset = 0, align = 'center', uiOutput(ns("select_category_group"))),
column(4, offset = 0, align = 'center', uiOutput(ns("select_category")))
),
fluidRow(
column(6, offset = 3, align = 'center', uiOutput(ns("select_year")))
)
```
You will also need to load you custom.css file in the ui.R file. You can do this as the first statement in the dashboardBody function if using shiny dashboard, or in the fluidPage function if using the standard ui.
dashboardBody(
includeCSS("www/custom.css"),
tabItems(...