2017-10-04 10 views
0

私のShinyアプリケーションでは、このような外観のdateRangeInputウィジェットがあります。RきらめきのあるサイズとdateRangeInputウィジェットのフォーマット

enter image description here

1)私は、ボックス内の日付のサイズを大きくし、正常な状態に大胆からテキストを変更したいと思います。

2)また、(wellPanel)の高さを上げるために、ウィジェットタイトルとウィジェット入力の間のスペースを増やしたいと思います。 width関数を使用して幅を制御できますが、高さを変更できないようです。

私はCSSの専門家ではないので、私はこれを修正するのが難しいです。

ここでは私の試みはui.Rですが、うまくいかないようです。

column(wellPanel(
tags$style(type='text/css', ".selectize-input { font-size: 20px; line-height: 24px;}"), 
dateRangeInput("inp_pg1daterange", 
       label = paste('Date range selection'), 
       start = min(results_combined$Date), 
       end = max(results_combined$Date), 
       separator = " - ", 
       weekstart = 1 

) 

ご協力いただきますようお願い申し上げます。

答えて

1

dateRangeInputのサンプルコードを使用しました。触れる2つのCSS要素。

は、ウィジェットとタイトルの間のギャップを増加させるためのコードを更新:

enter image description here

if (interactive()) { 

    ui <- fluidPage(

    tags$title('This is my page'), 

    tags$style('.input-sm {font-size: 16px; } label {font-weight: 500; margin-bottom: 15px; }'), 

    dateRangeInput("daterange1", "Date range:", 
        start = "2001-01-01", 
        end = "2010-12-31"), 

    # Default start and end is the current date in the client's time zone 
    dateRangeInput("daterange2", "Date range:"), 

    # start and end are always specified in yyyy-mm-dd, even if the display 
    # format is different 
    dateRangeInput("daterange3", "Date range:", 
        start = "2001-01-01", 
        end = "2010-12-31", 
        min = "2001-01-01", 
        max = "2012-12-21", 
        format = "mm/dd/yy", 
        separator = " - "), 

    # Pass in Date objects 
    dateRangeInput("daterange4", "Date range:", 
        start = Sys.Date()-10, 
        end = Sys.Date()+10), 

    # Use different language and different first day of week 
    dateRangeInput("daterange5", "Date range:", 
        language = "de", 
        weekstart = 1), 

    # Start with decade view instead of default month view 
    dateRangeInput("daterange6", "Date range:", 
        startview = "decade") 
) 

    shinyApp(ui, server = function(input, output) { }) 
} 
+0

おかげで、あなたのソリューションを働きました。ちょっと別の簡単な質問:ウィジェットのタイトル(「日付範囲:」)とウィジェットの入力画面(つまり日付)の間のスペースを増やすにはどうすればよいですか? – Varun

+0

質問を更新してください。私はその間に確認します。 – amrrs

関連する問題