New to R Markdown and am having some formatting difficulties.
I have an html document with 7 h2 headers, with the last three having h3 and h4 headers. The contents of each h2 header is under a collapsible section. h2s #5, #6, #7 have tabsets on their respective h3s with tabs made up of the h4 headers.
Everything works fine when I don't include the tabsets, but I would like to have them for organization purposes. I've tried setting everything with different headers, I've tried putting the end tabset phrase in different places, but this seems to be the only set up that has everything else where it should end up except for the weird formatting that is happening to the h2s #6 and #7. Where they overextend to the left.
I was getting errors from the submission so I put the rest of my post in a google doc... It kept saying there was unformatted code even though I had literally tried posting it with all the code removed. Anyways, hopefully this will go through. My code was formatted properly, and it looked ok in the preview, so I'm not sure what was going on there. Hopefully the Google Doc link works. There are also links in the google doc to some images showing the issues.
Thanks in advance!
---
title: "TEST"
output:
html_document:
toc: true
toc_float: true
toc_depth: 3
df_print: default
---
```{css Scroll limit, echo=FALSE}
pre {
max-height: 300px;
overflow-y: auto;
}
pre[class] {
max-height: 400px;
}
pre code
{
white-space: pre-wrap;
}
```
```{css, echo = FALSE}
h2, #TOC ul>li {
}
.tocify-header > .tocify-item {
text-indent: initial;
padding-left: 2em;
}
```
Some information
<hr style="border:2px solid gray"> </hr>
some more information
<hr style="border:2px solid gray"> </hr>
## __Header1__ {#top1}
<hr style="border:3px solid red"> </hr>
<details>
<summary><font size="3"> __[Click to Display "1st Section""]__</font></summary>
<hr style="border:3px solid red"> </hr>
Body of text for Section 1 goes here
<center><font size="5">[[Return to Top]](#top1) __or__ [[Return Home]](#header)</font></center>
</details>
<hr style="border:3px solid red"> </hr>
<font size="4"><center>--------- __Subject Division__ ------------</center></font>
## __Header1__ {#top2}
<hr style="border:3px solid orange"> </hr>
<details>
<summary><font size="3"> __[Click to Display "2nd Section""]__</font></summary>
<hr style="border:3px solid orange"> </hr>
Body of text for Section 2 goes here
<center><font size="5">[[Return to Top]](#top2) __or__ [[Return Home]](#header)</font></center>
</details>
<hr style="border:3px solid orange"> </hr>
## __Header3__ {#top3}
<hr style="border:3px solid yellow"> </hr>
<details>
<summary><font size="2"> __[Click to Display "3rd Section""]__</font></summary>
<hr style="border:3px solid yellow"> </hr>
Body of text for Section 3 goes here
<center><font size="5">[[Return to Top]](#top3) __or__ [[Return Home]](#header)</font></center>
</details>
<hr style="border:2px solid yellow"> </hr>
## __Header4__ {#top4}
<hr style="border:3px solid green"> </hr>
<details>
<summary><font size="2"> __[Click to Display "4th Section""]__</font></summary>
<hr style="border:3px solid green"> </hr>
Body of text for Section 4 goes here
<center><font size="5">[[Return to Top]](#top4) __or__ [[Return Home]](#header)</font></center>
</details>
<hr style="border:2px solid green"> </hr>
<font size="4"><center>--------- __Subject Division__ ------------</center></font>
## __Header5__ {#top5}
<hr style="border:3px solid blue"> </hr>
<details>
<summary><font size="2"> __[Click to Display "5th Section""]__</font></summary>
<hr style="border:3px solid blue"> </hr>
Body of text for Section 5 goes here
### subhead1 {.tabset .tabset-fade}
Here is going to go a brief note about our data frames and how to follow along in the tabs
#### tab1
tab 1 info
#### tab2
tab 2 info
#### tab3
tab 3 info
### {.unlisted .unnumbered}
This should be back under the section header and not under a tab
<center><font size="5">[[Return to Top]](#top5) __or__ [[Return Home]](#header)</font></center>
</details>
<hr style="border:2px solid blue"> </hr>
## __Header6__ {#top6}
<hr style="border:3px solid purple"> </hr>
<details>
<summary><font size="2"> __[Click to Display "6th Section""]__</font></summary>
<hr style="border:3px solid purple"> </hr>
Body of text for Section 6 goes here
### subhead1 {.tabset .tabset-fade}
some general info
#### tab1
tab 1 info
#### tab2
tab 2 info
### {.unlisted .unnumbered}
### subhead2 {.tabset .tabset-fade}
some general info
#### tab1
tab 1 info
#### tab2
tab 2 info
### {.unlisted .unnumbered}
### subhead3 {.tabset .tabset-fade}
some general information
#### tab1
tab 1 info
#### tab2
tab 2 info
### {.unlisted .unnumbered}
content below tabbed region
<center><font size="5">[[Return to Top]](#top5) __or__ [[Return Home]](#header)</font></center>
</details>
<hr style="border:2px solid purple"> </hr>
## __Header7__ {#top7}
<hr style="border:3px solid pink"> </hr>
<details>
<summary><font size="2"> __[Click to Display "7th Section""]__</font></summary>
<hr style="border:3px solid pink"> </hr>
Body of text for Section 7 goes here
### subhead1 {.tabset .tabset-fade}
some text here
#### tab1
tab content 1
#### tab2
tab content 2
#### tab3
tab content 3
### {.unlisted .unnumbered}
### subhead2 {.tabset .tabset-fade}
some text here
#### tab1
tab content 1
#### tab2
tab content 2
#### tab3
tab content 3
#### tab4
tab content 4
#### tab5
tab content 5
### {.unlisted .unnumbered}
content below tabbed region
<center><font size="5">[[Return to Top]](#top7) __or__ [[Return Home]](#header)</font></center>
</details>
<hr style="border:2px solid pink"> </hr>
End of document