Hi,
I'm working with grid template and align-items for a patch.
All is perfect on computer, but when opening the patch on pad the XY pad is not displaying correctly
In the css property I used for the panel :
grid-area: c;
display: flex;
align-items: center;
justify-content: center;
and inside this panel I have an other one containing the xyPad widget and SVG
the panel's css is :
aspect-ratio: 1;
height: auto!important;
and here is the result on pad :
mainSquared.json (129.6 KB)
Unfortunately iPhone/iPads have their own css bugs, the built-in layout configurations should work fine but I can't guarantee every custom css combination will. I'm afraid you'll have to tweak the css yourself to make it work eventually.
It seems aspect-ratio is not supported on iOS < 15, this may be the problem here.
Argh, the aspect-ratio is ok as I am on iOS 16.6
But maybe there's some conflict with using display flex.
Here is your session with flex layouts instead of grids. I find it much easier to work with :). (edit: well, the height/ratio of the xy pad still need some tinkering)
mainSquared.json (129.9 KB)
Attached session should be ok I think, although there is a h-centering issue with the built in client (a css bug fixed in recent chromium versions).
mainSquared.json (134.5 KB)
Centering an object with a variable size and a fixed aspect ratio using css is not a trivial task, I think the simplest solution would be to use @media rules to define fixed widths and heights instead of looking for a single rule that fits any screen size.
Something like this :
mainSquared.json (134.6 KB)
(media rules in panel_mainCenter's css)
So I tried to get something responsive,I lost the battle but learnt a lot.
Your solution is the best, thank you
Just a question about this line, is it default start up size ? :
:host {
--xy-size: 400px;
}
Yes but you can remove it it the media queries cover all possible sizes.