I have tried to set the distance between two widgets, offset= 0 in column() doesn't work. Can anyone please help me on this, I have stuck here for many hours! Thank you!
library(shiny)
ui <- fluidPage(
column(4,
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 = ")
)),
column(4,
fluidRow(
tags$head(
tags$style(type="text/css", "label{ display: table-cell; text-align: center; vertical-align: middle; } .form-group { display: table-row;}")
),
numericInput(inputId = "numInp", label = "X", value = 0)
))
)
server <- function(input, output){}
shinyApp(ui, server)
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 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);
}
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!
Below is the part of UI code.I am not able to see all the selectinput in the sidebarpanel,
i suspect,it is not able to scroll further or may be if the font size of the
sidebarpanel has to be reduced.Any different approach which can be implemented to solve the problem?
dashboardPage(title = "title",
dashboardHeader(title="title1"
),
dashboardSidebar(tags$head(tags$style(HTML("
.selectize-input, .selectize-dropdown {
font-size:40%;
} }
"))),
radioButtons("filetype", "Select file type",choices=c("csv file","xlsx file")),
tags$div(title="Date format should be mm/dd/YYYY",fileInput("file1", "Upload Data File", accept = c("text/csv","text/comma-separated-values,text/plain",".csv",".xlsx",".xls"))),
uiOutput("col"),
uiOutput("covariate"),
uiOutput("dimensions1"),
uiOutput("levels1"),
uiOutput("dimensions2"),
uiOutput("level2"),
uiOutput("dimensions3"),
uiOutput("level3"),
uiOutput("dimensions4"),
uiOutput("level4")
),
dashboardBody(tags$head(
tags$style(HTML(".my_class {
font-weight: bold;
color:white;
}")
))
,uiOutput("All_tab_Display")
)
)
You'd better provide a reproducible example of your work.
test this and notify me whether it helped or not:
tags$head(
tags$style(HTML("
.sidebar { height: 90vh; overflow-y: auto; font-size: 10px;}
" )
)
)