2

So, I wrote a Shiny app showing some checkboxes and radio buttons. For saving screen space I want to organize the checkbox answers in 2 columns. I have followed the advices given here and arrived to an acceptable interface:

Snapshot

But as you can see, the first column is vertically displaced (I have used label=NULL).Is there any way to have both columns vertically aligned when there's no label?

The relevant piece of code:

shinyUI(
navbarPage("navbar",
tabPanel(strong("Buscador"),value="panel2",
tags$head(tags$style(HTML(".multicol{font-size:12px;
height:auto;
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}"))),
fluidRow(column(4,
                   strong(p("Indexada en")),
                   tags$div(align = "left", 
                            class = "multicol",
                   checkboxGroupInput("index",
                                      label=NULL,
                                      choices = list("PubMed©" = 3,
                                                     "Embase©" = 4,
                                                     "CINAHL©" = 5,
                                                     "Cuiden©" = 6,
                                                     "Scopus©" = 7,
                                                     "BVS-Lilacs©" = 8))
                   )))))

Thanks in advance

Community
  • 1
  • 1
cutariechu
  • 38
  • 1
  • 5

1 Answers1

4

There is a small margin on the top of the first checkbox. Use the code below to remove it. Note the last line which is the only line that I added.

shinyUI(
    navbarPage("navbar",
               tabPanel(strong("Buscador"),value="panel2",
                        tags$head(tags$style(HTML(".multicol{font-size:12px;
                                                  height:auto;
                                                  -webkit-column-count: 2;
                                                  -moz-column-count: 2;
                                                  column-count: 2;
                                                  }

                                                  div.checkbox {margin-top: 0px;}"))),
Xiongbing Jin
  • 11,779
  • 3
  • 47
  • 41
  • Thank you, that was indeed the key. In a lucky google search I found this post (https://groups.google.com/forum/#!topic/shiny-discuss/0hNmOFXK0Yo) where they discuss doing something similar in CSS – cutariechu Apr 27 '16 at 19:39