How to prevent the overlapping of two input labels in splitLayout, Shiny, R?

Question

The ui of the following example contains four selectInput. The last two of them are in a splitLayout. I noticed that, when I launch the app, the label of the last two would overlap if the window size is not large enough, as the first screenshot shows. Is it possible to make the label of the input in splitLayout dynamically change depends on the width of the window? A comparison would be the first two selectInput. As shown in the second screenshot, when I reduce the window width, the label would change to two lines. I would like to have the same behavior for the last two selectInput in splitLayout.

library(shiny)

# Define UI
ui <- fluidPage(
  mainPanel(
    selectInput(inputId = "A", label = "This is a long lebel with lots of words", choices = letters[1:5], selected = "a"),
    selectInput(inputId = "B", label = "This is a long lebel with lots of words", choices = letters[1:5], selected = "a"),
    splitLayout(
      selectInput(inputId = "C", label = "This is a long lebel with lots of words", choices = letters[1:5], selected = "a"),
      selectInput(inputId = "D", label = "This is a long lebel with lots of words", choices = letters[1:5], selected = "a"),
      # Expand the menu in splitLayout
      # From: https://stackoverflow.com/a/40098855/7669809
      tags$head(tags$style(HTML("
                              .shiny-split-layout > div {
                                overflow: visible;
                              }
                              ")))
  )
  )
)

# Server logic
server <- function(input, output, session){

}

# Complete app with UI and server components
shinyApp(ui, server)

First screenshot:

Sceond screenshot:

Update

@Simran has pointed out that overflow: visible is the cause of this issue. However, I need this to expand my menu in the selectInput based on this post: https://stackoverflow.com/a/40098855/7669809

Possible duplicate: https://stackoverflow.com/questions/3587390/how-can-i-make-text-appear-on-next-line-instead-of-overflowing — BugsArePeopleToo, Apr 13 '19 at 17:23
@Simran Thanks for pointing out this post. Although I believe you the post you mentioned is relevant to my question, that post did not mention anything about `Shiny`. I have no experience in HTML. If you don't mind, could you help me by developing the proper `div` line that I can insert to my R code? — www, Apr 13 '19 at 17:41

score 1 · Answer 1 · answered Apr 13 '19 at 17:43

1

Remove overflow: visible. This is what is making the text spill over the div. I see that here in your code:

.shiny-split-layout > div {
  overflow: visible;
}

answered Apr 13 '19 at 17:43

BugsArePeopleToo

2,976
1
15
16

Thanks for your answer. I have given you an upvote. But `overflow: visible` is necessary for me to expand the menu in my `selectInput`. At least this is what I learned from this post "https://stackoverflow.com/a/40098855/7669809". Is there a way to expand the menu while preventing text spill? – www Apr 13 '19 at 17:47
1

I would suggest looking at the generated HTML output from your code and add styling that targets more specific element. I suspect the `div` you are targeting with this style is a wrapper around other elements and needs to have its overflow left alone to behave like a container. Perhaps a more specific element needs `overflow:visible` but that strikes me as a hacky approach to what is likely a different layout need. – BugsArePeopleToo Apr 13 '19 at 17:50
Thanks for your suggestions. Good point. I will look into the `div` more. – www Apr 13 '19 at 17:53

Tonio Liebrand · Accepted Answer · 2019-04-15T20:15:02.100

I assume using fluidRow() with column() is an option for you.

Then you could use:

    fluidRow(
      column(width = 4,
        selectInput(...)
      ),
      column(width = 4,
        selectInput(...)
      )
    )

Note 1:

You can control the width of an input by the width parameter of column().

Note 2:

Sidenote: If you want to use the full width of 12, you also have to set the mainPanel() to 12, see e.g. here: https://stackoverflow.com/a/44214927/3502164

Full app - reproducible example:

library(shiny)

# Define UI
ui <- fluidPage(
  mainPanel(
    selectInput(inputId = "A", label = "This is a long lebel with lots of words", choices = letters[1:5], selected = "a"),
    selectInput(inputId = "B", label = "This is a long lebel with lots of words", choices = letters[1:5], selected = "a"),
    fluidRow(
      column(width = 4,
        selectInput(inputId = "C", label = "This is a long lebel with lots of words", choices = letters[1:5], selected = "a")        
      ),
      column(width = 4,
        selectInput(inputId = "D", label = "This is a long lebel with lots of words", choices = letters[1:5], selected = "a")
      )
    ),
      # Expand the menu in splitLayout
      # From: https://stackoverflow.com/a/40098855/7669809
      tags$head(tags$style(HTML("
                              .shiny-split-layout > div {
                                display: inline-block;
                              }
                              ")))
    )
)

# Server logic
server <- function(input, output, session){

}

# Complete app with UI and server components
shinyApp(ui, server)

Good solution. Thanks. I will reward you the bounty when the system allows me to do so. — www, Apr 16 '19 at 00:25

How to prevent the overlapping of two input labels in splitLayout, Shiny, R?

2 Answers2