3

I am starting a webpage for my lab, and among the products we have developed is a shiny app to check the global climate change.

Here is the website in that page and this is how the app looks standalone as you can see in the menu there are three options that are not seen in the website, in the intro tab, the Intro, Workflow, About and Changelog should be visible

Website yaml

I made a webpage using classic rmarkdown website building, so my webpage yaml looks like this:

name: "Sitio web de ecoinformática del laboratorio Marquet"
navbar:
  title: "Ecoinformática"
  left:
    - text: "Home"
      href: index.html
    - text: "Sobre nosotros"
      href: about.html
    - text: "GCM compareR app"
      href: GCMcompareR.html
    - text: Docencia
      icon: fa-gear
      menu:
      - text: Ecología BIO231c 
      - text: Modulo 1.1
        href: Modulo1.1.html
      - text: Modulo 1.2
        href: Modulo1.2.html
    - text: RPackages
      icon: fa-gear
      menu:
      - text: RPackages
      - text: NetworkExtinction
        href: VignetteNetworkExt.html
output_dir: "."
output:
  html_document:
    theme: cosmo
    highlight: textmate
    include:
    css: styles.css

Actual app Rmd

And in the tab of GCM compareR app I have the following:

---
title: ""
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE) 
```

<iframe src="http://admin.ecoinformatica.net/shiny/rstudio/sample-apps/GCM/"style="border: 0; position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%"">

Solutions that might work but cant figure out

  • Add a padding on the top to prevent both navbars to generate conflicts
  • Remove the navbar of the website when I go to the app webpage
  • Make the navbar of de website "deployable", so that it only appears when I move the cursor to the edge of the webpage
  • change the navbar of the webpage to the left.

What I have tried:

Changing the borders :

<iframe src="http://admin.ecoinformatica.net/shiny/rstudio/sample-apps/GCM/"style="border: 100; position:absolute; top:100; left:0; right:0; bottom:0; width:100%; height:100%"">

make the app responsive

<div class="resp-container">
    <iframe class="resp-iframe" src="http://admin.ecoinformatica.net/shiny/rstudio/sample-apps/GCM/" style="border: 100; position:absolute; top:100; left:0; right:0; bottom:0; width:100%; height:100%"">

use include_app

```{r}
knitr::include_app("http://admin.ecoinformatica.net/shiny/rstudio/sample-apps/GCM/", height = "600px")
```

Which kind of works, but I can't fix the width

Any help would be welcome

Derek Corcoran
  • 3,930
  • 2
  • 25
  • 54
  • I cannot see these options on either of those links. I can see the very bottom of the options on both. – Chabo Oct 11 '18 at 22:07
  • You could easily pad the Shiny Nav-bar so that it hangs low enough that it is fully visible underneath the website nav-bar. That is the easy solution, the harder but more interesting solution is the cursor triggered nav-bar. – Chabo Oct 11 '18 at 22:11
  • Considering I cannot see the options on either page, and I am guessing you can, this may be browser/monitor dependent problem meaning the cursor activated nav-bar would be a much more robust solution. – Chabo Oct 11 '18 at 22:21
  • I think so to @Chabo, any Idea how to do it? – Derek Corcoran Oct 11 '18 at 23:30
  • The best shot at making that happen would be with `toggle` from the shinyjs function. See here https://deanattali.com/2015/04/23/shinyjs-r-package/ – Chabo Oct 12 '18 at 17:15
  • The second answer here https://stackoverflow.com/questions/41939346/hide-main-header-toggle-in-r-shiny-app shows how we could go about toggling non-shiny ui elements (HTML) – Chabo Oct 12 '18 at 17:21

1 Answers1

1

The shiny app navbar can be moved down by a few pixels by tweaking the height and top options of the iframe:

<iframe src="http://admin.ecoinformatica.net/shiny/rstudio/sample-apps/GCM/"style="border: 0; position:absolute; top:5%; left:0; right:0; bottom:0; width:100%; height:95%"">
</iframe>
Javier Fajardo
  • 737
  • 1
  • 10
  • 22