shinyWidgets icon indicating copy to clipboard operation
shinyWidgets copied to clipboard

knobInput shows Input in a weird on a page

Open Dobrokhotov1989 opened this issue 3 years ago • 0 comments

Hi,

I've tried to set a knobInput width to 150px, I faced an issue that it did not show the input value. However, when I prepared reprex, it turns, that if the width is greater than some number (in px) it starts putting the input value at some weird place on the page. However, it works just fine with % for width and either px or % for height



library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyWidgets)

# Define UI for application that draws a histogram
ui <- shinydashboardPlus::dashboardPage(

    # Application title
    header = shinydashboardPlus::dashboardHeader(title = "Old Faithful Geyser Data"),

    # Sidebar with a slider input for number of bins 
    sidebar = shinydashboardPlus::dashboardSidebar(),
    body = shinydashboard::dashboardBody(
        fluidRow(
            
            shinydashboardPlus::box(
                title = "Width Percent",
                shinyWidgets::knobInput(
                    "n_of", 
                    label = "Number of years:",
                    min = 20, 
                    max = 200, 
                    step = 20,
                    value = 100,
                    displayPrevious = TRUE, 
                    lineCap = "round",
                    immediate = FALSE,
                    post = "yr",
                    displayInput = TRUE,
                    width = "75%"
                )
            ),
            
            shinydashboardPlus::box(
                title = "Width Pixel",
                shinyWidgets::knobInput(
                        "n_of_", 
                        label = "Number of years:",
                        min = 20, 
                        max = 200, 
                        step = 20,
                        value = 100,
                        displayPrevious = TRUE, 
                        lineCap = "round",
                        immediate = FALSE,
                        post = "yr",
                        displayInput = TRUE,
                        width = "120px"
                    )
            )),
           fluidRow( 
            shinydashboardPlus::box(
                title = "Height",
                shinyWidgets::knobInput(
                    "n_of__", 
                    label = "Number of years:",
                    min = 20, 
                    max = 200, 
                    step = 20,
                    value = 100,
                    displayPrevious = TRUE, 
                    lineCap = "round",
                    immediate = FALSE,
                    post = "yr",
                    displayInput = TRUE,
                    height = "150px"
                )
            )
        )
    )
        


)

# Define server logic required to draw a histogram
server <- function(input, output) {

}

# Run the application 
shinyApp(ui = ui, server = server)

Dobrokhotov1989 avatar May 21 '21 08:05 Dobrokhotov1989