R: Using browsable() in leaflet resulting in a smaller screen height - html

I build a leaflet in R like this:
my_leaflet <- my_data %>%
leaflet (options = leafletOptions(
-
) %>^%
addProvidersTiles(
-
)
setView(
-
) %>%
addMarkers (
--
) %>%
addCircleMarkers(
-
) %>%
addLegend( .. )
I get "height: 100%" in this part of the generated html code:
without browseable()
But when i use browsable() :
browsable(
tagList(list(
tags$head(
tags$style(
".leaflet .legend i{
border-radius: 50%;
width:12px;
height: 12px;
margin-top: 4px;
}",
),
my_leaflet
))
))
then i get "height: 400px" inside the generated html code (see the picture below) and the leaflet map only shows the half of my screen.
with browsable()
Is there a way to get the html code to show a full screen height? i am not sure if the "height: 400px" is the cause of this. is there a way to get this height to 100% when using browsable() ?

Try vh unit. In your case modify my_leaflet with leaflet(height = '100vh', ...).

Related

Kable, Flextable, Huxtable to HTML: force the display of cell contents on a single line

I want the contents of my cells to be displayed in a single line. I'm using Rmarkdown to HTML.
But no matter which package I use (Kable, Flextable, Huxtable), the column width specification is ignored and a line break is introduced, which makes the very ugly and unreadable results.
In HTML, with a drop-down box, the total width shouldn't be a problem. I just want the results to be readable.
library(kableExtra)
library(flextable)
table = as.data.frame(matrix(rep("value [value1 - value2]",20), ncol = 10))
kbl(table) %>%
kable_paper() %>%column_spec(1:ncol(table), width = "3.5cm", bold = TRUE, italic = TRUE)%>%
scroll_box(width = "1000px", height = "500px")
tb = flextable(table)%>% flextable::width(width = 10)
knit_print(tb)
With flextable, this code forces (note the usage of autofit()) the display on one single line:
library(flextable)
as.data.frame(matrix(rep("value [value1 - value2]", 20), ncol = 10)) %>%
flextable()%>% theme_box() %>% autofit()
This will produce a table display in an HTML window, this window has a width that is limited (the size of your window or the max-width of your HTML page). If the width of the browser window is less than the width of the table, it will be compressed to fit the window or the available space.
If you need to make this flextable horizontally scrollable (it is already implemented for bookdown but not yet for all HTML format), you can add this CSS code to your r markdown so that flextables can be scrollable (soon integrated into flextable then soon not necessary):
```{css echo=FALSE}
.flextable-shadow-host{
overflow: scroll;
white-space: nowrap;
}
```
An HTML 'R Markdown' document with it:
---
output: html_document
---
```{css echo=FALSE}
.flextable-shadow-host{
overflow: scroll;
white-space: nowrap;
}
```
```{r}
library(flextable)
as.data.frame(matrix(rep("value [value1 - value2]", 20), ncol = 10)) |>
flextable()|> theme_box() |> autofit()
```
Here is the huxtable equivalent:
as_hux(table) |>
set_width(1) |>
set_wrap(FALSE) |>
set_col_width("3.5cm") |>
quick_html()
which makes the table as wide as you want:

Centering Rmarkdown knitrbootstrap Report

Found this package called knitrBootstrap Which is to allow for Bootstrap style web pages when reporting in Rmarkdown.
Note: I am using the klippy, kableExtra, and knitrBootstrap
My issue is that when rendered is does not center the whole report, it is stuck to one side. And also the Title of the Document doesn't get displayed? Any suggestions to give this HTML page a more "fuller" feel? Because I can insert straight HTML code in Rmarkdown I added the HTML tag
---
output:
knitrBootstrap::bootstrap_document:
title: "Test file"
theme: united
highlight: sunburst
---
```{r}
library(kableExtra)
library(klippy)
library(knitrBootstrap)
```
```{r echo=FALSE, include=TRUE, out.width="100%"}
mpg_list <- split(mtcars$mpg, mtcars$cyl)
disp_list <- split(mtcars$disp, mtcars$cyl)
inline_plot <- data.frame(cyl = c(4, 6, 8), mpg_box = "", mpg_hist = "",
mpg_line1 = "", mpg_line2 = "",
mpg_points1 = "", mpg_points2 = "", mpg_poly = "")
inline_plot %>%
kbl(booktabs = TRUE) %>%
kable_paper(full_width = FALSE) %>%
column_spec(2, image = spec_boxplot(mpg_list)) %>%
column_spec(3, image = spec_hist(mpg_list)) %>%
column_spec(4, image = spec_plot(mpg_list, same_lim = TRUE)) %>%
column_spec(5, image = spec_plot(mpg_list, same_lim = FALSE)) %>%
column_spec(6, image = spec_plot(mpg_list, type = "p")) %>%
column_spec(7, image = spec_plot(mpg_list, disp_list, type = "p")) %>%
column_spec(8, image = spec_plot(mpg_list, polymin = 5))
```
I can't seem to find a ton of literature on the format you're using. However, I did notice that it doesn't change size when the screen size changes. It is all just set to one final size. That being said, the table thinks it is centered. In reality, it is formatted to 'fit' the contents, but the table is set to fill a space so that that outer space is centered in the body, but the table is left-aligned in that available space. On top of all that, the body is set to a max-width of 36em. That's why it looks left-aligned.
Clear as mud, I know. Sigh.
I can help make it better, but a different output format may be a better option. Almost any method I tried to make the table bigger destroyed the plots' SVG (distorted them).
This worked, but I don't know if the juice is worth the squeeze.
Add these styles between chunks and keep your code the same.
<style>
body {
max-width: 100%; // 36 em isn't working for me
}
table{
width: 924px !important;
height: auto;
}
tr {
height: 4em;
width: 924px !important; // 28 + (7*128) (for the 8 columns)
}
td {
vertical-align: middle !important;
padding-bottom: 0px !important;
}
svg {
width: 110%;
height: auto; // keep the aspect ratio
}
thead > tr *:not(:first-child) {
width: 128px; // only set here, if set to all td, it blows the svg
}
</style>
If you have any questions, let me know.
This centers, without centering, by filling the available space.

How to add a x-scroll on a division of a shiny app?

The following code should add endless number of column and a scroll bar should appear at the bottom. But the scroll bar is not working here. Please help..
library(shiny)
ui <- fluidPage(
fluidRow(
actionButton("addCol","Add New Column"),
div(style="overflow-x: auto;",
uiOutput("myUI")
)
)
)
server <- function(input, output, session) {
alld <- reactiveValues()
alld$ui <- list()
observeEvent(input$addCol,{
alld$ui[[length(alld$ui)+1]] <- verbatimTextOutput("aaa", placeholder = T)
output$myUI <- renderUI({
fluidRow(lapply(alld$ui,function(x){column(4,x)}))
})})
}
shinyApp(ui, server)
You are using Bootstrap layout (fluidPage, fluidRow, column), and the whole idea behind this kind of layout is responsivity.
The page is considered 12 width, and elements exceeding that will wrap to new rows. This is the intended behaviour of Bootstrap.
One way of solving your problem is to use flexbox.
Solution: (Disclaimer: Only works on chrome and firefox)
I made two changes to your code:
Changed the column to div with a custom CSS class called custom-column.
column(4,x) to div(class = "custom-column", x)})
Added flex-nowrap class to fluidRow.
fluidRow(class="flex-nowrap", lapply(alld$ui,function(x){div(class = "custom-column", x)}))
With these changes the layout works as you intended on chrome and firefox, but it's not working on IE or the browser within RStudio.
Full code including the CSS classes flex-nowrap and custom-column:
library(shiny)
ui <- fluidPage(
fluidRow(
tags$head(tags$style("
.flex-nowrap {
display: inline-flex;
-webkit-flex-wrap: nowrap !important;
-ms-flex-wrap: nowrap !important;
flex-wrap: nowrap !important;
flex-direction: row;
}
.custom-column {
width: 200px;
margin: 0px 10px;
}
"
)),
actionButton("addCol","Add New Column"),
div(style="overflow-x: auto;",
uiOutput("myUI")
)
)
)
server <- function(input, output, session) {
alld <- reactiveValues()
alld$ui <- list()
observeEvent(input$addCol,{
alld$ui[[length(alld$ui)+1]] <- verbatimTextOutput("aaa", placeholder = T)
output$myUI <- renderUI({
fluidRow(class="flex-nowrap", lapply(alld$ui,function(x){div(class = "custom-column", x)}))
})})
}
shinyApp(ui, server)
Output:

Set distance between widget and its title (text) in shiny

I have a simple shiny app which diplays three colourInput() buttons. I would to reduce the blank space between every button and its title in order to be closer to it.
#ui.r
library(shiny)
library(shinydashboard)
shinyUI( dashboardPage(
dashboardHeader(
title="Styling Download Button"
),
dashboardSidebar(
div(style="display: inline-block;vertical-align:top; width: 115px;",colourInput("rightcolor",h5("Left"), value = "#00B2EE")),
div(style="display: inline-block;vertical-align:top; width: 115px;",colourInput("overlapcolor",h5("Overlap"), value = "#7CCD7C")),
div(style="display: inline-block;vertical-align:top; width: 115px;",colourInput("leftcolor",h5("Right"), value = "#FFFACD")),
),
dashboardBody()
))
#server.r
shinyServer(function(input, output) {
})
You have to change the div elements in which the titles are displayed. One way to do this is by adding the style argument to the h5 function. If you reduce the margin to 0 pixels by adding style='margin: 0px' you get the result that you want (you can also use: margin-top, margin-bottom, etc.).
If you want to adapt other Shiny widgets you can always wrap them in a div and adapt them with the style argument (example: div(style='margin: 0px; padding: 15px;', selectInput(...))). Information on other div arguments can be found here.
Your example
library(shiny)
library(shinydashboard)
library(colourpicker)
# Create ui
ui <- shinyUI( dashboardPage(
dashboardHeader(
title="Styling Download Button"),
dashboardSidebar(
div(style="display: inline-block;vertical-align:top; width: 115px;",colourInput("rightcolor",h5("Left", style='margin: 0px;'), value = "#00B2EE")),
div(style="display: inline-block;vertical-align:top; width: 115px;",colourInput("overlapcolor",h5("Overlap", style='margin: 0px;'), value = "#7CCD7C")),
div(style="display: inline-block;vertical-align:top; width: 115px;",colourInput("leftcolor",h5("Right", style='margin: 0px;'), value = "#FFFACD"))),
dashboardBody()
))
# Create Server
server <- shinyServer(function(input, output) {})
# Run app
shinyApp(ui, server)

Shiny R scale down plotOutput

I'm trying to scale down a plotOutput with Shiny R.
I have this plot:
from this code:
#In ui:
fluidRow(
column(width = 12,
h4("Diagrama Persistencia"),
plotOutput("Diagrama")
)
)
#In server
output$Diagrama <- renderPlot({
F_PlotDiag(Diag = isolate(values$data), tipoPlot = input$radioPlot, tamEjeNom = input$sliderTamEjeNom)
}, height = input$sliderHeight, width = input$sliderWidth)
Notice the height and width params. This works because all is in an observeEvent context.
As you can see, the hole plot won't fit in the screen. The problem with reducing height and width is that it looks like this:
But actually, if I right click and save the FIRST image, it looks fine unlike the second image:
Is there a way to show the whole plot in the browser by scaling it down? So that I can see it as if I downloaded the image.
I really don't know much about CSS so I can't really provide any logical attempts, but this is what I've tried for my HTML:
tags$style(type="text/css", ".shiny-bound-output { transform: 'scale(.5)' }")
tags$style(type="text/css", ".shiny-plot-output { transform: 'scale(.5)' }")
tags$style(type="text/css", "#Diagrama { height: 20px }")
With no success.
Since you didn't provide a reproducible example, see if this example helps you. Based on https://stackoverflow.com/a/8839678/4190526
The key is the following line, which finds the image under the div with the id distPlot (i.e. the plot name in ui.R), and define the CSS with a max-height but otherwise auto.
tags$style(HTML("div#distPlot img {width: auto; height: auto; max-width: auto; max-height: 400px;}")),
Full code
library(shiny)
ui <- shinyUI(fluidPage(
tags$style(HTML("div#distPlot img {width: auto; height: auto; max-width: auto; max-height: 400px;}")),
titlePanel("Old Faithful Geyser Data"),
sidebarLayout(
sidebarPanel(
sliderInput("bins",
"Number of bins:",
min = 1,
max = 50,
value = 30)
),
mainPanel(
plotOutput("distPlot")
)
)
))
server <- shinyServer(function(input, output) {
output$distPlot <- renderPlot({
x <- faithful[, 2]
bins <- seq(min(x), max(x), length.out = input$bins + 1)
hist(x, breaks = bins, col = 'darkgray', border = 'white')
}, width=600, height=1200)
})
shinyApp(ui = ui, server = server)