Auto Responsive to Screen Size

Is there anyway to auto-size the containers or elements to fit IPAD or different screens?

If can’t be done via OSC maybe using CSS can shrink or help fit the ipad? Basically, trying to go from a “demo template” instead of building from scratch.

So wondering if I can shrink it to fit since alot of the templates expand past the iPad screen and create scrolls bars.

To make your interface adapt to the screen size you have multiple tools:

1 Like

Hey Jean,

I’ve figured out how to get the width of my screen to be auto responsive to my ipad but can’t figure out the height. I’ve tried 100%, 100rem, and tried messing with some css but perhaps I’m just not understanding or don’t have the correct combination. I’m using a strip as my container as you suggested.

Here is my code for the strip/first button:

"type": "strip",
          "top": 0,
          "left": "auto",
          "id": "strip_4",
          "linkId": "",
          "width": "100%",
          "height": "100%",
          "label": false,
          "color": "auto",
          "css": ":host {\n\n    width: calc(100% - 100rem);\n    height: calc(100% - 100rem);\n\n}",
          "scroll": false,
          "horizontal": false,
          "stretch": false,
          "border": true,
          "spacing": 0,
          "default": "",
          "value": "",
          "precision": 2,
          "address": "/strip_4",
          "preArgs": "",
          "target": "",
          "bypass": false,
          "variables": "@{parent.variables}",
          "widgets": [
            {
              "type": "strip",
              "id": "strip_types_select2",
              "label": false,
              "height": 80,
              "color": "auto",
              "css": "",
              "widgets": [
                {
                  "type": "push",
                  "top": 70,
                  "left": 300,
                  "id": "push_100",
                  "linkId": "",
                  "width": "auto",
                  "height": "auto",
                  "label": "auto",
                  "color": "auto",
                  "css": "",
                  "doubleTap": false,
                  "on": 1,
                  "off": 0,
                  "norelease": false,
                  "value": "",
                  "precision": 2,
                  "address": "/control_sequence_100",
                  "preArgs": "",
                  "target": "midi:OpenStageControl",
                  "bypass": false
                },

"horizontal": true,
              "stretch": true,
              "spacing": 0,
              "variables": {},
              "border": true,
              "scroll": false,
              "address": "/strip_types_select11",
              "preArgs": [],
              "linkId": "",
              "default": "",
              "value": "",
              "precision": 0,
              "target": [],
              "bypass": false,
              "left": "auto",
              "top": "auto",
              "width": "auto",
              "tabs": []
            }

If I understand correctly, you have an horizontal strip as your main container and vertical strips a column containers ? Did you set the column strips’ height to 100% as well ?

Yes exactly, i have a horizontal strip as my main container and then vertical strips. However, if I set my vertical strips to 100% height this is what it looks like.

So I set the height individually but it of course doesn’t work with auto responsive. I’ve tried 100% height as well as 100rem. the 100rem just cuts it off unless I enable scrollbars which isn’t what I want.

Am I doing an order wrong or using the strips wrong?

Can you upload your session file so that I try to fix it directly ?

Dillons Open Stage Control v1.0.json (2.1 MB)

No problem. Disregard my messy template and tabs. I test alot of stuff out haha! It’s the last tab, the “buttons tab” which is where I was trying to get this to work.

Thanks Jean! Looking forward to knowing what I’m doing wrong. :smiley:

Ok, you just have to set the strips’ heights to auto instead of 100rem. (I’m referring to the 8 strips that contain the buttons, you can edit all of them at once by selecting a button, press ctrl+up and then ctrl+a)

1 Like

Perfect! That worked. It’s always something simple that I’m just not seeing.

Thanks Jean! As well, thanks for the quick tip about multi-editing quickly, thats a time saver! <3