Укажите отступы между строками в флажкеGroupInput

Это мое блестящее приложение:

ui.R

# values to show, or not show, these will be the 'choices' and 'selected' values
# for the checkboxGroupInput()
all_rows <- 1:25
names(all_rows) <- paste("Row", all_rows)

# data control: the checkboxes will control the data values plotted
controls <-
  list(h3("Multicolumn checkboxGroupInput"), 
       tags$div(align = 'left',
                class = 'multicol',
                checkboxGroupInput(inputId  = 'numSelector',
                                   label    = NULL,
                                   choices  = all_rows,
                                   selected = NULL,
                                   inline   = FALSE))
       ) 


ui <- fluidPage(
                tags$style(type='text/css',"
                label {font-size: 10px; }           
                .form-group {margin-top: 5px; margin-bottom: 5px;}
                .nav-tabs {font-family:'arial';font-size:20px}
                input[type=checkbox] {transform: scale(1);margin-top:1px;}
                .multicol {height: 150px; 
                          -webkit-column-count: 5; /* Chrome, Safari, Opera */
                          -moz-column-count: 5;    /* Firefox */
                          column-count: 5; 
                          -moz-column-fill: auto;
                          -column-fill: auto;}
                .btn {display:block;height: 60px;width: 40px;border-radius: 50%;} 
                #modules .checkbox label span {font-weight:bold;}
                #label {color:#fff;}
                "),                
                fluidRow(column(width = 12, controls),
                         column(width = 12, plotOutput("plot")))
                 # sidebarLayout(
                 #   position = "left",
                 #   sidebarPanel(controls),
                 #   mainPanel()
                 # )                
                )

сервер.R

server = function(input, output) { 
}

Вот как это выглядит:

Укажите отступы между строками в флажкеGroupInput

Я включу более 100 флажков с большими метками, и мне нужно удалить пробелы между строками (желтые пробелы). Не подскажете, что изменить?

Спасибо

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
0
11
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Просто добавьте .checkbox, .radio {margin: 0px} к tags$style:

tags$style(
    type = 'text/css',
    "label {font-size: 10px; }
    .form-group {margin-top: 5px; margin-bottom: 5px;}
    .nav-tabs {font-family:'arial';font-size:20px}
    input[type=checkbox] {transform: scale(1);margin-top:1px;}
    .multicol {
      height: 150px; 
      -webkit-column-count: 5; /* Chrome, Safari, Opera */
      -moz-column-count: 5;    /* Firefox */
      column-count: 5; 
      -moz-column-fill: auto;
      -column-fill: auto;
    }
    .btn {display:block;height: 60px;width: 40px;border-radius: 50%;} 
    #modules .checkbox label span {font-weight:bold;}
    #label {color:#fff;}
    .checkbox, .radio {margin: 0px}
    "
  )

Оно работает!. Однако первый столбец потерял выравнивание.

Lev 07.05.2022 02:36

Вместо этого попробуйте .checkbox, .radio {margin-top: 0px; margin-bottom: 0px;}.

Douglas Mesquita 07.05.2022 02:41

Вместо margin-top: 0px; Я использовал margin-top: 8px; и, кажется, теперь выровнено. Спасибо!

Lev 07.05.2022 02:48

Другие вопросы по теме