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(...
Related
I have the following snippet of code:
shinyUI(fluidPage(
useShinyjs(),
shinyjs::hidden(div(
id = "application",
navbarPage(
title = div(img(src="img_1.png", filetype="image/png"), "Indicators"),
id = "tabs",
tabpanel("Admin", ...)
tabpanel("User", ...)
)
))
))
I would like to add a second image, let's call it img_2.png to the right of the navbar, i.e. at the end of the navbar itself. Maybe the fact that I used title = forces me to place only one image in the navbar. Could anyone help me?
you can add an additional img tag and an style parameter, that sets the position to the right side:
title = div(img(src="img_1.png", filetype="image/png"), "Indicators", img(src="img_1.png", filetype="image/png", style = "position: fixed;right: 20px;"))
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;")
),
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 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;
}
")))