shinyIncubator matrixInput with colnames alignment problem

[Patrick Toche]

Dear all,

I'm just starting to play around with the matrixInput function of the shinyIncubator package, and it's a great tool!

By default, matrixInput does not show the colnames. I have figured out how to display them by tweaking the tags, but I cannot 1) align the vertical separator and 2) center the colnames inside the cell.

An example is here:

library("shiny")
runGist("https://gist.github.com/anonymous/7488653")

You can see in the css tags$style below that I have been able to 'un-hide' the colnames and to center text inside table cells for all except the un-hidden colnames. There is also a (possibly related) weird problem of alignment of the vertical separator. The vertical separator for colnames is squeezed to the left, while the vertical separator for the rest of the input table is squeezed to the right.

Suggestions appreciated, thanks!


# ui.R

library("shiny")
library("shinyIncubator")

# initialize data with colnames
df <- data.frame(matrix(c("0","0"), 1, 2))
colnames(df) <- c("first", "second")

shinyUI(
  pageWithSidebar(
  
    headerPanel("Alignment Problem Inside matrixInput")
    ,
    sidebarPanel(

      # customize display settings
      tags$head(
        tags$style(type='text/css'
          , ".data {background-color: rgb(255,255,255);}" # make inside of cells white
          , ".table th, .table td {text-align: center;}" # works except for colnames
          , ".tableinput .hide {display: inline; width:100%}" # un-hide colnames
        )
      )
      ,
      matrixInput(inputId = 'data', label = '', data = df)
      , 
      helpText(h4("I have added colnames to the initial dataframe and unhidden them with display option inside the class 'hide'. Unfortunately they are not aligned and I can't figure out which option to tweak. I would like to align and center the data columns with the column of colnames."))
    )
    ,
    mainPanel()
  )
)

# server.R
shinyServer(function(input, output) {})

[Patrick Toche]

Can anyone see how to control the alignment of the colnames in matrixInput?

It looks like there is an extra column inserted on the right next to the colnames that's preventing the colnames from centering and aligning with the subsequent rows. It's not very clear when I "inspect element": it shows the end of the second colname before a possible third, but it doesn't allow me to click or select the empty space that lies to the right of it, so it may or may not be a third column...

I seem to have found the parameter that affects the colnames' style: but while I can change the color, I cannot align to the right. It looks like there's a third "invisible" column or something. I'm puzzled.

I created the initial matrixInput with the following:

df <- data.frame(matrix(c("0","0"), 1, 2))

colnames(df) <- c("first column", "second column")

The colnames and the numbers 0 and 0 are not aligned. I'm able to control the alignment of the numbers (left, center, right), but I can't seem to be able to control the alignment of the colnames. And this while I can change their color, font-size, etc.. for instance with:

".tableinput .hide {display: inline; color: red; text-align: center;}"

In the above, display and color work but text-align doesn't.

Likewise if instead I set:

".table-bordered colgroup + thead tr:first-child th:last-child {text-align: right; color:red;}"

The latter controls the second colname only, while the former controls both colnames.

I copy below the matrixInput function, for reference (obtained with shinyIncubator::matrixInput)

Clearly the class='hide' is what hides the column names by default. I 'un-hid' the names by tweaking the css with: ".tableinput .hide {display: inline;}"

Relevant piece of code:

tags$thead(
          class = 'hide',
          tags$tr(
            lapply(names(data), function(name) {
              tags$th(name)
            })


Ful code for matrixInput:

function(inputId, label, data) {
  addResourcePath(
    prefix='tableinput',
    directoryPath=system.file('tableinput',
                              package='shinyIncubator'))
 
  tagList(
    singleton(
      tags$head(
        tags$link(rel = 'stylesheet',
                  type = 'text/css',
                  href = 'tableinput/tableinput.css'),
        tags$script(src = 'tableinput/tableinput.js')
      )
    ),
    
    tags$div(
      class = 'control-group tableinput-container',
      tags$label(
        class = "control-label",
        label,
        tags$div(
          class = 'tableinput-buttons',
          tags$button(
            type = 'button', class = 'btn btn-mini tableinput-settings hide',
            tags$i(class = 'icon-cog')
          ),
          HTML('<a href="#" class="tableinput-plusrow"><i class="icon-plus-sign"></i></a>'),
          HTML('<a href="#" class="tableinput-minusrow"><i class="icon-minus-sign"></i></a>')
        )
      ),
      tags$table(
        id = inputId,
        class = 'tableinput data table table-bordered table-condensed',
        tags$colgroup(
          lapply(names(data), function(name) {
            tags$col('data-name' = name,
                     'data-field' = name,
                     'data-type' = 'numeric')
          })
        ),
        tags$thead(
          class = 'hide',
          tags$tr(
            lapply(names(data), function(name) {
              tags$th(name)
            })
          )
        ),
        tags$tbody(
          lapply(1:nrow(data), function(i) {
            tags$tr(
              lapply(names(data), function(name) {
                tags$td(
                  div(tabindex=0, as.character(data[i,name]))
                )
              })
            )
          })
        )
      ),
      tags$div(
        class = 'tableinput-editor modal hide fade',
        tags$div(
          class = 'modal-header',
          HTML('<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>'),
          tags$h3(label)
        ),
        tags$div(
          class = 'modal-body',
          
          HTML('
<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label">Rows</label>
    <div class="controls">
      <input type="number" class="tableinput-rowcount">
    </div>
  </div>
  <div class="control-group">
    <label class="control-label">Columns</label>
    <div class="controls">
      <input type="number" class="tableinput-colcount">
    </div>
  </div>
</form>'
          )
        ),
        tags$div(
          class = 'modal-footer',
          tags$a(href = '#', class = 'btn btn-primary tableinput-edit', 'OK'),
          tags$a(href = '#',
                 class = 'btn',
                 'data-dismiss' = 'modal',
                 'aria-hidden' = 'true',
                 'Cancel')
        )
      )
    )
  )
}

[Patrick Toche]

so a few hours later, here is the trick:

".tableinput .hide {display: table-header-group;}"

where table-header-group replaces inline.

I found this here:

http://www.w3schools.com/cssref/pr_class_display.asp

When I did {display: inline;} I was using intuition. I didn't realize that there was a whole variety of options for display.