What is the best way to adjust the row height of a DT::datatable in a Shiny app that includes a checkbox column?

After finding this solution, I successfully implemented a column of checkboxes in a datatable using Shiny. However, I encountered an issue where the row heights could not be adjusted with DT::formatStyle() when the checkbox column was present. Below is a simplified example:

library(shiny)
library(DT)
runApp(
  list(ui = fluidPage(
    column(width = 6,
           dataTableOutput("cars_table")),
    column(width = 6,
           dataTableOutput("cars_table_check"))),
  server = function(input, output, session) {
    
    shinyInput <- function(FUN, id, num, ...) {
      inputs <- character(num)
      for (i in seq_len(num)) {
        inputs[i] <- as.character(FUN(paste0(id, i), label = NULL, ...))
      }
      inputs
    }
    
    output$cars_table <- renderDataTable({
      formatStyle(datatable(
        mtcars,
        selection = 'none', escape = F),
        0, target = "row", lineHeight = "50%")
    })
    
    output$cars_table_check <- renderDataTable({
      formatStyle(datatable(
        cbind(Pick = shinyInput(checkboxInput, "srows_", nrow(mtcars), value = NULL, width = 1), mtcars),
        options = list(drawCallback= JS('function(settings) {Shiny.bindAll(this.api().table().node());}')),
        selection = 'none', escape = F),
        0, target = "row", lineHeight = "50%")
    })
  })
)

Here is how it looks:

https://i.sstatic.net/38sGN.png

Answer №1

To customize the appearance of your UI, you can utilize a style tag in your code. This enables you to make adjustments to the underlying CSS as needed. For instance, if you want to eliminate margins around checkboxes, incorporating a lineheight property may not suffice.

    ui = fluidPage(
        tags$style(
            HTML(
                "
            td > div.form-group > div.checkbox {
               margin:0px;
               bottom:10px;
            }

            td > div.form-group {
                position:absolute;
            }
            "
            )
        ),
...

https://i.sstatic.net/1EYcn.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the secret to creating double-width characters that are precisely double the size of single-width characters?

When using terminal, many fonts that support double-width characters display them as exactly twice the width of single-width characters. For instance, these two lines should appear with the same width: あああ aaaaaa However, this consistency is not ma ...

Issue with Tooltipster plugin causing jQuery function not to trigger upon clicking the link within the tooltip

Recently, I've been experimenting with a jquery plugin called Tooltipster by inserting some HTML into the tip with an href link. The problem arises when I try to add a class to the href and fire a jquery function upon clicking it. No matter how much I ...

Pressing the CTRL key and then the PLUS key simultaneously activates the zoom in

Is there a way to capture Ctrl + + / Ctrl + - events in Firefox using the following code: window.onkeydown = function(event) { if(event.ctrlKey && event.keyCode == 61) CtrlPlus(); if(event.ctrlKey && event.keyCode == 169) // or ...

Switching a Character String into a Date and Time Format

I'm attempting to import a dataset into R and convert the type of a column to datetime. Using strptime, as.POSIXct, or as.Date for various scenarios should do the trick; Here's the code snippet I have: a <- structure(list(DATE = c("01/01 ...

Adjust the size of CSS sprite pixel art without blurring the image

I am attempting to enlarge CSS sprite pixel art images and need to completely eliminate anti-aliasing/image smoothing. After reading this post on the subject: Disable antialising when scaling images, I experimented with the following CSS: image-rendering ...

Is it possible to incorporate two ng-repeat directives within a single td element in a table?

The results so far Expected outcome Please advise me on how to incorporate two ng-repeats within one td. When I use a span tag afterwards, the expected result is not achieved. I have used one ng-repeat in the td and the other in a span tag, which is why t ...

Guide to making a sliding animation appear when hovering over a menu using jQuery

I have noticed a common feature on many websites, but I am unsure of how to explain it. At times, there are sliding elements in the navigation, like an arrow under menu items that moves when the user hovers over different links. Here is an example of a s ...

Populate HTML Table with Array Elements

I need assistance with inserting array values into an HTML table. The table should have 5 columns and enough rows to accommodate all the information. I envision it looking like this: 1 | 2 | 3 | 4 | 5 11 | 22 | 33 | 44 | 55 111 | 222 | 333 | 444 | 555 ...

The behavior of table elements is distinct when using align="center" compared to utilizing CSS text-align: center

In my table setup, I have a parent table with a width of 100% and a child table with a width of 300px. I attempted to center the child table using CSS by setting text-align: center; (https://jsfiddle.net/wrzo7LLb/1/) <table class="body"> <tr> ...

Guide to activating the submit button when a radio button is selected

Here is the code snippet for an edit form <form [formGroup]="editForm" (ngSubmit)="saveUser()" novalidate> <div class="form-group"> <label class="block">Gender</label> <div class="clip-radio radio-primary"> &l ...

Using loops to simulate the effects of :hover in Javascript for each child div element, as an

For a while now, I've been utilizing the code below (or something similar) to showcase information on specific posts: Html: <div class="main"> <div class="info"> <div>Words</div> <div>Words</div> < ...

Unable to open modal using a button in PHP

<?php $result = mysqli_query($con, $sql); while ($row = mysqli_fetch_array($result)) { echo '<tr><td>'; echo '<h5 style="margin-left:6px; color:black;">' . $row['id'] . '</h5> ...

Positive lookbehind in Regex to match all words that are preceded by another word

I'm currently working with the stringr package in R and I'm trying to replace all values that come after the word except with the word MATCH. I encountered an error message saying ' . . . must have a bounded maximum length (U_REGEX_LOOK_BEHI ...

execute a C++ application within a web browser using HTML

Recently, I created a captcha program using c++ and sfml. Now, I'm interested in running this program on an HTML page. Can anyone provide guidance on how to accomplish this? ...

Having trouble with loading a background image from an external CSS file in Django

I am encountering an issue when attempting to load an image through external CSS on my Django project. While it works fine with inline CSS, I am curious as to why it fails with an external stylesheet. Any assistance on this matter would be greatly apprecia ...

Code for a succinct MySQL query in PHP using associative arrays

I'm trying to query multiple times like this: <?php $datacenter=mysqli_connect('localhost','user','pass','db'); After the DB connection, I want to count the number of votes for options 1, 2, and 3. $r11= ...

Concealing particular rows within a table until the Ajax request finishes

On my HTML table, I have certain rows that I don't want to show when the page initially loads. Instead, I plan on making an Ajax request after the page has loaded to retrieve values that will fill in these hidden rows. Therefore, I only want to reveal ...

Looking for a skilled JavaScript expert to help create a script that will automatically redirect the page if the anchor is changed. Any t

Seeking a Javascript expert, In my custom templates, I have used a link as shown below: <a href='http://www.allbloggertricks.com'>Blogging Tips</a> I would like the page to redirect to example.com if the anchor text is changed from ...

Whenever my code is used within Google Sites, it triggers the opening of a new and empty tab

When using this code inside an HTML box in Google Sites, a problem arises. It seems to work perfectly fine in Internet Explorer and Chrome when saved to an HTML file. However, within Google Sites, it unexpectedly opens a new tab with no data. The code st ...

Centering "Label - Value" without tables in web design

It's common to have multiple labels (such as name, age, color) and a corresponding value for each one. One way to ensure that the values (for example Steve, 19, Red) all start in the same horizontal position is by organizing them in a 2 column, 3 row ...