2016-09-01 4 views
0

彼らは、デフォルトでお互いの下に表示されflexdashboard

--- 
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")) 


``` 

enter image description here

答えて

0

オプション1:追加のdivコンテナ内

ラップ要素を持ちますid myGroupとし、個々の子要素に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を使って要素に個々のクラスを追加することであろう。

--- 
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> 

各入力要素は、クラスform-groupとdivのコンテナ内に含まれます。これらのdivコンテナを選択し、上記に定義したクラスmyClassを追加します。

enter image description here

(一部$(document).ready(function() { ... });のみドキュメントが完全にロードされたとき...は、実行すべきであると述べています。)

+0

感謝。これは、提起された質問に答えるものです。しかし、非入力をカバーするように一般化することは可能ですか?例えば、入力の1つを、あるクラスのhelpText()に置き換えたい場合は、「help-block」を追加することができます。何とかスクリプト? tx – pssguy