Как уменьшить отступ внутри блестящих полей ввода?

Question

Есть много вопросов о том, как уменьшить / расширить отступы и поля за пределами полей ввода, но я не могу найти ни одного о том, как уменьшить отступ значения / текста внутри и самой границы поля.

Например, стандартное заполнение выглядит так:

Я хочу изменить его на:

Но я не могу найти подходящих CSS свойств, чтобы изменить его. Возможно ли это?

Answer 1

Просто добавьте это как первый аргумент для вашего fluidPage:

tags$head(
    tags$style(HTML(
        ".form-control { height:auto; padding:3px 5px;}"
    ))
)

Первый отступ (3px) относится к верху и низу, второй (5px) справа и слева : вы можете изменить их так, как вы sh, например, чтобы уменьшить их еще больше, вы можете указать padding:1px 2px; или даже 0 или что угодно .

---

Пояснение

Когда вы открываете приложение Shiny в браузере, вы можете щелкнуть правой кнопкой мыши любой элемент, который хотите изменить, выбрать «Проверить» и в инструментах разработчика проверить соответствующие стили, чтобы узнать, откуда берутся его атрибуты CSS. Я видел, что заполнение моих полей textInput было стилизовано классом form-control, поэтому мне нужно было изменить это.

Я думаю, что самый простой способ изменить CSS в Shiny - это поместить тег стиля в теге заголовка в начале страницы, как я сделал выше, но см. здесь , чтобы узнать о других параметрах и более подробно об этом.

Answer 2

Не уверен, что для этого есть свойство CSS. Вы можете использовать класс input-sm:

library(shiny)

smallInput <- function(tag) {
  tag$children[[2]] <- htmltools::tagAppendAttributes(tag$children[[2]], class = "input-sm")
  tag
}

ui <- fluidPage(
  smallInput(textInput("small", "small", "")),
  textInput("normal", "normal", "")
)

server <- function(input, output, session) {
}

shinyApp(ui, server)