If you are creating a popup using the widget action, then you don’t really have control over the popup window. If you don’t want the slider to appear then you need to adjust the contents of the page so that they don’t extend beyond the space of the popup window. If you want more control over the popup window then you will need to build the popup yourself using the f7-popup component. A little more info on this can be found in the docs and there are many example here in the forum.
There is no oh-label so I assume you mean an oh-label-card:
f7-popup is a solution, but here I’m not sure with this popup window positioning. Don’t how to place it in the center of the page. I have different position on the pc and on the mobile phone.
Sizing and positioning in css is a mammoth topic, and there’s no single correct answer here. One of the simpler standard solutions would be to absolutely position the popup’s top-left corner at 50%, 50% and then use transform to translate the popup 50% up and 50% to the left which puts the center of the popup at the center of it’s container.
If you are using a recent version of OH (3.4 and up I think), you also have access to screen object in the widget expressions:
That expression is valid, but again, it’ll have to be in a property that is parsed by the expression parser so it can’t be in the stylesheet itself.
Thanks, really hard for me.
At this moment I have this popup. But not clear where to add a corner definition.
I don’t need a perfect center of the screen, but right now on the PC is popup in the center of the screen but on the mobile phone is fully in the top left corner.
You would need to set the popup to have relative positioning and then use the top and left style settings.
To get a dynamic value into the stylesheet you have to use css variables and set that variable using the style object. Depending on how the component you are using is constructed, often that variable has to be set in the parent component of the one you want to change. The easiest thing to do in this case is just to “wrap” the component in a container (add some other component or element that doesn’t take any extra space and then make the one you want a child of that component).
yes it works. Thanks
Do you know what is instruction to change sheet size ? I make a font smaller but sheet size is still the same. Is it height : 10px; ? Will this resize a sheet where is a title or value or both ?
I think also must make screen size adaptive.
I need make a smaller a box where value is:
The cards resize to fit their containers by default. If you want the cards to be a different size, you need to understand the structure of your widget enough to know what container the cards are in and how to control the dimensions of that container. If you try to size the card directly then you have to go through the same process of using the css variable and stylesheets.