Изменить R Размер файла ввода виджета

Question

Итак, у меня есть numInputs, и я хочу изменить размер текста числа, которое действительно появляется внутри текстового поля.

Как я могу это достичь?

Answer 1

Простейший способ, как говорит @warmoverflow, - использовать CSS. Ниже приведены два примера добавления CSS в виджет, первый из которых будет применяться только к элементу с указанным идентификатором, а второй будет для всех элементов номера типа. Я предполагаю, что это numericInput вместо numInputs, но он должен работать с любым другим входным виджетами.

Вариант 1. Изменение CSS для конкретного элемента

runApp(list(
    ui = shinyUI(fluidPage(
    tags$style("#myNumericInput {font-size:50px;height:50px;}"), 
    numericInput("myNumericInput", "Observations:", 10, min = 1, max = 100), 
    numericInput("otherNumericInput", "Observations 2:", 10, min = 1, max = 100) 
)), 
    server = shinyServer(function(input, output, session) { 
    }) 
)) 

Вариант 2. Изменяет CSS всех элементов типа number.

runApp(list(
    ui = shinyUI(fluidPage(
    tags$style("[type = 'number'] {font-size:50px;height:50px;}"), 
    numericInput("myNumericInput", "Observations:", 10, min = 1, max = 100), 
    numericInput("otherNumericInput", "Observations 2:", 10, min = 1, max = 100) 
)), 
    server = shinyServer(function(input, output, session) { 
    }) 
)) 

Пожалуйста, обратите внимание, что в дополнении к изменению размера шрифта, я также изменил Heigh, это, чтобы убедиться, что коробка будет достаточно большой, чтобы показать номер с другим размером.

Кроме того, вы можете рассмотреть возможность использования отдельного файла .css для размещения всех ваших пользовательских стилей.

Answer 2

Спасибо, я просто положил

input[type="number"] { 
    font-size: 18px; 
} 

в мои теги стилей заголовков CSS, и она работала.

Answer 3

Просто общее замечание, что может быть интересно другим, посещающих этот пост:

Оказывается, что tags$style('#inputId {}') подход не работает, если ваш inputId имеет в нем ..

• Например: следующий не меняет размер текста входного текста:

  tags$style("#myNumeric.Input {font-size:8px;}"), 
  numericInput("myNumeric.Input", "Observations:", 10, min = 1, max = 100) 
  

  ... но следующие работает:

  tags$style("#myNumericInput {font-size:8px;}"), 
  numericInput("myNumericInput", "Observations:", 10, min = 1, max = 100) 
  

  • Примечание: _ работает нормально в имени inputId.

Если вы настаиваете на сохранении . ваше имя inputId, попробуйте добавить аргумент стиля непосредственно к функции ввода вместо:

numericInput("myNumeric.Input", "Observations:", 10, min = 1, max = 100, 
       style = "font-size:8px;")