Only navbar renders on iPhone

jffni commented 4 years ago

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

DT::datatable(head(diamonds))

Row {data-height=350}

Chart 1

diamonds %>% ggplot(aes(cut, price, color = cut)) + geom_boxplot()

Chart 2

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



Results in this on iPhone:
<img src="https://user-images.githubusercontent.com/70261849/91351460-02e63f80-e7f1-11ea-866d-3a64204d5f5c.jpg" width="230">

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 commented 3 years ago

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

Any movement?

cpsievert commented 3 years ago

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

cpsievert commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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 commented 2 years ago

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).

rstudio / flexdashboard