如何在 rMarkdown flexdashboard 中水平对齐输入元素

Question

它们默认显示在彼此下方

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

```{r input}

numericInput(inputId="a",label=NULL,value = 5,min = 1,max = 15)

selectInput(inputId="b",label=NULL,c("x","y","z"))


```

Answer 1

选项 1：

将元素包装在一个额外的 div 容器中，id 为 myGroup，并向 individual 子元素添加 CSS 样式：

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

<style>
#myGroup > div {
  width: 45% !important;
  float: left !important;
  margin: 10px !important;
}
</style>

```{r input}
div(numericInput(inputId="a",label=NULL,value = 5,min = 1,max = 15),
selectInput(inputId="b",label=NULL,c("x","y","z")), id='myGroup')
```

选项 2：

另一种选择是向具有 jQuery:

的元素添加 individual class

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

<style>
.myClass {
  width: 45% !important;
  float: left !important;
  margin: 10px !important;
}
</style>

```{r input}
numericInput(inputId="a",label=NULL,value = 5,min = 1,max = 15)
selectInput(inputId="b",label=NULL,c("x","y","z"))
```

<script type="text/javascript">
  $(document).ready(function() {
    $('.form-group').addClass('myClass');
  });
</script>

每个输入元素都包含在带有 class form-group 的 div 容器中。我们 select 这些 div 容器并向它们添加 class myClass，我们在上面已经定义了它们。

（$(document).ready(function() { ... }); 部分只说 ... 应该在文档完全加载时执行。）

如何在 rMarkdown flexdashboard 中水平对齐输入元素

How can I align input elements horizontally in rMarkdown flexdashboard

css

r-markdown

shiny