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

Improve this question
9
  • With jQuery it's $(window).width()
    – Hack-R
    Commented Mar 25, 2016 at 16:33
  • 1
    Possible duplicate of How to get browser width using javascript code?
    – Hack-R
    Commented Mar 25, 2016 at 16:34
  • I don't have knowlege of shiny or javascript, need little big more guidance
    – Kush Patel
    Commented Mar 25, 2016 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
    Commented Mar 25, 2016 at 16:48
  • It is reactive, However, I want to change my input according to my browser width
    – Kush Patel
    Commented Mar 25, 2016 at 16:49

1 Answer 1

Reset to default
-1

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

Improve this answer
1
  • So what element to apply to? Example?
    – geotheory
    Commented Mar 29, 2018 at 19:15

Not the answer you're looking for? Browse other questions tagged or ask your own question.