"rmarkdown-app" not rendering after deployment

[FUenal]

Dear David, I am using your amazing "rmarkdown-app" code for my own shiny app which I am creating for a non-profit environmental organization. It works like a charm when I run it on my own computer. However, when deployed on shiny.io, for some reason, the rendering of the parameterized Markdown document with input selection only works with my Safari browser, but not with Firefox or Chrome. I am still a newbie in creating shiny apps and would really appreciate your help in this matter. The app is available here: https://fuenal.shinyapps.io/Fossil_Fuel_Policy_Tracker/
The "Country-Profiles" tab is where the issue is happening. The code for the app is in my Github repo: https://github.com/FUenal/FFNPT_Tracker
Here are the code snippets I used for the app both UI and server side.

Thanks for your help in advance!
Best wishes, Fatih

[davidruvolo51]

Thanks so much for reaching out!

I took a look at the app in Safari, Firefox, and Chrome. The Rmarkdown file seems to render properly, but the template seems to encounter errors when there isn't enough data for a selected country. When this happens, the charts and tables are empty. Perhaps this is what you were seeing?

Best wishes,

David

[FUenal]

Many thanks for getting back to me so promptly on this! Unfortunately, I can definitively rule out that the issue is related to sparse data. Both UK and the USA for example have data to populate the document. But when using Chrome or Firefox, the first time selecting a country (e.g. UK) and clicking "Show" it works fine, but when I select another country (USA) as input, the document does not update anymore unless I refresh the page. In Safari, clicking on a second and third country choice works but the formatting changes (the color of the text changes). Do you have other suggestions I could check out? I am really lost on why this is happening only in Chrome and Firefox but not in Safari. Any advice you can give me is much appreciated!

[davidruvolo51]

Thanks for the information. I think I'm on the same page. 😃

When the user navigates to the "Country Profiles" page, the file styles.css is also loaded (app.R L364). This is fine, but the css selectors that are defined (styles.css L62 to L141; type selectors) will overwrite the bootstrap theme. I believe this is what is causing the styles to change when the report is rendered and why the styles are persistent.

If you plan to reuse the input and button format (that is defined in the css file), I would suggest creating a class selector and give it a new name. For example:

/* button class */
- button {
+ btn_submit
    ...
}

/* select input class */
- select {
+ .dropdown_input {
    ...
}

In your app.R file, add these css classes to as many elements as you like.

tags$button(class = "btn_submit", ...)

Since you are using bootstrap themes, you can use any of the existing bootstrap css classes. I have copied the links to the Bootstrap CSS reference pages below.

• Buttons: https://getbootstrap.com/docs/4.0/components/buttons/
• Inputs: https://getbootstrap.com/docs/4.0/components/forms/#form-controls

I hope that helps. Let me know if you have any questions!

[FUenal]

Hi again! Thank you so much for these very helpful tips and your efforts! While the issues with different browsers are still unresolved, the formatting issues have been resolved now :-) I found another instance with a similar issue (working on Safari but not on Firefox and Chrome) and will reach out there to solve this (https://community.rstudio.com/t/issue-with-firefox-and-chrome-for-an-app-hosted-on-shinyapps-io/24760). Thanks again for the great tool you have developed and your efforts to help me out! Best wishes

[davidruvolo51]

Glad to hear that the styling issues were resolved.

Regarding the cross browser issue, all browsers render these elements differently. See this doc on the comparison of numeric inputs across browsers: https://css-tricks.com/numeric-inputs-a-comparison-of-browser-defaults/ (as an example). There are a couple of possible ways to fix this.

In the styles.css file, appearance: none is used (styles.css L62). There are times to use this, but this will reset styles to the browser defaults. I believe this property was deprecated last year so it could be unstable.

In the example application, I used an HTML approach for building apps rather than the using the "standard" Shiny method. Perhaps migrating the code over to Shiny functions would address this as it would automatically align with the current bootstrap theme.

# render report button
- tags$button(id = "report", "Render Report")
+ actionButton(inputId = "report", "Render Report")

# select input
- tags$select(
-     id = "country",
-     HTML(
-         ...
-     )
- )
+ selectInput(inputId = "country", ...)

[davidruvolo51]

(Issue closed after 1 year)