I have two question :
When I will open a page from the widget, page will open with slider on the side :
How to change a Title font size of the oh-label ?
When I will change a font size in the configuration, only values will change a font
thanks
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.
is it possible insert into font-size somethink like this ? :
=(device.desktop)?(‘1.0vw’):(‘3.0vw’)
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.
ok,
if I will use this:
component: oh-label-card
config:
title: Test
item: Test_sum
stylesheet: |
.card-header {
color: green;
background: yellow;
height: 10vw;
font-size: 3.0vw;
}
fontSize: =(device.desktop)?('1.0vw'):('3.0vw')
trendItem: Test_sum
Then value font size is resizing, but title remains still the same and for PC is too big.
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.
- component: f7-popup
config:
class: myPopup_Pump_Info
style:
height: =(device.desktop)?('40vw'):('105vw')
width: =(device.desktop)?('35vw'):('75vw')
slots:
default:
See here for a brief tutorial:
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).
In this case it would look something like this:
component: div
config:
style:
--my-title-size: =(device.desktop)?('1.0vw'):('3.0vw')
slots:
default:
- component: oh-label-card
config:
title: Test
item: Test_sum
stylesheet: |
.card-header {
color: green;
background: yellow;
height: 10vw;
font-size: var(--my-title-size);
}
fontSize: =(device.desktop)?('1.0vw'):('3.0vw')
trendItem: Test_sum
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 f7-popup takes all the standard css styling, so you can fully specify the height and width with the style object:
- component: f7-popup
config:
class: demo-pop
style:
height: 150px
width: 150px
slots:
default:
- component: ...
No, I mean sheet size of the oh-label-card
I make a title font smaller, also value font smaller, but size of sheet of oh-label-card is still the same
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.