user2957945
user2957945

Reputation: 2413

Control the format of the inputs when using wellPanel

How can the shinydashboard inputs be formatted when wrapped in wellPanel so that they look the same as without using wellPanel. In the image below, the input box within the wellPanel is indented slightly more to the right and is a different size. (I can control the size, somewhat, by manually changing the style but not automatically)

enter image description here

Code:

library(shinydashboard)
library(shiny)

ui <- dashboardPage(
        dashboardHeader(),
        dashboardSidebar(width=500,
              sidebarMenu(id = "id1",
                    textInput("a", "AAA"),  
                     wellPanel(
                        textInput("b", "BBB")  
                     )
        )),
        dashboardBody(
            tags$head(
              tags$style(HTML('.well .shiny-input-container { width: 250px; }'))
              ))
        )

runApp(shinyApp(ui, function(input, output) {}))

Upvotes: 0

Views: 98

Answers (1)

Irfan
Irfan

Reputation: 131

try adding this style argument to your well panel it should work

 wellPanel(style = "padding-left:0px;",
                                     textInput("b", "BBB")  
                                 )

example output: enter image description here

full code:

library(shinydashboard)
library(shiny)

ui <- dashboardPage(
    dashboardHeader(),
    dashboardSidebar(width=500,
                     sidebarMenu(id = "id1",
                                 textInput("a", "AAA"),  
                                 wellPanel(style = "padding-left:0px;",
                                     textInput("b", "BBB")  
                                 )
                     )),
    dashboardBody(
        tags$head(
            tags$style(HTML('.well .shiny-input-container { width: 250px; 
            
            
            }
                            
                            
                            
                            '))
        ))
)

runApp(shinyApp(ui, function(input, output) {}))

Upvotes: 1

Related Questions