5

I wanted to detect browser width. And trigger width change in css if it is too small.

Basically, I want to change box width is 50% screen width if mobile and 20$ screen width if it larger than mobile screen

Following is my code 

box(
      title = "KPI Table"
      ,div(style="display:block;width: 20%;float: left;margin: 0 10px;"
          ,selectInput('slice', 'Time View'
                   , c('Day', 'Week', 'Month', 'Quarter', 'Year')
                   , selected = 'Month'))
      , DT::dataTableOutput('KPITab')
      , status = "primary"
      , width = 12
      , collapsible = TRUE)
    )

I want to use javascript to detect change in width and change value 20% to 50% in div .

Thanks

Kush Patel
  • 3,685
  • 5
  • 42
  • 65
  • With jQuery it's `$(window).width()` – Hack-R Mar 25 '16 at 16:33
  • 1
    Possible duplicate of [How to get browser width using javascript code?](http://stackoverflow.com/questions/1038727/how-to-get-browser-width-using-javascript-code) – Hack-R Mar 25 '16 at 16:34
  • I don't have knowlege of shiny or javascript, need little big more guidance – Kush Patel Mar 25 '16 at 16:42
  • You should read the answers to the question I linked to, but also note that a responsive framework should address browser width anyway and most components of Shiny are responsive by default. jQuery is a JS library you can include that allows you to detect browser width with the command I gave. – Hack-R Mar 25 '16 at 16:48
  • It is reactive, However, I want to change my input according to my browser width – Kush Patel Mar 25 '16 at 16:49
  • Responsive, not reactive. They're different. With a responsive design you don't have to change your code. Go to this link and find the word responsive. http://shiny.rstudio.com/articles/layout-guide.html If you put your box in a responsive layout it automatically resizes unless you break it by trying to hard-code dimensions. – Hack-R Mar 25 '16 at 16:50
  • What about shinyjs::runjs($(window).width()) ? – Kush Patel Mar 25 '16 at 16:59
  • CSS could solve your problem. I don't know CSS. Try to Google css bootstrap mobile. Check this link http://stackoverflow.com/questions/19827236/bootstrap-3-apply-css-on-mobile-view-only – Bangyou Mar 25 '16 at 19:20
  • thanks, CSS has simple hack "width-minimum", which does What I need to do. – Kush Patel Mar 26 '16 at 17:32

1 Answers1

-1

Css style has option of "width-minimum" is simple alternative solution.

Kush Patel
  • 3,685
  • 5
  • 42
  • 65