2014-01-10 77 views
3
創建的文本輸入控制的增加寬度

我幾乎完成了Web應用程序,其允許用戶到子集數據幀中的網絡應用程序基礎,使用由textInput創建的文本輸入控制;請參閱我的related question以將該字符串解析爲表達式。R:有光澤:由`textInput`

這將是更加人性化,如果我能增加該文本輸入控件的寬度。有人知道怎麼做這個嗎?

乾杯任何幫助。

回答

7

如果textInput如下:

textInput(inputId="someid", label="somelable", value = 0.0) 
tags$head(tags$style(type="text/css", "#someid {width: 150px}")), 

你可以添加一些CSS。

tags$head(
    tags$link(rel = 'stylesheet', type = 'text/css', href = 'styles.css'), 
) 

,並添加styles.css

+0

優良;非常感謝! – Mullefa

0

適當的條目我創建了一個custom.css文件這樣的事情。

custom.css文件在應用主目錄www目錄。

此行添加到custom.css文件,以使所有的selectize輸入,滿足它們的容器的整個寬度。

.shiny-input-container:not(.shiny-input-container-inline) { 
    width: 100%; 
} 

這對於具有長名稱或多選項選項的文本輸入或下拉菜單非常有用。這也只是讓應用看起來更加飽滿。我把所有的過濾器放在頁面的頂部,如果我不強制輸入來填充容器,則會有很多空白區域。

然後你就可以很容易地在ui.R文件通過設置包含輸入容器中列的寬度,控制你輸入的內容。事情是這樣的......

fluidRow(
    column(4, offset = 0, align = 'center', uiOutput(ns("select_category_type"))), 
    column(4, offset = 0, align = 'center', uiOutput(ns("select_category_group"))), 
    column(4, offset = 0, align = 'center', uiOutput(ns("select_category"))) 
), 
fluidRow(
    column(6, offset = 3, align = 'center', uiOutput(ns("select_year"))) 
) 

```

您還需要加載你custom.css文件中ui.R文件。如果使用閃亮的儀表板,或者在使用標準UI的fluidPage函數中,可以將其作爲dashboardBody函數中的第一條語句。

dashboardBody(
    includeCSS("www/custom.css"), 
    tabItems(...