Pagedown: Main content pushed to the 2nd page if the sidebar is longer than one page

Created on 29 Nov 2018  路  5Comments  路  Source: rstudio/pagedown

Hello,

I tested this commit and when I opened the html file on

  • Windows 10 Chrome 70.0.3538.110 (Official Build) (64-bit)
    Nothing showed up, just a blank page. Inspect > Errors
paged.js:23454 Fetch API cannot load file:///D:/pagedown/pagedown_example_files/paged-0.0.20/css/resume.css. URL scheme must be "http" or "https" for CORS request.
add @ paged.js:23454
paged.js:23454 Uncaught (in promise) TypeError: Failed to fetch
    at Polisher.add (paged.js:23454)
    at Previewer.preview (paged.js:26428)
    at paged.js:26494
  • Firefox Quantum 63.0.3 (64-bit)



Rmd code

title: "Lijia Yu's resume"
author: Lijia Yu
date: "`r Sys.Date()`"
output:
  pagedown::html_resume:
    self_contained: false
---

Aside
================================================================================

![Lijia Yu](https://avatars1.githubusercontent.com/u/895125?s=400&v=4){width=80%}

## Contact Info {#contact}

- <i class="fa fa-envelope"></i> [[email protected]](mailto:[email protected])
- [<i class="fa fa-github"></i>](https://github.com/yulijia) | [<i class="fa fa-linkedin"></i>](https://github.com/) | [<i class="fa fa-stack-overflow"></i>](https://github.com/)  | [<i class="fa fa-researchgate"></i>](https://github.com/)
- <i class="fa fa-phone"></i> (+1) 123-456-7890
- For more information, please contact me via email.

## Skills {#skills}

- Experienced in statistical analysis, statistical learning models, and optimization methods.

- Full experience with next generation sequencing data analysis.

- Highly skilled in R, Bash, Perl, Python, LaTeX

- Experienced in statistical analysis, statistical learning models, and optimization methods.

- Full experience with next generation sequencing data analysis.

- Highly skilled in R, Bash, Perl, Python, LaTeX

- Experienced in statistical analysis, statistical learning models, and optimization methods.

- Full experience with next generation sequencing data analysis.

- Highly skilled in R, Bash, Perl, Python, LaTeX


## Disclaimer {#disclaimer}

This resume was made with the R package [**pagedown**](https://github.com/rstudio/pagedown).

Last updated on `r Sys.Date()`.



Main
================================================================================

## Lijia Yu {#title}

### Currently searching for a PhD student position

Please note that this is a *real* resume, and I'm really looking for a PhD
student position at the moment. I made this resume because Yihui asked me
if I'd like to test the **pagedown** package with my resume. If you are
interested in my background and skills, please feel free to contact me.

## Education {data-icon=graduation-cap data-concise=true}

### Beijing University of Chemical Technology

B.S. in Information and Computing Sciences

Beijing, China

2010

Thesis: Dyadic wavelet and its application in edge detection

### University of Chinese Academy of Sciences

M.S. in Bioinformatics

Beijing, China

2014

Thesis: A multi-omics study for intra-individual divergence of the distributions between mRNA isoforms in mammals

Most helpful comment

If the sidebar is too long, the problem is probably inevitable (I'm not sure; this needs investigation). The sidebar is just a sidebar. Practically, you probably should not stuff it with too much content.

You're right: it is inevitable with floating elements. The logic of paged.js is the following: if an element overflows on another page, the chunker will detect it and create a new page. Here, the first element (#aside), that is floating right, overflows: the chunker creates a new page, position the remaining content in the new page and take the following element (#main). This also explains why you needed to switch #main and #aside in https://github.com/rstudio/pagedown/commit/71631aa30c55cd2b61b3ac34063252b373e557eb
We only can use floating elements that have a height smaller than the page content height.

All 5 comments

You need to wait for our documentation, which is what I'm working on this week.

In this case, you need a web server to preview the page. There are many possible to start a web server. The easiest one may be xaringan::inf_mr().

I forgot to mention that xaringan::inf_mr() will only fix the page.js error. If the sidebar is too long, the problem is probably inevitable (I'm not sure; this needs investigation). The sidebar is just a sidebar. Practically, you probably should not stuff it with too much content.

Now it is possible to add side notes on later pages using the syntax ::: aside, e.g.

Selected Publications and Posters {data-icon=file}
--------------------------------------------------------------------------------

### Genetic and epigenetic signals are found predictive to the distribution of intra-individual divergence of alternative splicing.

Poster for 2013 International Conference of Genomics

Qingdao, China

2014

**Yu L**, Chen B, Zhang Z.

::: aside
Some notes in the sidebar.
:::

image

If the sidebar is too long, the problem is probably inevitable (I'm not sure; this needs investigation). The sidebar is just a sidebar. Practically, you probably should not stuff it with too much content.

You're right: it is inevitable with floating elements. The logic of paged.js is the following: if an element overflows on another page, the chunker will detect it and create a new page. Here, the first element (#aside), that is floating right, overflows: the chunker creates a new page, position the remaining content in the new page and take the following element (#main). This also explains why you needed to switch #main and #aside in https://github.com/rstudio/pagedown/commit/71631aa30c55cd2b61b3ac34063252b373e557eb
We only can use floating elements that have a height smaller than the page content height.

Thank you both!

Was this page helpful?
0 / 5 - 0 ratings