Increasing the width of rendered HTML in Shiny

[eckyu]

Hi, thanks very much for your help on an earlier issue #125 . Taking your example for rendering HTML...

HTML( as.character( diffPrint(1:3, 2:4, format='html',style=list(html.output='diff.w.style') ) ) )})

I see that it fills half the width of the output space. I have tried changing the disp.width parameter but without success. I am wondering if there are other ways to increase the width so as to display more contents per line of space?

Thanks very much for your help on this.

[brodieG]

Are you sure you are not dealing with a Shiny formatting issue (i.e. it is your shiny page that is making the display narrow)? Here I have two examples that get as wide as my laptop display:

Generated with:

library(shiny)
library(diffobj)
shinyApp(
  ui=htmlOutput('diffobj_element'),
  server=function(input, output) {
    output$diffobj_element <- renderUI({
      HTML(
        as.character(
          diffPrint(1:99, 2:100, format='html', disp.width=120,
            style=list(html.output='diff.w.style')
) ) )}) } )
shinyApp(
  ui=htmlOutput('diffobj_element'),
  server=function(input, output) {
    output$diffobj_element <- renderUI({
      HTML(
        as.character(
          diffPrint(
            1:99, 2:100, format='html', disp.width=120,
            mode='unified',
            style=list(html.output='diff.w.style')
) ) )}) } )

[eckyu]

Thanks very much for replying and for the example. I have tried your example and can confirm that they do indeed fill up the width of the space.

I see that theres two things causing the render to reduce in width..., for example if I do this...

library(shiny)
library(diffobj)
shinyApp(
  ui=fluidPage(htmlOutput('diffobj_element')),
  server=function(input, output) {
    output$diffobj_element <- renderUI({
      HTML(
        as.character(
          diffPrint(
            1:97, 2:96, format='html', disp.width=120,
            mode='unified',
            style=list(html.output='diff.w.style')
          ) ) )}) } )

Where I simply wrap htmlOutput(..) with fluidPage()..., the render halves in width...

But if I remove it...., the render now becomes full width...

Presumably it is the shiny settings? If so, is there a way to overcome this?

Thanks again for your help on this.

[brodieG]

There is some unpleasant interaction between the diffobj html, and shiny. Part of it is probably because normally there is some JS that re-adjusts diff widths that is not included when we output with html.ouput='diff.w.style'.

I'll look at this when I work on #126, but that will probably not be for a while (months).

In the meantime, you have one more option which is to use the ANSI CSI colored output of diffPrint, and then converting it to HTML with fansi:

library(shiny)
library(diffobj)

options(crayon.enabled=TRUE)
shinyApp(
  ui=fluidPage(htmlOutput('diffobj_element')),
  server=function(input, output) {
    output$diffobj_element <- renderUI({
      diff <- diffPrint(
        1:100, 2:101, disp.width=120, pager='off', format='ansi256',
        brightness='light'
      )
      pre(
        HTML(
          fansi::sgr_to_html(paste0(as.character(diff), collapse="\n"))
)) }) } )

This has its own drawbacks, so you will have to chose what you prefer.

Alternatively, you can poke around the CSS and try to figure out what's going wrong.

[cpsievert]

The issue boils down to the bootstrap CSS clashing with the css here

diffobj/inst/doc/embed.html

Line 96 in c46b4d1

width: 100%;

Note that the row class has special meaning in bootstrap and 99% of shiny app's use bootstrap, so this is a big deal for anyone wanting to leverage diffobj in shiny

[brodieG]

I will re-implement #127 or a variation thereof in the next couple of weeks.