rstudio / rstudio/flexdashboard

Issue with multi page layout

Open
#130 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
848
Forks
298
PR merge metrics
No merged PRs in 30d

Description

Hi,

I am facing an issue of page formatting which occurs in multi page layout : The columns having the plots are not sized correctly. When I refresh the page, the formatting gets fine.

I am attaching an screenshots of flexdashboard html report which has the above issue. The issue occurs on first time opening the html report. On refreshing the report, the formatting gets corrected itself (please see the screenshots).

Some notes -

  1. It doesn't occur on the first page of multi-page layout
  2. flexDashboard package version - 0.5
  3. Browser used for opening the HTML - Chrome
  4. Issue happened when I try to put a bar plot (plotly) and a table (knittr kable) in the same column. Having only the bar plots, it was fine.
    example column code -

`Column

{.no-title}
df <- ddply(issueData, c("CreatedMonth", "Status"), summarise, Count = length(IssueId))
plot_ly(df, x = ~CreatedMonth, y = ~Count, symbol = ~Status, type = 'bar') %>% layout(title = "Issue Status", showlegend = T, xaxis = list(title = '', tickangle = -45), yaxis = list(title = ''), barmode = 'stack')
df <- ddply(issueData, c("Status"), summarise, Count = length(IssueId))
knitr::kable(df)

incorrectformatting
formattingafterrefreshpage

File attached -

  1. Screenshot of issue
  2. Screenshot of corrected formatting after page refresh

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the attached multi-page flexdashboard in Chrome with a plotly bar plot and knitr kable in the same column, comparing the first load with a refresh. Inspect the generated HTML and layout behavior on the affected page; done means the columns are sized correctly without requiring a refresh.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, plotly, r
Domain
data-visualization, frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.