Shiny: stop word splitting in VerbatimTextOutput - r

I am trying to create a Shiny app with some text boxes. I like that the verbatimTextOutput has a box around the text, but with slightly longer text, the words get broken in meaningless places in order to wrap the text.
Is there some way that I can stop the words from being split? A very simple example is below.
ui <- fluidPage(
fluidRow(column(3, offset=0, verbatimTextOutput("TxtOut")))
)
server <- function(input, output, session) {
output$TxtOut <- renderText(
"a longish text that goes over multiple lines and breaks words"
)
}
shinyApp(ui = ui, server = server)

Because column width is set to 3, your text is wrapping in the output function. As explained in the comments above, following style will prevent wrapping, and add a scroll bar to navigate.
ui <- fluidPage(
tags$head(tags$style("#TxtOut {white-space: nowrap;}")),
fluidRow(column(3, offset=0, verbatimTextOutput("TxtOut")))
)

Related

RShiny static text and textOutput on the same line

I've put together a simple RShiny app related to finance and trading.
https://obrienciaran.shinyapps.io/cfd_new_value/
This is likely a very basic question, but right now in the side bar you can see text that says 'Current margin:' with a percent under it. Obtained via:
tags$b("Current margin:"),
h5(textOutput("current_margin"))
I just want these outputs side by side so it is displayed as
'Current margin: x%'
and not
'Current Margin:'
'x%'
Use the argument inline=TRUE and put the text "Current margin" and the output in the same div, here it is h5.
library(shiny)
ui <-
fluidPage(
h5(tags$b("Current margin:"),textOutput("current_margin", inline = TRUE))
)
server <- function(input, output, session) {
output$current_margin <- renderText({
"10%"
})
}
shinyApp(ui, server)

Shiny: How to change the page/window title in Shiny?

There are numerous posts regarding changing titles of other pieces of Shiny apps, e.g.:
Change the title by pressing a shiny button Shiny R
Shiny page title and image
Shiny App: How to dynamically change box title in server.R?
My question is related, but not answered by any of these. I would like to make the <head><title>...</title></head> tag reactive, or at least controllable from within an observeEvent in server.R.
The following does not work, since ui can't find theTitle, but is the kind of approach I'd hope is possible:
library(shiny)
ui <- fluidPage(
title = theTitle(),
textInput("pageTitle", "Enter text:")
)
server <- function(input, output, session) {
theTitle <- reactiveVal()
observeEvent( input$pageTitle, {
if(is.null(input$pageTitle)) {
theTitle("No title yet.")
} else {
theTitle(input$pageTitle)
}
})
}
I've tried making output$theTitle <- renderText({...}) with the if..else logic in that observeEvent, and then setting title = textOutput("theTitle") in ui's fluidPage, but that generates <div ...> as the title text, or <span ...> if we pass inline=True to renderText.
In case this clarifies what I'm looking for, the answer would make something equivalent to the literal (replacing string variables with that string) ui generated by
ui <- fluidPage(
title = "No title yet.",
....
)
before the user has entered any text in the box; if they have entered "Shiny is great!" into input$pageTitle's box, then we would get the literal
ui <- fluidPage(
title = "Shiny is great!",
....
)
One way would be to write some javascript to take care of that. For example
ui <- fluidPage(
title = "No title yet.",
textInput("pageTitle", "Enter text:"),
tags$script(HTML('Shiny.addCustomMessageHandler("changetitle", function(x) {document.title=x});'))
)
server <- function(input, output, session) {
observeEvent( input$pageTitle, {
title <- if(!is.null(input$pageTitle) && nchar(input$pageTitle)>0) {
input$pageTitle
} else {
"No title yet."
}
session$sendCustomMessage("changetitle", title)
})
}
shinyApp(ui, server)
This was created following the How to send messages from the browser to the server and back using Shiny guide
As of June 2021, there is an R package called shinytitle that can update the window title from within Shiny's reactive context: https://cran.r-project.org/package=shinytitle

Separate the title from the tabPanels in navbarPage

Is it possible to put all tabPanels in a row below the title of a navbarPage? In other words, I would like to keep the appearance of the navbarPage but on two rows: the title on the first one, and the tabPanels on the second. This would allow to "isolate" the title by keeping it on a single row.
library(shiny)
ui <- navbarPage(
title = "some title",
tabPanel("first tab"),
tabPanel("second tab")
)
server <- function(input, output, session) {}
shinyApp(ui, server)
Note that this doesn't have to be a navbarPage. Any UI that could do that is accepted but it has to have the appearance of a navbarPage (no space between the rows, etc.). Hope this is clear enough.
Also asked on RStudio Community
You can force the title to have 100% width via CSS, thereby moving the tabPanels below it:
library(shiny)
ui <- navbarPage(
title = "some title",
tabPanel("first tab"),
tabPanel("second tab"),
tags$style(HTML(".navbar-header { width:100% }
.navbar-brand { width: 100%; text-align: center }")) # center text
)
server <- function(input, output, session) {}
shinyApp(ui, server)

Change font of one word / substring in line of text in Shiny

In my shiny app, I've got a css file to sort out the styling for most things. However, I'm struggling with one element, which is that I want the font of one word to be changed within a line of text.
I know how to change some elements, such as making it bold or a different colour, but I'd like it to be a different font, and that doesn't seem to be as obvious. If I try something like that just for one word, I end up with the HTML printed as it isn't doing anything. I'm not very familiar with HTML or css so I might be missing something, but can't find a question on here with the same specific issue.
Here is example code:
UI
htmlOutput("example_text)
Server
function(input, output, session) {
output$example_text <- renderUI({
paste0("I want to make ", "this", " a different font")
})
}
Server v2 (makes the word bold but doesn't change the font family)
function(input, output, session) {
output$example_text <- renderUI({
HTML(paste0("I want to make ",
"<font-family=\"Courier New\"><b>", "this", "</font></b>",
" a different font")
)
})
}
From what i see you could try using HTML(), but you would run into the problem of keeping the text in one line.
You could get some help here: how to have text of 2 font sizes in same line in HTML?.
The css you can add with tags$style():
tags$style('
#mydiv{font-family:"Arial";}
#mydiv b{font-family:"Courier New";}
'),
The full code would read:
ui <- fluidPage(
tags$style('
#mydiv{font-family:"Arial";}
#mydiv b{font-family:"Courier New";}'),
htmlOutput("example_text")
)
server <- function(input, output) {
output$example_text <- renderUI({
HTML("<div id='mydiv'>I want to make <b>this</b> a new font.</div>")
})
}
shinyApp(ui, server)

set height of dateInput() field in shiny

I have a lot of generated input fields on an shiny app and I want to make it more dense by lowering the height of the dateinput fields. However, the height tag only shrinks the box and make it overflow into the next input. So, how do I shrink the dateInput() fields so it is only a little higher than the text?
library(shiny)
ui <- fluidPage(
tags$style(".shiny-date-input {height : 30px;}")
,dateInput("date1","date1")
,dateInput("date2","date2")
,textInput("text","text")
)
shinyApp(ui, function(input, output, session){})
Update: To clearify, I want the dateInput (and possibly the textinput also) frame to be less tall without it extending into the blow input:
You can add the class input-sm to the widgets in order to make them a bit smaller. To do so, use shinyjs.
library(shiny)
library(shinyjs)
ui <- fluidPage(
useShinyjs(),
dateInput("date1","date1"),
br(),
dateInput("date2","date2"),
br(),
textInput("text","text")
)
shinyApp(ui,
function(input, output, session){
addClass("date1", "input-sm")
addClass("date2", "input-sm")
addClass("text", "input-sm")
}
)
Found the answer in .form_control :
library(shiny)
ui <- fluidPage(
tags$style(".shiny-input-container {line-height: 5px; height : 25px}")
,tags$style(".form-control {height: 25px;}")
,dateInput("date1","date1")
,dateInput("date2","date2")
,textInput("text","text")
)
shinyApp(ui, function(input, output, session){})

Resources