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
fig 2: 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
Post a Comment