2017-11-21 4 views
0

私はShiny Appを開発しています。テキストをTextAreaInputの中心に揃えました。しかし、私はまだテキストボックスの中央にテキストを揃える必要があります。 (すなわち)入力されたテキストは、textInputの上下の真ん中にあります。つまり、私は垂直配置をしたいと思います。RShinyのtextInputの真ん中にテキストを正確に揃える方法は?

require(shiny) 
require(shinyjs) 
#install.packages("shinyjs") 

ui = fluidPage(useShinyjs(), 
       inlineCSS(list('.lightpink' = "background-color: lightpink",'.red' = "background-color: red", "textarea" = 'text-align: center', '#text3 ' = 'text-align: center')), 

       fluidRow(
        column(3,numericInput("count", "No. of boxes",value = 3, min = 2, max = 10),actionButton("View","view") 
       ) 
       ), 
       fluidRow(uiOutput("inputGroup")), 
       fluidRow(column(3,wellPanel(textOutput("text3")))) 

) 

# takes in two arguments 
sumN <- function(a, x){ 
    a <- sum(a, as.numeric(x),na.rm=T) 
    return(a) 
} 

server <- function(input, output, session) { 

    Widgets <- eventReactive(input$View,{ input_list <- lapply(1:(input$count), 
                  function(i) { 
                   inputName <- paste("id", i, sep = "") 
                   textInputRow <- function (inputId,value) { 
                   textAreaInput(inputName,"", width = "200px", height = "43px", resize = "horizontal") 
                   #numericInput(inputName,"",1,0,100) 
                   } 
                   column(4,textInputRow(inputName, "")) }) 
    do.call(tagList, input_list)},ignoreInit = T) 

    output$inputGroup = renderUI({Widgets()}) 



    getvalues <- reactive({ 
    val <- 0 
    for(lim in 1:input$count){ 
     observeEvent(input[[paste0("id",lim)]], { 
     updateTextAreaInput(session,paste0("id",lim), value = ({ 
      x = as.numeric(input[[paste0("id",lim)]]) 
      if(!(is.numeric(x))){0} 
      else if(!(is.null(x) || is.na(x))){ 
      if(x < 0){ 
       0 
      }else if(x > 100){ 
       100 
      } else{ 
       return (isolate(input[[paste0("id",lim)]])) 
      } 
      } 
      #else{0} 
      else if((is.null(x) || is.na(x))){ 
      0 
      } 
     }) 
     ) 
     }) 
     req(as.numeric(input[[paste0("id",lim)]]) >= 0 & as.numeric(input[[paste0("id",lim)]]) <= 100) 
     val <- sumN(val,as.numeric(input[[paste0("id",lim)]])) 
    } 
    val 
    }) 

    output$text3 <- renderText({ 
    #getvalues() 
    # if(getvalues() > 100){ 
    # 0 



    # } 
    #else(getvalues()) 

    getvalues() 

    }) 

    observeEvent(getvalues(), { 

    nn <- getvalues() 

    if(is.numeric(as.numeric(nn)) & !is.na(as.numeric(nn)) & nn == 100) { 

     removeClass("text3", "red") 
     addClass("text3","lightpink")   

    } else { 

     addClass("text3","red") 

    } 

    }) 


} 

shinyApp(ui=ui, server = server) 

出力のスクリーンショット:更新されたコードを使用して

enter image description here

、これが直面している問題である。

enter image description here

垂直配向がRで可能です?この問題で助けてもらえますか?

ありがとうございます。行の高さが、そうでない場合は行の高さは、ブートストラップフォームコントロールによってoverwritenされた後

+0

スクリーンショットでスタイリングする必要があるのに役立ちますしてください? – amrrs

+0

回答を確認してください。 – amrrs

答えて

0

だけ

inlineCSS(list('.lightpink' = "background-color: lightpink",'.red' = "background-color: red", "textarea" = 'text-align: center;line-height: 30px !important;vertical-align: middle;', '#text3 ' = 'text-align: center'))' 

重要にCSSの行を変更!は重要です。

と44

希望へのテキスト入力の高さを変更するには、この

+0

これは既にコード内にあり、問題は垂直方向の配置です。 – amrrs

+0

しかし、NumericInputの数値が影響を受けます。それを解決する方法はありますか? –

+0

申し訳ありませんが、今私は垂直アラインメントへの回答を変更しました –

2

.form-controlpadding

require(shiny) 
require(shinyjs) 
#install.packages("shinyjs") 

ui = fluidPage(useShinyjs(), 
       inlineCSS(list('.lightpink' = "background-color: lightpink",'.red' = "background-color: red", "textarea" = 'text-align: center', '#text3 ' = 'text-align: center', '.form-control' = 'padding:10px; text-align: center;')), 

       fluidRow(
        column(3,numericInput("count", "No. of boxes",value = 3, min = 2, max = 10),actionButton("View","view") 
       ) 
       ), 
       fluidRow(uiOutput("inputGroup")), 
       fluidRow(column(3,wellPanel(textOutput("text3")))) 

) 

# takes in two arguments 
sumN <- function(a, x){ 
    a <- sum(a, as.numeric(x),na.rm=T) 
    return(a) 
} 

server <- function(input, output, session) { 

    Widgets <- eventReactive(input$View,{ input_list <- lapply(1:(input$count), 
                  function(i) { 
                   inputName <- paste("id", i, sep = "") 
                   textInputRow <- function (inputId,value) { 
                   textAreaInput(inputName,"", width = "200px", height = "43px", resize = "horizontal") 
                   #numericInput(inputName,"",1,0,100) 
                   } 
                   column(4,textInputRow(inputName, "")) }) 
    do.call(tagList, input_list)},ignoreInit = T) 

    output$inputGroup = renderUI({Widgets()}) 



    getvalues <- reactive({ 
    val <- 0 
    for(lim in 1:input$count){ 
     observeEvent(input[[paste0("id",lim)]], { 
     updateTextAreaInput(session,paste0("id",lim), value = ({ 
      x = as.numeric(input[[paste0("id",lim)]]) 
      if(!(is.numeric(x))){0} 
      else if(!(is.null(x) || is.na(x))){ 
      if(x < 0){ 
       0 
      }else if(x > 100){ 
       100 
      } else{ 
       return (isolate(input[[paste0("id",lim)]])) 
      } 
      } 
      #else{0} 
      else if((is.null(x) || is.na(x))){ 
      0 
      } 
     }) 
     ) 
     }) 
     req(as.numeric(input[[paste0("id",lim)]]) >= 0 & as.numeric(input[[paste0("id",lim)]]) <= 100) 
     val <- sumN(val,as.numeric(input[[paste0("id",lim)]])) 
    } 
    val 
    }) 

    output$text3 <- renderText({ 
    #getvalues() 
    # if(getvalues() > 100){ 
    # 0 



    # } 
    #else(getvalues()) 

    getvalues() 

    }) 

    observeEvent(getvalues(), { 

    nn <- getvalues() 

    if(is.numeric(as.numeric(nn)) & !is.na(as.numeric(nn)) & nn == 100) { 

     removeClass("text3", "red") 
     addClass("text3","lightpink")   

    } else { 

     addClass("text3","red") 

    } 

    }) 


} 

shinyApp(ui=ui, server = server) 
関連する問題