Search code examples
rshinywindowline-breaksoverlap

How to align a button and verbatimTextOutput in R Shiny without overlap and linebreak when rescaling the window?

I am trying to align a shinyDirButton with a verbatimTextOutput in R Shiny by using a fluidRow(). The problem I'm facing, is that when making the window smaller the verbatimTextOutput overlaps with the shinyDirButton and jumps to a new line when shrinking the window even further. When I increase the window size, the verbatimTextOutput will not keep a constant distance from the shinyDirButton. I would like the button and the text output to always stay in the same line with a certain distance no matter the window size.

My code so far:

fluidRow(
   column(2,
      shinyDirButton("dir_out_input", label = NULL, title = "Select directory", multiple = FALSE, icon = icon("folder"), viewtype = "detail")
   ),
   column(10,
      verbatimTextOutput("dir_out_output")
   )
)

This is at normal scale:

At normal scale

When shrinking the window:

When shrinking the window once

When shrinking the window twice

When increasing the window:

When increasing the window

I tried many different solutions to this problem like using span() or adjusting the margins of the verbatimTextOutput but nothing really worked out for me. I also tried to use style and class variables, but I don't really know enough about how to use them properly.

Solution

  • The solution I ended up choosing was to use CSS flex items.

    HTML("
  .flex-item {
    display: flex;
  }
")

    The flex items are defined with the class "flex-item" at the beginning of the UI. With the property display: flex, the flexbox layout is enabled.

    Then I can call the flex items in a fluid row to achieve the wanted behaviour.

    fluidRow( 
  div(class = "flex-item",
    column(width = 2,
      shinyDirButton("dir_out_input", label = NULL, title = "Select directory", multiple = FALSE, icon = icon("folder"), viewtype = "detail")
    ),
    column(width = 10, style = "width:100%;",
      textInput("dir_out_output", label = NULL)
    )
  )
)