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)
}
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;
}