Alignment of control widgets on fluidPage in shiny R -


i working on shiny app, ran problem placement of widgets depending on size of browser window. using nested column , fluidrow place widgets (see code below). want left side of widgets b , d aligned, , right side of b , e (see fig 1), when increase size of window, @ point alignment of right side doesn't hold anymore (fig 2).

fig 1: correct layout correct layout

fig 2: incorrect layout incorrect layout

here reproducible example:
ui.r:

library(shiny)  shinyui(fluidpage(column( 6,fluidrow(column(6, numericinput("a", label = "a", 0)),            column(6, numericinput("b", label = "b", 0))), fluidrow(     column(6, numericinput("c", label = "c", 0)),     column(3, numericinput("d", label = "d", 0)),     column(3, numericinput("e", label = "e", 0)) )  ),  column(5, offset=1,h1("other stuff")) )) 

server.r:

library(shiny)  shinyserver(function(input, output) {}) 

okay, here suggestions:

1) fix numericinputs 100% width. alle inputs looking lengthy, @ least have total control on input size vs. column size.

code copy:

    shinyui(fluidpage(column(         6,fluidrow(column(6, numericinput("a", label = "a", 0, width = '100%')),                    column(6, numericinput("b", label = "b", 0, width = '100%'))),         fluidrow(             column(6, numericinput("c", label = "c", 0, width = '100%')),             column(3, numericinput("d", label = "d", 0, width = '100%')),             column(3, numericinput("e", label = "e", 0, width = '100%'))         )),         column(5, offset=1,h1("other stuff"))     )) 

2) use fixedpage layout. makes stretching less "nice", if dont suspect users changing page sizes time, might valid choice.

code copy:

    shinyui(fixedpage(column(         6,fixedrow(column(6, numericinput("a", label = "a", 0)),                    column(6, numericinput("b", label = "b", 0))),         fixedrow(             column(6, numericinput("c", label = "c", 0)),             column(3, numericinput("d", label = "d", 0)),             column(3, numericinput("e", label = "e", 0))         )),         column(5, offset=1,h1("other stuff"))     )) 

3) closest looking for. happens, column(...) takes additional arguements, can used influence style html-like attributes. column(3, ..., align = 'right') aligns column right border (of parent column!). but, since input "b" becomes smaller, actual column width, doesn't unless again fix "b"s width 100% = full column width.

code copy:

    shinyui(fluidpage(column(         6, fluidrow(column(6, numericinput("a", label = "a", 0)),                     column(6, numericinput("b", label = "b", 0, width = '100%'))),         fluidrow(           column(6, numericinput("c", label = "c", 0)),           column(3, numericinput("d", label = "d", 0)),           column(3, numericinput("e", label = "e", 0), align = 'right')         )),         column(5, offset=1,h1("other stuff"))     )) 

i hope somehow answers questions.


Comments

Popular posts from this blog

php - Wordpress website dashboard page or post editor content is not showing but front end data is showing properly -

javascript - Get parameter of GET request -

javascript - Twitter Bootstrap - how to add some more margin between tooltip popup and element -