Checkboxes Not Able to Be Clicked/Unclicked

[abresler]

There seems to be an issue with users selecting check boxes. It appears to have popped up in PivotTable wrappers and d3 wrappers. Here is my most recent example. Pardon the long code due to th custom function

get_nba_player_game_log_stats <-
    function(player, season , season.type = 'Regular Season') {
        packages <-
            c('dplyr', 'magrittr', 'jsonlite', 'stringr', 'tidyr', 'lubridate', 'readr')
        lapply(packages, library, character.only = T)
        players <-
            read_csv('https://raw.githubusercontent.com/abresler/si_hackathon/master/data/nba/all_player_data.csv')

        chosen.player <-
            player

        playerID <-
            players %>%
            dplyr::filter(player == chosen.player) %>%
            dplyr::select(player_id) %>%
            .$player_id %>%
            as.numeric()

        base <-
            'http://stats.nba.com/stats/playergamelog?LeagueID=00&PlayerID='

        id.season.type <-
            season.type %>%
            gsub('\\ ','\\+', .)

        season.end <-
            season + 1

        id.season <-
            paste0(season,"-",
                         season.end %>%
                            substr(3,4))

        url.data <-
            base %>%
            paste0(playerID,'&Season=', id.season, '&SeasonType=',id.season.type)

        if(season %>% length > 1){
            results.data <-
                data_frame()
            for(u in 1:length(url.data)){
                url <-
                    url.data[u]
                s <-
                    id.season[u]
                data <-
                    url %>%
                    fromJSON(simplifyDataFrame = T,flatten = T)
                rd <-
                    data$resultSets$rowSet %>%
                    data.frame(stringsAsFactors = F) %>%
                    tbl_df

                names(rd) <-
                    data$resultSets$headers %>%
                    unlist %>%
                    tolower() %>%
                    gsub('\\_','.',.)

                rd[,rd %>%
                                            dplyr::select(min:plus.minus) %>%
                                            names] %<>% apply(2, function(x)
                                                as.numeric(x))

                rd %<>%
                    mutate(
                        game.date = mdy(game.date),
                        win = rd$wl %>% grepl('W',.),
                        location.home = rd$matchup %>%
                            grepl("vs.",.),
                        id.team.player = rd$matchup %>%
                            substr(1, 3),
                        id.team.opponent =
                            rd$matchup %>%
                            substr(
                                start = rd$matchup %>% nchar - 2, stop = rd$matchup %>% nchar
                            ),
                        id.season    = s)
                results.data %<>%
                bind_rows(rd)
            }
        } else {
            data <-
            url.data %>%
            fromJSON(simplifyDataFrame = T,flatten = T)

        results.data <-
            data$resultSets$rowSet %>%
            data.frame(stringsAsFactors = F) %>%
            tbl_df

        names(results.data) <-
            data$resultSets$headers %>%
            unlist %>%
            tolower() %>%
            gsub('\\_','.',.)

        results.data[,results.data %>%
                                    dplyr::select(min:plus.minus) %>%
                                    names] %<>% apply(2, function(x)
                                        as.numeric(x))

        results.data %<>%
            mutate(
                game.date = mdy(game.date),
                win = results.data$wl %>% grepl('W',.),
                location.home = results.data$matchup %>%
                    grepl("vs.",.),
                id.team.player = results.data$matchup %>%
                    substr(1, 3),
                id.team.opponent =
                    results.data$matchup %>%
                    substr(
                        start = results.data$matchup %>% nchar - 2, stop = results.data$matchup %>% nchar
                    ),
                pts.per.min = pts/min,
                id.season
            )

        }
        results.data %<>%
            arrange(game.date) %<>%
            mutate(season = (id.season %>% substr(1,4) %>% as.numeric) + 1)
        return(results.data)
    }
packages <- 
    c('materializeR','scatterMatrixD3', 'htmltools')
lapply(packages, library, character.only = T)
thad.data <- 
    get_nba_player_game_log_stats(player = "Thaddeus Young",season = 2014)

title <-
    c('Thaddeus Young, 2014-15 Gamelog D3 Scatter Matrix')

page <-
    thad.data %>%
    rename(outcome = wl) %>%
    mutate(location = ifelse(location.home == T, "Home", "Away")) %>%
    select(outcome:pts,win:id.team.player, id.team.opponent) %>%
    scatterMatrix() %>%
    tagList(
        materialize(),
        #tags$style(".rpivotTable select {display:inherit; !important}"),
        tags$h5(title)
        ,.)

page %>%
    html_print

[abresler]

Here is the pivottable js example - same checkbox issue

packages <-
    c('rpivotTable', 'materializeR', 'htmltools')

lapply(packages, library, character.only = T)
all_data <-
    'https://raw.githubusercontent.com/abresler/si_hackathon/master/data/nfl/all_nfl_drafted_player_data.csv' %>% 
    read_csv
table <-
    all_data    %>%
    select(-url.player, -url.year.draft) %>%
    rpivotTable(rows = c('year.draft'),
                            cols = c('type.pos'),
                            vals = "selections.all_pro",
                            aggregatorName = "Sum",
                            rendererName = "Table Barchart")

title <-
    c('Exploring the NFL Draft, 1936 - 2015')
table.page <-
    table %>%
    tagList(
        materialize(),
        tags$style(".rpivotTable select {display:inherit; !important}"),
        tags$h5(title)
        ,.)

table.page %>%
    html_print

[abresler]

With a little wrangling it appears that something in the CSS natively is not allowing it to know that a click clicks the check box, when you move the positioning to get the ugly check boxes back on the side it works again. Not sure if this is a start to an answer or not

[timelyportfolio]

Probably here is a much better spot than Twitter to have this discussion. This issue https://github.com/Dogfalo/materialize/issues/1376 explains the problem. A correctly formatted label is required for the checkbox to work correctly.

This can potentially pose a problem for auto rendering.

Here is a working example in R with htmltools.

browsable(
  tagList(
    tags$input(type="checkbox", id="checkbox1")
    ,tags$label("for"="checkbox1", "test")
    ,materialize()
  )
)

[abresler]

Yea, I am sure there is a hack but it may have to be a more overarching thing -- not sure how you feel but this really is a such a nice UI may be worth thinking about it, happy to try to help

[timelyportfolio]

Could employ the tasks to loop through all checkboxes and assign id if doesn't exist and add for = id in all the adjacent labels. Or remove the checkbox behavior, but then we would lose all the pretty.

[abresler]

I think the d3 js file would need to be rewritten as one answer

[abresler]

Your hack works! Question is there a way to do it as an override or in htmltools?

[timelyportfolio]

One solution would be to just override the CSS for those known checkboxes, such as this for rpivotTable and then we only lose the pretty checkboxes where we know they won't work.

browsable(
  tagList(
    tags$style(
      ".rpivotTable input[type='checkbox'] { 
          position: inherit;
          left: inherit;
          !important
       }"
    ),
    rpivotTable(as.data.frame(Titanic)),
    materialize()
  )
)

[abresler]

Thats a good short term solution

[abresler]

For d3scattermatrix change .rPivotTable to .Scattermatrix also works. Not pretty but thats ok for now!

[wendellpereira]

Happening with me but I'm using the label corectlly: <div class="input-field col s12"> <input id="taskDone" type="checkbox"> <label for="taskDone"> Done </label> </div>

[timelyportfolio]

Sorry to hear. I unfortunately will no longer be able to support this repo. Thanks for using, but there has not been enough interest to justify keeping it maintained. I hope you understand.