CODEWITHSUNDEEP
cssrtabsr-markdown
hobbsda
hobbsda

Reputation: 21

Can I create vertical tabs using {.tabset} and a CSS stylesheet in Rmarkdown?

I have a report with multiple tabs in Rmarkdown, and I am trying to figure out how to make vertical tabs that show up on the left side of the screen with the tabbed content filling the rest of the screen (like this simple example: https://www.w3schools.com/howto/howto_js_vertical_tabs.asp).

I was able to get the tabs to align vertically using this code in my css stylesheet:

.tab {
    float: left;
    width: 15%;
    height: 100%;
}

and this code in my Rmd doc:

## {.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.

but it formats the headings and the body with .tab, instead of just the headings.



I was able to format the body how I want it with help from this github issue: https://github.com/rstudio/rmarkdown/issues/896, using this css code:

.tabcontent .tab-content {
    float: left;
    padding: 0px 12px;
    height: 100%;
    width: 85%;
}

and this Rmarkdown code:

## {.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.

Is there some item under which I can edit the actual tabs, like there is for the tab content with .tab-content?

Upvotes: 2

Views: 1479

Answers (1)

Nicole Kappelhof
Nicole Kappelhof

Reputation: 65

This is an old question, and I'm not entirely sure it this what you meant, but the following code displays the pills on the side of the window. Oddly enough it doesn't seem to work in the Rstudio viewer, but you need to "open in Browser" to see the effect

`

---
title: "Ext"
author: "me"
date: "14 may 2021"
output: html_document
---

```{css, echo=FALSE}
.container-fluid.main-container{
max-width: 85%
}
.tabset{
    display: flex;

}

.nav.nav-pills {
    flex: 15%;
    width: 100%;
}
.nav.nav-pills li{
    width: 100%;
}
.tab-content{
    flex: 85%;
    width: 100%
}

```


## {.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.

`

Upvotes: 1

Related Questions