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.