R Shiny DT render text and input without linebreaks

Question

I am trying to render any kind of R Shiny input in a Shiny DT, however I would like to avoid the linebreaking. If I concatenate some text and the html tags with the shinyInput function both the text and the inputs are rendered, but a linebreak happens before and after the input.

I think that the root cause for this is the div tag, but googling it seems that adding the style="display:inline;" css code should solve it, but it doesn't, it even breaks the width definition.

do you have any idea how to get the text before, the div, and the text after on the same cell?

below some code to play with.

library(DT)

ui <- basicPage(
  h2("The mtcars data"),
  DT::dataTableOutput("mytable")
)

server <- function(input, output) {
  
  shinyInput <- function(FUN, len, id, ...) {
    inputs <- character(len)
    for (i in seq_len(len)) {
      inputs[i] <- as.character(FUN(paste0(id, i), ...))
    }
    inputs
  }
  
  mtcarsx <- data.frame(mtcars, newvar=
                         paste0(
                           "tex before "
                           ,shinyInput(checkboxInput,nrow(mtcars),"mychbx",label="",value=FALSE,width=NULL),
                           " text after"))

  
  output$mytable = DT::renderDataTable({
    DT::datatable(mtcarsx, 
                  escape = FALSE, 
                  selection = 'none', 
                  rownames = FALSE, 
                  extensions = 'RowGroup', 
                  options = list(searching = FALSE, 
                                 ordering  = FALSE,
                                 rowGroup = list(dataSrc=c(1)),
                                 columnDefs = list(list(visible=FALSE, targets=c(1)))
                                 ))
  })
  
}

shinyApp(ui, server)

Answer 1

You are right, you need to change the divs that wrap the checkbox element to display:inline . You say that this doesn't solve it as it breaks the width definition. Perhaps I'm missing something? I do not see a change in the widths column.

tags$style("
             #mytable tr td div.form-group {
               display: inline;
             }
             #mytable tr td div.checkbox {
               display: inline; 
             }
             #mytable tr td div.checkbox label {
               padding: 0;
             }
             #mytable tr td div.checkbox input {
               position: relative;
               margin: 0;
             }")

If the text that goes before and after are constant, you could use the css pseudo classes after and before to add that content.