text wrap in verbatimTextOutput

[Andrew Caines]

Hello,

Does anyone know how to enforce text wrap in text areas in Shiny? -- specifically textInput() and verbatimTextOutput()

Here is a reproducible example. I've used CSS to increase the height of the text areas. But "word-wrap: break-word", which is what I thought would induce text wrap, has no effect. Code below. Help much appreciated!

library(shiny)

## demo from Shiny Gallery

## http://shiny.rstudio.com/gallery/widget-gallery.html

ui <- fluidPage(

 tags$head(

   tags$style(type="text/css", "#text{ height: 200px; word-wrap: break-word; }"),

   tags$style(type="text/css", "#value{ height: 200px; word-wrap: break-word; }")

 ),

 textInput("text", label=h3("Text input"), value="This is a very long string which I would like to wrap."),

 hr(),

 fluidRow(column(3, verbatimTextOutput("value")))

)

server <- function(input, output) {

 output$value <- renderPrint({ input$text })

}

## run

shinyApp(ui=ui, server=server)

thanks, Andrew

[Dean Attali]

This is a general HTML/CSS question, rather than shiny-specific.

A google search for "text wrap in input" led me to https://stackoverflow.com/questions/5286663/wrapping-text-inside-input-type-text-element-html-css where you can see that the answer is "text inputs are not designed for that. Use a textarea instead if you want multi lines". It's possible there's some way to workaround that , I haven't looked into it , but I would generally advise against trying really hard to go against what input fields were designed to do because there's a good chance whatever you whip up won't work cross-platform 

[Andrew Caines]

Thanks for your answer Dean.

In that case, can I make a feature request then? It would be useful to have the option in textOutput() or verbatimTextOutput() to enable text wrap.

Meanwhile I'll look into using textarea instead.

[Andrew Caines]

An update: text wrap works ok with textarea for the input. But for the output, I can't see a way to pass server values to a textarea, so I have no choice but to use textOutput / verbatimTextOutput, afaik.

[Dean Attali]

You can make a request to the shiny team, probably on the github repo is the best place for that.

But my personal opinion is that it's not a feature they would implement because text wrap in output can be achieved with a single css rule

[Andrew Caines]

Thanks again Dean.

I'll go to the repo.

I can implement text wrap in the input using css, but not the output, as I can't see a way to use textarea for output..unless I'm missing something

[Andras Sali]

Maybe you can try adding:

white-space: normal 

to your #value style ?

--
You received this message because you are subscribed to the Google Groups "Shiny - Web Framework for R" group.
To unsubscribe from this group and stop receiving emails from it, send an email to shiny-discus...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/shiny-discuss/b071538a-c3c3-4aec-9e28-9319a9caefa6%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Andrew Caines]

Thanks Andrew. Good suggestion. That is better than no wrap at all, though I'd still like a sensible word wrap parameter in Shiny (as it doesn't seem to be possible via css of #value)

[Andras Sali]

I am not sure that coercing verbatimTextOutput is the right way to go in general. It's supposed to be verbatim rendering of the output string, so that's why it enforces the original line breaks from the outset.

Maybe you can just use textOutput and style it the way you'd like.

For example, put it inside a wellPanel & add monospace font to your output like this:

....

tags$style(type="text/css", "#value{ height: 200px; font-family: monospace;}")

...

wellPanel(textOutput("value"))

....

To view this discussion on the web visit https://groups.google.com/d/msgid/shiny-discuss/f9c39237-3f87-4743-835d-341fed15ae60%40googlegroups.com.

[Andrew Caines]

Thanks again Andrew. I was not aware of the difference with textOutput. It looks much better now