How to add half a line break to shiny app? - html

I have a shiny app, and I want to add a small line break in between 2 objects--is it possible to specify that you want br() to be half it's regular size? I know if I wanted it to be double the size, I'd do br(), br(), but I don't know how to make it smaller.

Instead of br() you can add a margin to the bottom of the element of any size.
library(shiny)
ui <- fluidPage(
p("Line 1"),
br(),
p("Line 2", style = "margin-bottom: 0px;"),
p("Line 3", style = "margin-bottom: -10px;"),
p("Line 4")
)
server <- function(input, output) {
}
shinyApp(ui = ui, server = server)

Related

Is it possible to have fixed width verbatimTextOutput and have texts change lines in Shiny?

I have a simple app that uses verbatimTextOutput to display some texts. I am wondering if it is possible to have the width of verbatimTextOutput to be fixed and have the text output change lines?
Please see this example (https://yuchenw.shinyapps.io/verbatimtext_bookmark/). I also attached the code below.
As the attached screenshot shows, when the string is very long, the verbatimTextOutput would not show all the text. Instead, the verbatimTextOutput would show a scroll bar at the bottom.
However, I hope there will be no scroll bar at the bottom of the verbatimTextOutput. I also need that when the texts are long, change lines to fit in the verbatimTextOutput. Taking the following as an example, which is by clicking the bookmark button. We can see that this lengthy URL change lines, and there is no scroll bar at the bottom of the output. If the bookmark button can do that, I hope I can also make the verbatimTextOutput show similar characteristics and appearance of the bookmark.
Please let me know if you have any questions.
Code
library(shiny)
ui <- function(request){
fluidPage(
column(
width = 6,
textInput(inputId = "txt", label = "Type in some texts",
value = paste0(rep(letters, 10), collapse = "")),
strong("Show the texts"),
verbatimTextOutput("txt_out"),
br(),
bookmarkButton()
)
)
}
server <- function(input, output, session){
output$txt_out <- renderText({
input$txt
})
}
enableBookmarking("url")
shinyApp(ui, server)
Please try the following css:
library(shiny)
ui <- function(request){
fluidPage(
tags$style(type='text/css', '#txt_out {white-space: pre-wrap;}'),
column(
width = 6,
textInput(inputId = "txt", label = "Type in some texts",
value = paste0(rep(letters, 10), collapse = "")),
strong("Show the texts"),
verbatimTextOutput("txt_out"),
br(),
bookmarkButton()
)
)
}
server <- function(input, output, session){
output$txt_out <- renderText({
input$txt
})
}
enableBookmarking("url")
shinyApp(ui, server)

How to occupy empty screen real estate in a multi column layout?

The sample code below generates a UI with some text in one column and image on the other column.
library(shiny)
library(stringi)
ui = fluidPage(
fluidRow(
column(6,
h4('Text Section'),
p(stri_rand_lipsum(2)),
p(stri_rand_lipsum(2))),
column(6,
img(src = 'http://via.placeholder.com/200x200')
)
))
server = function(input,output){}
shinyApp(ui = ui, server = server)
Depending on the width of the page the first column can be longer or shorter than the image in the second column. Below is a case where the first column is longer.
Question is, is there a layout that'll allow the text of the first column to occupy the empty space left in the second column as shown in the image below?
The only way you could do that is by removing your extra column grid and then putting all in the same with image aligned to right.
library(shiny)
library(stringi)
ui = fluidPage(
fluidRow(
column(8,
h4('Text Section'),
img(src = 'http://via.placeholder.com/200x200', align = 'right'),
p(stri_rand_lipsum(2)),
p(stri_rand_lipsum(2)))
))
server = function(input,output){}
shinyApp(ui = ui, server = server)

how to add multiple line breaks conveniently in shiny?

I want put multiple line breaks in my shiny app.
Instead of
br(),
br(),
br(),
...
is there any more convenient way of doing it?Thanks.
I have no idea if that's convenient for you, but it saves you some typing.
linebreaks(n) repeats <br/> n times and parses it as HTML.
library(shiny)
linebreaks <- function(n){HTML(strrep(br(), n))}
ui <- fluidPage(
titlePanel(
p(
h1("first sentence", align = "center"),
linebreaks(10),
h3("second sentence", align = "center")
)
)
)

Align widget buttons on same line in Shiny

I'm having issues aligning two input widgets in Shiny.
Specifically, I can't seem to get a password input and an action button (generated using uiOutput()) to be bottom aligned in the same row.
My current approach offsets the two widgets:
when what I want is:
My code:
library(shiny)
ui <- fluidPage(
fluidRow(
column(width = 4,
passwordInput(inputId = "answer.pass", label = "", value = "",
placeholder = "Enter Password for Answer")
),
column(width = 2, offset = 0,
uiOutput("actionBut.out")
)
)
)
server <- function(input, output) {
output$actionBut.out <- renderUI({
actionButton("copyButton1","Copy Code")
})
}
shinyApp(ui = ui, server = server)
I've come across other SO posts and other sites that seem to have similar problems, but none of their solutions work for my example.
Bottom align a button in R shiny
Shiny R Button Alignment
UI: positioning widgets (UI elements) side by side [Google Groups]
Can anyone suggest a working solution? Thanks!

Making an Image Hyperlink in R Shiny header

I have been trying to make the image output hyperlink to a website but I am having trouble having perused the other questions on stack overflow
svg with clickable links in shiny - not clickable
http://www.invisiblecompany.com/shiny%20parts/archives/2004/11/clickable-logo.php
http://www.leahkalamakis.com/add-an-image-to-your-sidebar-make-it-clickable/
the tags are not working
server.r
library(shiny)
library(png)
server <- shinyServer(function(input, output) {
output$image1 <- renderImage({
width<- "100%"
height<- "100%"
list(src = "www/logo.png",
contentType = "image/png",
width = width,
height = height,
)
}, deleteFile = FALSE)
output$text1 <- renderText({ "please help make the image hyperlinked" })
})
ui.r
library(shiny)
ui <- shinyUI(pageWithSidebar(
titlePanel(imageOutput("image1")),
sidebarPanel(
helpText( a("Click Here for the Source Code on Github!", href="https://github.com/Bohdan-Khomtchouk/Microscope",target="_blank"))
),
mainPanel(
tabsetPanel(
tabPanel("Instructions",textOutput("text1"))
))
))
you can replace the logo.png with whatever you want I think the hyperlink goes in the list in server.
Just wrap imageOutput with tags$a so in the UI:
titlePanel(tags$a(imageOutput("image1"),href="https://www.google.com"))
If you want to define the webpage from the server side then you need something like this:
#server
output$example <- renderUI({
tags$a(imageOutput("image1"),href="https://www.google.com")
})
#UI
titlePanel(uiOutput("example"))