Search code examples
rshinyalignmentselectinput

Shiny align Input controls right or left

I have three input controls and want to align one at the left side and two at the right side of the page in a shiny application. Furthermore, the two selectInput controls have to be side by side which I solved using the code fome this answer.

Using column's and align = "right" I'm able to get what I want. The problem is that the text as well as the select arrow is also right-aligned, which is looking awful (see picture and highlighted area below).

Is there another way to achieve the expected alignment?

library(tidyverse) # loaded for the words data.frame
library(shiny)
ui <- fluidPage(
    navbarPage(
      set.seed(1233),
      fluidRow(
       column(8,radioButtons("plot", "", choices = list("Cluster"="1","Correlation"="2"), inline=T)),
       column(4, align = "right",
        div(style="display: inline-block;vertical-align:top; width: 120px;",
            selectInput("Something","Something", choices = sample(words, 5))),
        div(style="display: inline-block;vertical-align:top; width: 120px;",
            selectInput("Else","else", choices = sample(words, 6))))
      )
    )
  )

server <- function(input, output) {}  

shinyApp(ui, server)

enter image description here

Solution

  • I can't give you advice for best practice of alignment, but in this case, you can add

    text-align:left !important;

    to your style args