CODEWITHSUNDEEP
rshiny
Jensxy
Jensxy

Reputation: 139

Shiny: Align text in textInput

I have a shiny app with an input field (textInput). I would like to align the input text to the right. In CSS it would be something like text-align: right;. Does someone have an idea I can do this?

You can find a code example below.

ui <- fluidPage(
  textInput("text", "Enter your text here")
)
server <- function(input, output) {
  output$value <- renderText({ input$text })
}
shinyApp(ui, server)

Upvotes: 1

Views: 7812

Answers (3)

predict
predict

Reputation: 19

To get the textInput at right side of fluidRow, use below example.

    library(shiny)
    ui <- fluidPage(
      fluidRow(textInput("text", "Enter your text here"), align = 'right')
    )
    server <- function(input, output) {
      sampleText <- renderText({input$text })
    }
    shinyApp(ui, server)

Upvotes: 0

Shree
Shree

Reputation: 11140

I think there should've been a way to add a style argument to textInput so that you could pass style="text-align: right" to textInput. Anyways here's one way -

ui <- fluidPage(
  HTML(
    '<div class="form-group shiny-input-container">
      <label for="text">Enter text here</label>
      <input id="text" type="text" style="text-align: right" class="form-control" value=""/>
      </div>'
  ),
  textOutput("value")
)
server <- function(input, output) {
  output$value <- renderText({
    input$text
  })
}
shinyApp(ui, server)

The way I did this was just get the output for textInput("text", "Enter your text here") in console and manually added the style attribute to <input>. For repeated use you could turn this into a function and call it right_textInput() or something.

enter image description here

Another way is to add css to your inputId, in this case #text. However you'll have to do this for every textInput that you want to right align -

ui <- fluidPage(
  tags$head(tags$style(HTML("#text text-align: right")))
  textInput("text", "Enter text here"),
  textOutput("value")
)
server <- function(input, output) {
  output$value <- renderText({
    input$text
  })
}
shinyApp(ui, server)

Upvotes: 4

Scott Henwood
Scott Henwood

Reputation: 229

You can apply css, see https://shiny.rstudio.com/articles/css.html In the HTML the text input should have an ID of 'text

Upvotes: -1

Related Questions