2016-10-03 20 views
1

私はnumInputsを持っているので、実際にテキストボックス内に表示される数値のテキストサイズを変更したいと思います。変更R光沢のあるウィジェットの入力テキストサイズ

どうすれば達成できますか?

+1

あなたは、CSSを使用することができます。たとえばHTMLの場合はhttp://stackoverflow.com/questions/10363674/change-size-of-text-in-text-input-tagを参照してください(Shinyの 'tags $ style'を使用してCSSを含めることができます) –

答えて

0

@warmoverflowのように、最も簡単な方法はCSSを使用しています。以下は、いくつかのCSSをウィジェットに追加する2つの例です。最初のものは、指定されたidを持つ要素にのみ適用され、2番目は、タイプnumberのすべての要素に適用されます。私はそれがnumInputsではなくnumericInputであると仮定していますが、他の入力ウィジェットでも動作するはずです。

オプション1は、特定の要素

runApp(list(
    ui = shinyUI(fluidPage(
    tags$style("#myNumericInput {font-size:50px;height:50px;}"), 
    numericInput("myNumericInput", "Observations:", 10, min = 1, max = 100), 
    numericInput("otherNumericInput", "Observations 2:", 10, min = 1, max = 100) 
)), 
    server = shinyServer(function(input, output, session) { 
    }) 
)) 

オプション2の変更タイプnumberのすべての要素のCSSのためのCSSを変更します。

runApp(list(
    ui = shinyUI(fluidPage(
    tags$style("[type = 'number'] {font-size:50px;height:50px;}"), 
    numericInput("myNumericInput", "Observations:", 10, min = 1, max = 100), 
    numericInput("otherNumericInput", "Observations 2:", 10, min = 1, max = 100) 
)), 
    server = shinyServer(function(input, output, session) { 
    }) 
)) 

フォントサイズを変更することに加えて、私もこのボックスは、異なるサイズの数を表示するのに十分な大きさになることを確認することです、heighを変更したことに注意してください。

また、カスタム.cssファイルを使用してすべてのカスタムスタイルを配置することもできます。

1

おかげで、私はちょうど私のCSSヘッダーのスタイルタグに

input[type="number"] { 
    font-size: 18px; 
} 

を入れて、それが働きました。

0

このポストを訪問し、他にも面白いかもしれませんただ、一般的なノート:

それはあなたのinputIdがそれで.を持っている場合tags$style('#inputId {}')アプローチが動作しないことが判明します。例えば

  • tags$style("#myNumeric.Input {font-size:8px;}"), 
    numericInput("myNumeric.Input", "Observations:", 10, min = 1, max = 100) 
    

    ...しかし、予想通り、次の作品:

    tags$style("#myNumericInput {font-size:8px;}"), 
    numericInput("myNumericInput", "Observations:", 10, min = 1, max = 100) 
    
      入力テキストの文字サイズを変更しません。
    • 注:_は、inputIdの名前で問題なく動作します。

あなたinputId名で.を保つことを主張した場合、代わりにあなたの入力機能に直接style引数を追加してみてください:

numericInput("myNumeric.Input", "Observations:", 10, min = 1, max = 100, 
       style = "font-size:8px;") 
関連する問題