Compatibility between shinymobile and knobInputs from shinywidget

Question

I wanted to have a circular input in a shiny application designed for mobile use. So I wanted to use the knobInput from the shinywidget package in a shiny app developed with the shinymobile package. The problem is that I can't see the knobInput value in the middle of the input as it should be.

I've reproduced a simple, reproducible example using the knobInput function in a shinymobile application. Do you know where the problem might be coming from and is there a way to get around it?

if (interactive()) {
  
  library("shiny")
  library("shinyWidgets")
  library(shinyMobile)
  
  ui = f7Page(
    
  f7Tabs(
    animated = TRUE,
    id = "Tabs",
    f7Tab(
      tabName = "test_knobInput",
      title = "knobInput",
      icon = icon("home"),
      knobInput(
        inputId = "myKnob",
        label = "Display previous:",
        value = 50,
        min = -100,
        displayPrevious = TRUE,
        fgColor = "#428BCA",
        inputColor = "#428BCA"
        )
    )
  )
  )
  
  server <- function(input, output, session) {
  }
  
  shinyApp(ui = ui, server = server)
  
}

Answer 1

I found a solution by modifying the css properties (width, height, margin-top and margin-left) of the knobInput. The problem probably comes from compatibility with the css layers of the f7 framework used by shinymobile.

    
input#myKnob{
  height: 45px !important;
  width: 50px !important;
  margin-top: -125px !important;
  margin-left: 75px !important;
}