I have the following example, which renders 100 reactive radio button.
library(shiny)
library(shinyWidgets)
if (interactive()) {
ui <- fluidPage(
tags$h1("radioGroupButtons examples"),
radioGroupButtons(
individual = T, selected = "",status = "danger",
inputId = "somevalue1",
label = "Make a choice: ",
choices = rep("x", 100)
),
verbatimTextOutput("value1"),
)
server <- function(input, output) {
output$value1 <- renderPrint({ input$somevalue1 })
}
shinyApp(ui, server)
}
I would like now to arrange/align the buttons in 10 columns by 10 rows, but I cannot figure out which CSS class I should target to do so.
You can use CSS flexbox or grid
Flexbox example :
#content {
display: flex;
flex-wrap: wrap;
width: 250px;
}
#content>input {
width: 25px;
height: 25px;
}
Grid example :
#content {
display: grid;
grid-template-columns: repeat(10, 1fr);
}
Related
I am quite new with css styling and I have the following app:
library(shiny)
ui <- fluidPage(
tags$head(
tags$style(
type = "text/css",
"#txtXDiv label, #txtYDiv label {
display: table-cell;
text-align: left;
vertical-align: middle;
width:130px
}
#txtXDiv .form-group, #txtYDiv .form-group {
display: table-row;
}
/*#txtXDiv, #txtYDiv {
display:inline-block
}*/
"
)
)
,tags$div(
id = "txtXDiv",
textInput(inputId = "txtX", label = "Porcentaje X:"),
p("%")
)
,tags$div(
id = "txtYDiv",
textInput(inputId = "txtY", label = "100 - Porcentaje X:"),
p("%")
)
)
server <- function(input, output) {}
shinyApp(ui = ui, server = server)
It looks in this way:
What I want is:
To reduce the width of the input field
To put the "%" character together at the right of the input field
I mean, something like that
Any suggestion?
There are a few solutions here and here but none of them works on Shiny 1.3.2.
This is what I attempted so far
library(shiny)
server <- shinyServer(function(input, output) { NULL })
ui <- shinyUI(
pageWithSidebar(
headerPanel("side-by-side"),
sidebarPanel(
fluidRow(
tags$head(
tags$style(type="text/css", "label.control-label, .selectize-control.single{ display: table-cell; text-align: center; vertical-align: middle; } .form-group { display: table-row;}")
),
column(2),
column(4,
sliderInput("slider", label = h5("slider") ,value = 500,min = 0, max =1000,ticks = F)
)
)),
mainPanel(
fluidRow(
h3("bla bla")
))
)
)
shinyApp(ui=ui,server=server)
Is there a way to make the slider wider?
There’s a lot of different ways to do positioning with CSS. My choice here would be to use flexbox, as annotated below. Note the use of a
.label-left container to scope the positioning changes.
library(shiny)
ui <- fluidPage(
tags$style(HTML(
"
.label-left .form-group {
display: flex; /* Use flexbox for positioning children */
flex-direction: row; /* Place children on a row (default) */
width: 100%; /* Set width for container */
max-width: 400px;
}
.label-left label {
margin-right: 2rem; /* Add spacing between label and slider */
align-self: center; /* Vertical align in center of row */
text-align: right;
flex-basis: 100px; /* Target width for label */
}
.label-left .irs {
flex-basis: 300px; /* Target width for slider */
}
"
)),
div(class = "label-left",
sliderInput("slider_1", "First slider", 0, 10, 5),
sliderInput("slider_2", "Second slider", 0, 10, 5)
)
)
server <- function(input, output, session) {}
shinyApp(ui, server)
I used some of the logic from here
How to put shiny radioGroupButtons into columns
and can't seem to get the layout to look correctly in the viewer pane. The buttons look fine in Chrome. I'm not sure how to fix it.
library(shiny)
library(shinyWidgets)
library(stringr)
# need radioGroupButtons to be in columns
my_css <-
".btn {
padding:2px;
width: 250px;
height: 60px;
}
.btn-group, .btn-group-vertical {
column-count: 3;
column-width: 0;
}"
# if you're not familiar with local() it just prevents clutter in the global env
# by just returning the last object
button_options <- local({
first_3 <- "^([^ ]* ){3}"
sample_sentences <- sentences[1:9]
paste(
"<big>", str_extract(sample_sentences, first_3),
"</big><br>", str_remove(sample_sentences, first_3)
)
})
# build gadget
ui <- fluidPage(
tags$head(tags$style(HTML(my_css))),
shinyWidgets::radioGroupButtons(
inputId = "buttons",
label = NULL,
choices = button_options
)
)
server <- function(input, output) {}
runGadget(shinyApp(ui, server))
The fix was using a CSS grid instead:
.btn-group-container-sw {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.radiobtn {
width: 100%;
}
I'm struggling to find out how to target 1 of the two dropdowns specifically with css styling code.
I can style the dropdowns in general, but not individually
I have tried to target it in the following ways, but none work.
#MyDropDown1 .sw-show.sw-dropdown-content {
#sw-content-MyDropDown1 .sw-show.sw-dropdown-content {
.dropdown-content-MyDropDown1 {
#dropdown-content-MyDropDown1 {
#dropdown-menu-MyDropDown1 {
How to find the right syntax to target the 1st dropdown?
here is the app:
library(shiny)
library(shinyWidgets)
ui <- fluidPage(
tags$head(tags$style(HTML('
.sw-show.sw-dropdown-content {
display: block;
left: 200px;
top: 100px;
height: 300px;
width:
} '))),
dropdown(inputId = "MyDropDown1",
tags$h3("List of Input")),
dropdown(inputId = "MyDropDown2",
tags$h3("List of Input"))
)
server <- function(input, output, session){
}
shinyApp(ui = ui, server = server)
Maybe this is a way to go. But unfortunately because of the margin I end up with 2 boxes...
But at least the css style apply only on the first dropdown
library(shiny)
library(shinyWidgets)
ui <- fluidPage(
tags$head(tags$style(HTML('
.test {
display: block;
background-color:red;
left: 200px;
top: 100px;
height: 300px;
width:
} '))),
dropdown(inputId = "MyDropDown1",
tags$h3("List of Input"), class = "test"),
dropdown(inputId = "MyDropDown2",
tags$h3("List of Input"))
)
server <- function(input, output, session){
}
shinyApp(ui = ui, server = server)
I would like some inputs to have their label inline with the input box, and others to exhibit the standard Shiny standard behaviour. Consider the answer (and minimal example) given by SBista here: How to put a box and its label in the same row? (shiny package)
library(shiny)
ui <- fluidPage(
fluidRow(
tags$head(
tags$style(type="text/css", "label{ display: table-cell; text-align: center; vertical-align: middle; }
.form-group { display: table-row;}")
),
textInput(inputId = "txtInp", label = "Label:"),
textInput(inputId = "txtInp2", label = "A_longer_label:"),
numericInput(inputId = "numInp", label = "Third_label:", value = 0)
)
)
server <- function(input, output){}
shinyApp(ui, server)
This gives the very neat output like so:
Here the input boxes are neatly aligned. If I only want some of the labels to exhibit this behaviour (and others to do the normal Shiny thing), I can create the id "inline" and add it to divs around the labels in question, like so:
library(shiny)
ui <- fluidPage(
fluidRow(
tags$head(
tags$style(type="text/css", "#inline label{ display: table-cell; text-align: left; vertical-align: middle; }
#inline .form-group { display: table-row;}")
),
tags$div(id = "inline", textInput(inputId = "txtInp", label = "Label:")),
tags$div(id = "inline", textInput(inputId = "txtInp2", label = "Label2_not_inline:")),
numericInput(inputId = "numInp", label = "Third_label:", value = 0)
)
)
server <- function(input, output){}
shinyApp(ui, server)
Now the third label behaves as expected, but the first two labels are not neatly aligned. I guess this is because an id can only be used once. How can a class be used to achieve the desired result for multiple inputs?
To achieve what you want you could modify the css as follows:
tags$style(type="text/css", ".inline label{ display: table-cell; text-align: left; vertical-align: middle; }
.inline .form-group{display: table-row;}")
The code would look something like this:
library(shiny)
ui <- fluidPage(
fluidRow(
tags$head(
tags$style(type="text/css", ".inline label{ display: table-cell; text-align: left; vertical-align: middle; }
.inline .form-group{display: table-row;}")
),
tags$div(class = "inline", textInput(inputId = "txtInp", label = "Label:"),
textInput(inputId = "txtInp2", label = "Label2:")),
numericInput(inputId = "numInp", label = "Third_label:", value = 0)
)
)
server <- function(input, output){}
shinyApp(ui, server)
With this code you will get the labels which looks a lot cleaner, something like this:
Hope it helps!