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:
strip widgets as containers (https://openstagecontrol.ammd.net/docs/widgets-reference/#strip)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. 
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)
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
Ok, you just have to set the strips’ heights to
autoinstead of100rem. (I’m referring to the 8 strips that contain the buttons, you can edit all of them at once by selecting a button, pressctrl+upand thenctrl+a)
I have tried that example, and introduce this (and similar combinations including auto) in the strips, but nothing happens
:host {
width: calc(100% - 100rem);
height: calc(100%- auto);
}
I think you meant to put this in the parent strip css. Also note that you need to set the width property to auto to be able to set it via css.
height: calc(100%- auto);
auto is not a valid value in css calc()
Howdy! Bumping this topic, if that's okay! Having (I believe) a similar issue to the original poster but the techniques in this thread haven't worked for me so maybe I'm missing something. I'm trying to get my .json to resize to match the browser size on my iPad without generating scroll bars.
I'll include a dropbox link to my .json file as well as a small .mov of the issue I'm having. Any help is greatly appreciated! I'm still a bit of a novice at this! Thank you!
Everything needs to be reworked here if you want to make it responsive: almost all containers should should have a vertical or horizontal layout instead of the default layout where widgets are positioned at absolute coordinates (which is why you get scrollbars). I'd recommend starting again from scratch here to get to learn how it works instead of adapting a existing session.
Thank you! How do I change the layout of containers? Which dropdown/field in the editor do I need to modify? Thanks!
The layout property in the style section.
