Improve visualization of selectInput options-CodePudding

How do I see all the selectInput options, as it is, it was bad to see (Image attached). I believe the size needs to be adjusted, but I don't know how to do that.

Executable code below:

library(shiny)

ui <- fluidPage(
  
  column(4,
        
         wellPanel(
           br(),
           splitLayout(

           numericInput("weight1", label = h5("Weight 1"), min = 0, max = 1, value = NA, step = 0.1),
          
           selectInput("maxmin", label = h5("Maximize or Minimize"),choices = list("Maximize " = 1, "Minimize" = 2), 
                       selected = "")),
           
           numericInput("weight2", label = h5("Weight 2"), min = 0, max = 1, value = NA, step = 0.1),
           
           numericInput("weight3", label = h5("Weight 3"), min = 0, max = 1, value = NA, step = 0.1),
           
           numericInput("weight4", label = h5("Weight 4"), min = 0, max = 1, value = NA, step = 0.1))),
  
  hr(),
  
  column(8,
         tabsetPanel(tabPanel("table1", DTOutput('table1')))))

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

shinyApp(ui = ui, server = server)

CodePudding user response：

splitLayout adds a CSS property overflow: auto. This causes the height to be fixed. If dynamic content is added, there is a scroll pane, only at the wrong place (try scrolling your dropdown menu).

Instead of using splitLayout, you can nest a fluidRow in there with two column elements, each with a width of 6.

You're also wrapping your sidebar and your content into two column objects, one with a width of 4, the other with a width of 8. Consider using sidebarPanel for this use case instead.

The final code could look like this:

library(shiny)

ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(
      fluidRow(
        column(
          width = 6,
          numericInput("weight1", label = h5("Weight 1"), min = 0, max = 1, value = NA, step = 0.1)
        ),
        column(
          width = 6,
          selectInput("maxmin", label = h5("Maximize or Minimize"),choices = list("Maximize " = 1, "Minimize" = 2), selected = "")
        )
      ),
      numericInput("weight2", label = h5("Weight 2"), min = 0, max = 1, value = NA, step = 0.1),
      numericInput("weight3", label = h5("Weight 3"), min = 0, max = 1, value = NA, step = 0.1),
      numericInput("weight4", label = h5("Weight 4"), min = 0, max = 1, value = NA, step = 0.1),
    ),
    mainPanel(
      p("sth should be there")
    )
  )
)

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

shinyApp(ui = ui, server = server)

CodePudding user response：

Here is a possible solution with sidebar:

library(shiny)
library(shinydashboard)
library(DT)


ui <- fluidPage(
  
  # Your title
  titlePanel("My App!"),
  
  sidebarLayout(
    
    # Sidebar 
    sidebarPanel(
      fluidRow(column(width = 8,
                      fluidRow(column(4, numericInput("weight1", label = h5("Weight 1"), min = 0, max = 1, value = NA, step = 0.1)),
                               column(4, selectInput("maxmin",
                                                     label = h5("Maximize or Minimize"),
                                                     choices = list("Maximize " = 1, "Minimize" = 2), 
                                                     selected = "")
                                      )
                               )
                      )
               ),
      hr(),
      fluidRow(
        column(width = 8,
               numericInput("weight2", label = h5("Weight 2"), min = 0, max = 1, value = NA, step = 0.1),
               numericInput("weight3", label = h5("Weight 3"), min = 0, max = 1, value = NA, step = 0.1),
               numericInput("weight4", label = h5("Weight 4"), min = 0, max = 1, value = NA, step = 0.1)
               )
        )
      ),
    # Table
    mainPanel(
      tabsetPanel(tabPanel("table1", DTOutput('table1'))
                  )
      )
    )
  )

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

shinyApp(ui = ui, server = server)