Plotly with filter checkboxes is trimmed off on left edge in HTML output

[Tb0nes]

Description

Hello,
Pardon my messy formatting. I'm trying to create a scatter plot with responsive data filter check boxes. When knitting to HTML, the left edge trims off. Neither of the following codes seem to work:

• rmarkdown chunk options: {r, fig.width=, fig.height=}
• quarto render options: #| fig-width: & #| fig-height:
• ggplotly: ggplotly(width=, height=)
• plotly layout: ggplotly() %>% layout(width=, height=)
• YAML: fig-responsive: false

Here's an example of the issue with the penguins data set for reproducibility:

---
format:
  html: 
    grid:
      sidebar-width: 300px
      body-width: 900px
      margin-width: 300px
      gutter-width: 1.5rem
fig-responsive: false
editor_options: 
  chunk_output_type: console
---


```{r, label=packages, results='hide', message=FALSE, echo=FALSE}

library(tidyverse)
library(plotly)
library(knitr)
library(crosstalk)
```


```{r, label=data, echo=FALSE}
library(palmerpenguins)
df <- penguins 
df <- drop_na(penguins)
```


INDIVIDUAL PLOT
```{r, label=individual_plot, echo=FALSE}

gg <- df %>% ggplot(aes(x = bill_length_mm, y = bill_depth_mm, color = species)) +
  geom_jitter()

gg 
```

PLOT W FILTER
```{r, label=plot_w_filter, echo=FALSE}
#Create new shared data for crosstalk library
shared_data <- df %>% 
  select(bill_depth_mm, bill_length_mm, species) %>%  
  SharedData$new()

#Create scatter plotly column
plty <- shared_data %>% 
  plot_ly(x = ~bill_length_mm, y = ~bill_depth_mm, color = ~species, type="scatter", mode="markers") 

#Combine filter(left) with scatter plotly (right)
flt_pltl <-bscols(widths = c(2,10), #<-(col1,col2) widths
       list(
            filter_checkbox(id = "species", label = "Species", sharedData = shared_data, group = ~species)),plty)

flt_pltl
```

Here are the knitter plot outputs:
gg

flt_pltl

However, it appears perfectly fine when rendered in the RStudio console output viewer

Any help would be greatly appreciated

[mcanouil]

You can share a Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).

````qmd
---
title: "Reproducible Quarto Document"
format: html
---

This is a reproducible Quarto document using `format: html`.
It is written in Markdown and contains embedded R code.
When you run the code, it will produce a plot.

```{r}
plot(cars)
```

The end.
````

[Tb0nes]

Now updated, thanks for the tip!

[mcanouil]

The issue comes from the bootstrap embedded by PlotLy

See from the developper mode of a browser.
So you have to use the library to make sure it outputs something correct or rewrite the CSS.

include-in-header:
  - text: |
      <style>
      .container-fluid.crosstalk-bscols {
        margin-left: 0;
        margin-right: 0;
      }
      </style>

[Tb0nes]

@mcanouil This is excellent. It worked, thanks so much!