Rmarkdown flexdashboard valueboxes do not render properly in Chrome or IE (but work in FireFox)

My flexdashboard works perfectly in firefox but in chrome or IE, the valueboxes don't render properly and they get hidden behind other page elements.

Showing in Firefox (on top) and Chrome/IE (on bottom):

Here is a reprex of my code:
https://pastebin.pl/view/1d1503f4

---
title: "reprex"
runtime: shiny
output:
  flexdashboard::flex_dashboard:
    theme: yeti
    orientation: rows
    vertical_layout: scroll
    social: menu
    source: embed
---
 
<script>
$('.navbar-logo').wrap('<a href="http://www.website.com" target=blank>');
</script>
 
 
```{r setup, include=FALSE}
library(flexdashboard)
library(knitr) # for RMarkdown to HTML
library(rmarkdown) # to generate Rmd final document
library(shiny) # dashboard interactivity
Sidebar {.sidebar}
======================================================================
some text for the sidebar

some more text

Section 1
======================================================================

## Row 1 {data-height=9}
-------------------------------

### valuebox1
```{r}
valueBox("986070", icon = "fa-user-times")```
### valuebox2
```{r}
valueBox("8619681", icon = "fa-user-times")```


## Row {data-height=800 .tabset .tabset-fade}
----------------------------------------------------------------------

### some other stuff

```{r}
# generate leaflet object, define basemap
leaflet(height = 400) %>% addProviderTiles("CartoDB.Positron", group = "CartoDB (Default)") %>%
 addProviderTiles("Esri.WorldStreetMap", group = "Esri") %>%
 addProviderTiles("CartoDB.DarkMatter", group = "CartoDB Dark") %>%
 addLayersControl(
   baseGroups = c("CartoDB (Default)", "Esri", "CartoDB Dark"),
   options = layersControlOptions(collapsed = FALSE))
absolutePanel(
       draggable = FALSE, top = "2%", left = "5%", right = "auto", bottom = "auto",
       width = '30%', height = 'auto',
       style = "background: white; border:3px solid #eaf2f8; color: #5d6063; justify-content: center;",
       p(strong("some text"))
   ) ```
random text

I was able to fix this myself by removing the data-height=50 from the row containing the valueboxes. For anyone who comes across this error in the future. Chrome apparently interprets the CSS/HTML differently than Firefox. If anyone could provide input about why the occurs, I'd love to know.

2 Likes

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.