quarto-dev / quarto-dev/quarto-cli

broken styling with `bslib::navest_card_pill()` (HTML document)

Open
#7,657 4 comments 1 reaction 1 assignee View on GitHub

@cscheid is already working on this.

Since Oct 22, 2024.

bug html upstream
Dominant language
JavaScript
Stars
6k
Forks
458
Avg merge
1d 9h
Merged PRs (30d)
41

Description

Bug description

When using the R {bslib} function navset_card_pill(), the CSS styling on the tabs appears to broken. While I know quarto has its own tabset functionality, navset_card_pill() is useful for putting them in full screen (at least until the lightbox issue is fixed).

Steps to reproduce
---
title: "Bslib Tabs"
format: 
  html:
    embed-resources: true
---

```{r}
library(bslib)
library(shiny)

navset_card_pill(
  full_screen = TRUE,
  placement = "above",
  nav_panel(title = "One", p("First tab content.")),
  nav_panel(title = "Two", p("Second tab content.")),
  nav_spacer(),
  nav_menu(
    title = "Other links",
    align = "right",
    nav_panel("Three", p("Third tab content"))
  )
)
```

Expected behavior

It should look as it does in the RStudio viewer pane.

image

Actual behavior

It looks like this instead.

image

Your environment
  • IDE: 2023.03.0+386
  • OS: Windows 10
Quarto check output
$ quarto check

[>] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.1: OK
      Dart Sass version 1.55.0: OK
[>] Checking versions of quarto dependencies......OK
[>] Checking Quarto installation......OK
      Version: 1.3.450
      Path: C:\Users\jd38\AppData\Local\Programs\Quarto\bin
      CodePage: 1252

[>] Checking basic markdown render....OK

[>] Checking Python 3 installation....(None)

      Unable to locate an installed version of Python 3.
      Install Python 3 from https://www.python.org/downloads/

[>] Checking R installation...........OK
      Version: 4.2.3
      Path: C:/Users/jd38/AppData/Local/Programs/R/R-4.2.3
      LibPaths:
        - C:/Users/jd38/AppData/Local/R/win-library/4.2
        - C:/Users/jd38/AppData/Local/Programs/R/R-4.2.3/library
      knitr: 1.44
      rmarkdown: 2.25

[>] Checking Knitr engine render......OK

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.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.