CODEWITHSUNDEEP
rshiny
Joe
Joe

Reputation: 1768

How to write text right next to a text input?

How to place text right next to a text input?

enter image description here

This is how I created the above picture:

   library(shiny)

ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(
      fluidRow(
        column(
          width = 3,
          div(style = "white-space: nowrap;", 
          textInput(inputId = "txt_ipt", label = "Some label text", 
                    value = "", width = 150))),
        column(
          width = 3,
          "Move me down"))),
    mainPanel()))

server <- function(input, output, session) {}

shinyApp(ui, server)

My goal is to write some text (in fact only one word) right next to the text input.

Upvotes: 0

Views: 1378

Answers (3)

Pork Chop
Pork Chop

Reputation: 29417

This should do the job, feel free to change the font-size from h5 to h4 and others

library(shiny)
ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(
      fluidRow(
        column(
          width = 3,
          div(style = "white-space: nowrap;", 
              div(style="display: inline-block; width: 100%;",textInput("txt_ipt", label = "Some label text", value = "", width = 150)),
              h5('Move me down',style="display:inline-block")

              )))),
    mainPanel()))

server <- function(input, output, session) {}

shinyApp(ui, server)

enter image description here

Upvotes: 1

Joe
Joe

Reputation: 1768

Lucy's answer that does not allow for fine positioning brought me to the following solution that does:

library(shiny)

ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(
      fluidRow(
        column(
          width = 3,
          div(style = "white-space: nowrap;", 
              textInput(inputId = "txt_ipt", label = "Some label text", 
                        value = "", width = 150))),
        column(
          width = 3,
          tags$div(
            style="margin-top:30px;",
            "Move me down")))),
    mainPanel()))

server <- function(input, output, session) {}

shinyApp(ui, server)

Upvotes: 0

Lucy
Lucy

Reputation: 991

You can use HTML() along with <br> to move the text down a line. Something like:

library(shiny)

ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(
      fluidRow(
        column(
          width = 3,
          div(style = "white-space: nowrap;", 
          textInput(inputId = "txt_ipt", label = "Some label text", 
                    value = "", width = 150))),
        column(
          width = 3,
          HTML("<br>Move me down")))),
    mainPanel()))

server <- function(input, output, session) {}

shinyApp(ui, server)

Upvotes: 1

Related Questions