Before you go after me regarding duplicate posts, hear me out: I already stumbled across posts like these: latex in shiny selectInput
Which are super useful! However, the main issue is that I just don't want Greek letters... I want words AND Greek letters... But ALSO, IT IS LONG and it doesn't render the way I want it to be!! Continue further in this post to see what I mean.
Here's some example test code:
library(shiny)
ui <- shinyUI(
fluidPage(
tags$head(
tags$link(rel="stylesheet",
href="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.css", integrity="sha384-9tPv11A+glH/on/wEu99NVwDPwkMQESOocs/ZGXPoIiLE8MU/qkqUcZ3zzL+6DuH",
crossorigin="anonymous"),
tags$script(src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.js", integrity="sha384-U8Vrjwb8fuHMt6ewaCy8uqeUXv4oitYACKdB0VziCerzt011iQ/0TqlSlv8MReCm",
crossorigin="anonymous")
),
selectizeInput(
inputId = "test_id",
label = "test_label",
choices = list("\\text{hahaha } \\omega \\text{ hahaha insert more text please help me...}" = 1,
"\\text{hahaha } \\beta \\text{ hahaha}" = 2),
options = list(render = I("
{
item: function(item, escape) {
var html = katex.renderToString(item.label);
return '<div>' + html + '</div>';
},
option: function(item, escape) {
var html = katex.renderToString(item.label);
return '<div>' + html + '</div>';
}
}")
)
)
)
)
server <- function(input, output, session){
# server side code here...
}
shinyApp(ui = ui, server = server)
Notice that when you load the app, it looks like this:
And you can see it is slightly cut off!! (And no, I don't want to increase the width of the sidebarlayout.) To summarize There are two things I want:
Many thanks to whoever can help!
Edit: I realise that I can fix 1. by spamming "\newline" when it ends (to make it wrap as I wanted), but I feel like there may be a better solution.
If you do as follows then the text is wrapped so there's no truncation, but the problem is that this way assumes the same text for each choice.
selectizeInput(
inputId = "test_id",
label = "test_label",
choices = list("\\omega" = 1,
"\\beta" = 2),
options = list(render = I("
{
item: function(item, escape) {
var html = katex.renderToString(item.label);
return '<span>hahaha... ' + html + ' hahahahahaha insert more text here... please help me...</span>';
},
option: function(item, escape) {
var html = katex.renderToString(item.label);
return '<span> hahaha... ' + html + ' hahahahahaha that is really funny do you agree?</span>';
}
}")
)
)
Here is how to do with individual texts:
selectizeInput(
inputId = "test_id",
label = "test_label",
choices = NULL,
options = list(
options = list(
list(
value = 1,
head = "hahaha... ",
latex = "\\omega",
tail = " hahahahaha... insert more text here because I want to be long !! please help me !!"
),
list(
value = 2,
head = "hohoho... ",
latex = "\\beta",
tail = " hohohohohoho that is really funny"
)
),
valueField = "value",
render = I("{
item: function(item, escape) {
var html = katex.renderToString(item.latex);
return '<span>' + item.head + html + item.tail + '</span>';
},
option: function(item, escape) {
var html = katex.renderToString(item.latex);
return '<span>' + item.head + html + item.tail + '</span>';;
}
}")
)
)
Replace span
with div
.