Only navbar renders on iPhone

[jffni]

Somehow flexdashboard doen't work on iPhone properly. Only navbar renders and nothing more. It works fine on Android and my PC, but not on iPhones.

This simple example:

---
title: "Testing flexdashboard on iPhone"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    vertical_layout: fill
    theme: bootstrap
---


```{r setup, include=FALSE}
library(flexdashboard)
library(ggplot2)
library(dplyr)
```

Row {data-height=200}
-----------------------------------------------------------------------

### Table


```{r}
DT::datatable(head(diamonds))
```

Row {data-height=350}
-----------------------------------------------------------------------

### Chart 1

```{r}
diamonds %>% ggplot(aes(cut, price, color = cut)) + geom_boxplot()
```

### Chart 2

```{r}
diamonds %>% ggplot(aes(log(price), log(carat), col = clarity)) + geom_point()
```

Results in this on iPhone:

Is there a way to fix this?
I am using flexdashboard 0.5.2, rmarkdown 2.3, R 4.0.2 and running on Windows 10 x64.
Thanks.

[YSG-Jason]

Seeing the same issue.
R: 4.0.4
flex: 0.5.2
rmarkdown: 2.7

Any movement?

[cpsievert]

Any idea if this issue only happens with vertical_layout: fill? Please also include what browser you're using on the iPhone

[cpsievert]

I've deployed this example using the dev version of flexdashboard here https://loving-dijkstra-7d4f33.netlify.app/

Do you only see the navbar at this link? If so, please include more info about your device and browser.

[kvdwiele]

@cpsievert I had the same issue but your link seems to work on my iPhone now. How did you solve the problem? I’m using safari.

[cpsievert]

Weird. I just rendered this Rmd with the development version of flexdashboard https://github.com/cpsievert/flexdb-test/blob/gh-pages/index.Rmd

Maybe updating to the development version will fix your problem?

[cassandraxmah]

Hello @cpsievert !
Wondering if this was supposed to be fixed in an updated version? I'm still encountering the same issue in flexdashboard 0.6.0 with R version 4.2.1 and rmarkdown 2.17 (Platform: x86_64-w64-mingw32/x64 (64-bit) Running under: Windows 10 x64 (build 19043).

The html file opens fine on PC/Chrome and on MacBook Chrome & Safari (full screen), and on android/Chrome (automatic vertical mobile layout), but on IPhone/Safari only the unclickable navbar shows (less the pages I'd normally see). This happens on old and new iPhones/OS. This error happens with no layout specified and with vertical_layout: fill, and separately when orientation: columns and all charts are the same level (shows on PC as vertical charts).

Adding {.mobile} to a chart title or to a page sucessfully removes the component from html view, but the iPhone Safari mobile still does not show. Aslo, the iPhone/Safari rendering prints in my specified navbar colour also don't render the specified font.

Your linked development version from Mar 2021 on my iPhone shows properly.

---
title: "Report test"

output: 
  flexdashboard::flex_dashboard:
    orientation: rows
   

---

<style>                     
.navbar {
  background-color:#316767;
}
.navbar-brand {
color:white!important;
}
</style>     



<style type="text/css">

.navbar {  /* title  */
   font-size: 15px;
   font-family: Alright Sans;

</style>

@YSG-Jason @kvdwiele @jffni Did you find any workarounds apart from using the flexdashboard in dev? Worried about that in case it's not sustainable (such as a future relased package not including that fix, like now).