[Bug]: Not all CSS properties work in text_extra()

[PhilippSchulz1988]

Guidelines

• I agree to follow this project's Contributing Guidelines.

Project Version

0.2.1

Platform and OS Version

Ubuntu 20.04.1

Existing Issues

No response

What happened?

I have a shiny app with a css style-sheet. Within the shiny app i use reactable and reactable.extras to capture text inputs.

library(shiny)
library(dplyr)
library(reactable)
library(reactable.extras)

df <- tibble(text_col = rep(NA, 5))

tweak_css <- function(file = "style.css") {

  tags$link(rel= "stylesheet",
            type = "text/css",
            href = file) |>
            tags$head()

}


shinyApp(
  ui = fluidPage(
    tweak_css(),
    reactable_extras_dependency(),
    reactableOutput("react"), 
    dataTableOutput("out")
  ),
  server = function(input, output) {
    rv <- reactiveValues(data = df)
    
    
      
    output$react <- renderReactable({
      reactable(
        rv$data,
        
        columns = list(
          
          text_col = colDef(
          cell = text_extra(id = "text", 
                            class = "text-extra"))
        )
        
      )
    })
    
    text_d <- reactive({ input$text}) %>% debounce(3000)    
    
    observeEvent(text_d(), {
      
      rv$data[text_d()$row, text_d()$column] <- text_d()$value
      
    })   
    
    output$out <- renderDataTable({
      rv$data
    })
  }
)

The accompanying style-sheet defines the size of the text input field. I fail to manage preventing text overflow.

.text-extra {
  
  width: 80px;
  height: 80px;
  word-break: break-word;
  
}

I tried several combinations of CSS properties but it does not work to break the line when there is a overflow of text. All other CSS properties work fine.

Steps to reproduce

1. Generate www folder + copy CSS in file style.css
2. Adapt path to file in tweak_css()
3. Run the code for shiny app above.

Expected behavior

If there is text overflow in text_extra() fields there should be a line break.

Attachments

No response

Screenshots or Videos

No response

Additional Information

No response