My Rmarkdown report consists of multiple tabs, and I'm exploring how to create vertical tabs on the left side of the screen while filling the rest of the space with tabbed content (similar to this simple example: https://www.w3schools.com/howto/howto_js_vertical_tabs.asp).
To align the tabs vertically, I utilized the following code in my CSS stylesheet:
.tab {
float: left;
width: 15%;
height: 100%;
}
And within my Rmd document, I added:
## {.tabset .tabset-pills .tab}
### Section 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
### Section 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
However, this formatting applies the styles to both headings and body text, rather than just the headings.
To format the body as desired, I referred to a Github issue for assistance: https://github.com/rstudio/rmarkdown/issues/896, incorporating this CSS code:
.tabcontent .tab-content {
float: left;
padding: 0px 12px;
height: 100%;
width: 85%;
}
And updated my Rmarkdown code accordingly:
## {.tabset .tabset-pills .tabcontent}
### Section 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
### Section 2
Ut porttitor leo a diam. Auctor neque vitae tempus quam pellentesque nec nam.
I am now seeking guidance on editing the actual tabs themselves, similar to how I edited the tab content with .tab-content. Is there a similar selector for modifying the tabs directly?