R flexdashboard侧边栏actionButton底部对齐的样式调整方法

你需要给侧边栏开启相对定位，同时给按钮添加绝对定位相关的样式配置，具体修改如下：

需要新增的样式配置 #

• 侧边栏容器新增属性：position: relative，让侧边栏成为按钮绝对定位的参照父容器
• 按钮的style参数新增3组配置：
  • position: absolute; 开启绝对定位，脱离原有文档流
  • bottom: 20px; 控制按钮距离侧边栏底部的间距，数值可自行调整
  • left: 15px; 控制按钮和侧边栏左侧的间距，和侧边栏其他默认内容对齐，也可替换为right: 15px;实现右对齐，或者left: 50%; transform: translateX(-50%);实现居中对齐

修改后的完整代码 #

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
runtime: shiny
---

```{r setup, include=FALSE}
library(flexdashboard)
library(shiny)
library(htmltools)

Column {.sidebar style="position: relative;"} #

actionButton("show", HTML("Test button 123456789"),
             style="background-color: #ec7063 ; border-radius: 10px !important;
                border: none; position: absolute; bottom: 20px; left: 15px;")

observeEvent(input$show, {
      showModal(modalDialog(
        title: "Send me a message",
        "Text Text Text",
        easyClose: TRUE,
        footer: modalButton("Schließen")
      ))
    })

Column {data-width=650} #

Chart A #

内容的提问来源于stack exchange，提问作者TobKel