How to fix the code block height or width in Slides

[lizhiwei1994]

Hi, everyone!

Context

I am using revealjs to create a slides. One of the slides 1 and Slides 2 are as follows. In Slides 1 the code chunk and output are displayed appropriately. But in Slides 2, the code chunk is so long that it compresses the output image to a small size.

       

Qusetion

Is there any solution to make the size of the code chunk in Slides 2 the same as in Slides 1. For example, only 5 lines of code are displayed in Slides 2. Then I can use the slider on the right side of the code chunk to show the other lines of code.

Any help will be highly appreciated!

Reproducible code

Click me

---
title: "Untitled"
format: revealjs
editor: visual
execute: 
  echo: true
---
## 
Slides 1

```{r load ggplot2}
#| echo: false
#| include: false
library(ggplot2)
library(magrittr)
pd = position_dodge(.7)
dat = structure(list(Disease = c("Arrhythmia", "Arrhythmia", "Arrhythmia", 
"Arrhythmia", "Cerebrovascular", "Cerebrovascular", "Cerebrovascular", 
"Cerebrovascular", "CHD", "CHD", "CHD", "CHD", "Heart failure", 
"Heart failure", "Heart failure", "Heart failure"), group = c("    <65", 
"    >=65", "    Male", "    Female", "    <65", "    >=65", 
"    Male", "    Female", "    <65", "    >=65", "    Male", 
"    Female", "    <65", "    >=65", "    Male", "    Female"
), PC = c(-2.14, -0.31, -1.22, -0.55, -0.11, -0.05, 0.12, -0.3, 
1.67, 0.84, 1.28, 1.01, 1.23, -0.67, 0.54, -1.09), PC_95_LOW = c(-4.02, 
-1.8, -3.1, -2.23, -0.62, -0.51, -0.36, -0.86, 0.68, 0.09, 0.42, 
0.18, -2.65, -2.65, -1.95, -3.6), PC_95_UP = c(-0.27, 1.19, 0.65, 
1.12, 0.4, 0.41, 0.59, 0.25, 2.67, 1.58, 2.15, 1.83, 5.11, 1.32, 
3.03, 1.42)), class = "data.frame", row.names = c(NA, -16L))
dat
```


```{r }
dat %>% 
  ggplot(aes(x=Disease,y=PC,shape=group,fill=group,colour=group,group=group))+
  geom_hline(yintercept=0,linetype="dashed",colour="black",size=0.5)+
  geom_point(position=pd,size=2)+
  geom_errorbar(aes(ymin=PC_95_LOW,ymax=PC_95_UP),position=pd,width=0.3,size=0.6)
```

## 
Slides 2
```{r}
dat %>% 
  ggplot(aes(x=Disease,y=PC,shape=group,fill=group,colour=group,group=group))+
  geom_hline(yintercept=0,linetype="dashed",colour="black",size=0.5)+
  geom_point(position=pd,size=2)+
  geom_errorbar(aes(ymin=PC_95_LOW,ymax=PC_95_UP),position=pd,width=0.3,size=0.6)+
  scale_y_continuous("Percentage Change (%) and 95% CI",
                     labels = scales::number_format(accuracy = 0.01))+
  scale_shape_manual(values=c(16,23,24,15),
                     guide=guide_legend(title=NULL))+
  scale_fill_manual(values=c("#ea4a50","#325788","dodgerblue","coral1"),
                    guide=guide_legend(title=NULL))+
  scale_colour_manual(values=c("#ea4a50","#325788","dodgerblue","coral1"),
                      guide=guide_legend(title=NULL))+
  theme_bw()+
  theme(panel.grid.major = element_blank(),panel.grid.minor = element_blank())+
  theme(legend.position="top")+ #top
  theme(legend.key=element_blank())+
  theme(legend.background=element_rect(fill="white",colour="black"))+
  theme(legend.text=element_text(size=10,color = 'black'))+
  theme(legend.key.height=unit(0.3,"cm"))+
  theme(axis.text.y=element_text(size=12,angle=0,color = 'black'))+
  theme(axis.text.x=element_text(size=12,color = 'black')) +
  xlab("")
```

[mcanouil]

You could define some CSS class with height set at 5em or anything appropriate for you, see https://quarto.org/docs/reference/cells/cells-knitr.html.

This is related to #2040 and #1581 (if you are not using knitr, which here is not the case).

See the Quarto document content

---
title: "Untitled"
format: revealjs
execute: 
  echo: true
---

## Slides 1

```{=html}
<style>
.fourlinesish {
  height: 5.5em;
}
</style>
```

```{r}
#| include: false
library(ggplot2)
pd = position_dodge(.7)
dat = structure(list(Disease = c("Arrhythmia", "Arrhythmia", "Arrhythmia", 
"Arrhythmia", "Cerebrovascular", "Cerebrovascular", "Cerebrovascular", 
"Cerebrovascular", "CHD", "CHD", "CHD", "CHD", "Heart failure", 
"Heart failure", "Heart failure", "Heart failure"), group = c("    <65", 
"    >=65", "    Male", "    Female", "    <65", "    >=65", 
"    Male", "    Female", "    <65", "    >=65", "    Male", 
"    Female", "    <65", "    >=65", "    Male", "    Female"
), PC = c(-2.14, -0.31, -1.22, -0.55, -0.11, -0.05, 0.12, -0.3, 
1.67, 0.84, 1.28, 1.01, 1.23, -0.67, 0.54, -1.09), PC_95_LOW = c(-4.02, 
-1.8, -3.1, -2.23, -0.62, -0.51, -0.36, -0.86, 0.68, 0.09, 0.42, 
0.18, -2.65, -2.65, -1.95, -3.6), PC_95_UP = c(-0.27, 1.19, 0.65, 
1.12, 0.4, 0.41, 0.59, 0.25, 2.67, 1.58, 2.15, 1.83, 5.11, 1.32, 
3.03, 1.42)), class = "data.frame", row.names = c(NA, -16L))
```


```{r}
#| class-source: fourlinesish
ggplot(dat, aes(x = Disease, y = PC, shape = group, fill = group, colour = group, group = group)) +
  geom_hline(yintercept = 0, linetype = "dashed", colour = "black", size = 0.5) +
  geom_point(position = pd, size = 2) +
  geom_errorbar(aes(ymin = PC_95_LOW, ymax = PC_95_UP), position = pd, width = 0.3, size = 0.6)
```

## 
Slides 2
```{r}
#| class-source: fourlinesish
ggplot(dat, aes(x = Disease, y = PC, shape = group, fill = group, colour = group, group = group)) +
  geom_hline(yintercept = 0, linetype = "dashed", colour = "black", size = 0.5) +
  geom_point(position = pd, size = 2) +
  geom_errorbar(aes(ymin = PC_95_LOW, ymax = PC_95_UP), position = pd, width = 0.3, size = 0.6) +
  scale_y_continuous("Percentage Change (%) and 95% CI", labels = scales::number_format(accuracy = 0.01)) +
  scale_shape_manual(values = c(16, 23, 24, 15), guide = guide_legend(title = NULL)) +
  scale_fill_manual(values = c("#ea4a50", "#325788", "dodgerblue", "coral1"), guide = guide_legend(title = NULL)) +
  scale_colour_manual(values = c("#ea4a50", "#325788", "dodgerblue", "coral1"), guide = guide_legend(title = NULL)) +
  theme_bw() +
  theme(panel.grid.major = element_blank(), panel.grid.minor = element_blank()) +
  theme(legend.position = "top") + # top
  theme(legend.key = element_blank()) +
  theme(legend.background = element_rect(fill = "white", colour = "black")) +
  theme(legend.text = element_text(size = 10, color = "black")) +
  theme(legend.key.height = unit(0.3, "cm")) +
  theme(axis.text.y = element_text(size = 12, angle = 0, color = "black")) +
  theme(axis.text.x = element_text(size = 12, color = "black")) +
  xlab("")
```

Side notes on the ggplot2 code:

• scale_*(..., guide = guide_legend(title = NULL))is the complicated way for scale_*(..., name = NULL)) or labs(* = NULL).
  scale_fill_manual(..., guide = guide_legend(title = NULL)) = scale_fill_manual(name = NULL) = labs(fill = NULL)
• xlab("") is not an empty title, it's a one line zero width string title/lab. NULL is the value you want if you actually doesn't want a label/title.
• I am assuming the multiple theme(...) is because of some step-by-step approach for the slides.

[lizhiwei1994]

@cderv, I thank you too. It's a pleasure to help improve Quarto and I hope Quarto becomes more and more better. 😄

[mcanouil]

@lizhiwei1994 You might be interested in #2094 by the way.
Especially, the comment with the fix: #2094 (reply in thread).
Although, some display/layout tweaks are required.

[lizhiwei1994]

@mcanouil, Thanks~ I would see #2094 carefully.

[cderv]

@lizhiwei1994 The issue with output-location: column will be resolved in next stable version (and before in next pre release).
This could be a good option to show code + plots on the same slide, with a better sizing.

Just adding this info so that you can consider even this is not exactly what you were looking for (bigger plot than code)

[lizhiwei1994]

@cderv. I got it. Thank you for your efforts. Have a nice day and be well. 😁