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;")
),
Related
I am having an issue where the data for my DT table is "bleeding" past the edge of the box in my fluid row.
Here is the tabPanel section
tabPanel("Table title", h1('dataset', style = 'color: #23A595'),
p('Here we will have a paragraph of explanatory text to talk about the graphs below. Here we will have a paragraph of explanatory text to talk about the graphs below. Here we will have a paragraph of explanatory text to talk about the graphs below. Here we will have a paragraph of explanatory text to talk about the graphs below. Here we will have a paragraph of explanatory text to talk about the graphs below.', style = 'color: black'),
fluidRow(
box(DT::dataTableOutput(outputId = "table"), width = NULL, solidHeader = TRUE, status = "primary"),
),
When the app is run here is the result of the render DT.
Here is what the data set looks like.
The red box highlights the issue.
Here is what i have tried:
First,
output$table<- renderDT(
outputtable,options = list(columns.width = "3px"
),
rownames= FALSE
)
Second,
fluidRow(box(DT::dataTableOutput(outputId = "table"),width = #),
)
I was under the impression that shiny just automatically calculates the size needed despite window size an such.
in simple terms, shiny creates box + add DT table to box = box with DT table INSIDE of it.
I want the highlighted issue to not happen what do I need to do?
If there is anything I can add let me know.
The scrollX comment above answered the question.
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 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 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(...