Popup Position

[tom77]

Hi,
i try to modify the popup position of a circular slider by CSS is there any way to do this ?

[admin]

You can only target all circular slider popups in a certain plan like this:

Code:

#plan-1 .popover.control-circularslider {
  left: 0 !important;
  top: 0 !important;
}

Don't forget to change 1 to your plan id, you can see it via developer tools in your browser.

[baggins]

Hi,

I wanted to use this to control the position of the circular slider associated with a gauge, but the position of the slider jumps wildly over the screen. The only values that do something are 0 and 1, everything else seems to have no effect.

What values do I need to use to position the slider relative to the gauge?

Thanks.

[admin]

Any value apart from 0 must have some kind of units, like 10px or 33%.

[baggins]

Thanks, I should have known that...

Is there a way to change the size of the slider? I tried first to change the size of the slider in the visualization parameters of the object settings, but this doesn't seem to do anything, apart from the line thickness.


Then I tried:

Code:

#plan-100 .popover.control-circularslider {
 left: 370px !important;
 top: 30px !important;
 width: 150px;!important;
 height: 150px;!important;
}

but that did nothing either.

As it is at the moment, the slider looks too big compared to the gauge...

Thanks.

[admin]

Size setting only affect show control mode. The only easy solution I see is to make gauge bigger.

[davidchispas]

Hello, I want to modify the position of several circular slider to center it to an image, is it possible to choose the position of each one?

[admin]

Can you post a screenshot of what are you trying to achieve?

[davidchispas]

Can you post a screenshot of what are you trying to achieve?

There you have it admin. 


My idea is to center the image. The other question, is if I can give a different position to each widget.

[Daniel]

Why don't you just put it on a widget and each widget has custom position option out of the box?

[davidchispas]

Why don't you just put it on a widget and each widget has custom position option out of the box?

Sorry but I do not understand. I explain well how I did it.

I have a button that opens a page of "Air conditioning", I select a "plant" and then a "stay". Plant and room are already widgets with a specific position. 

The thermostat that I enclose in the image has a setpoint temperature object, it is the lower one to the right of 20º and when pressing the slider I wanted to center it with the image of the widget. And if I have several slider in a widget, if you can assign specific position of each one.

[Daniel]

Have you seen this?
   

[davidchispas]

Have you seen this?

Yes, that's where I assigned the position to each widget. But inside the widget I have to place the slider in a specific place. In the image I show a widget with two thermostats.

[davidchispas]

I tested by assigning one more widget when pressing setpoint. So I can fit it, but my question was if with a custom css per element, if it could be assigned directly when the slider comes out. I don't know if you understand what I'm trying to do. Excuse me if so!

[Daniel]

I don't think that it is possible what you try to do. Technically you should use additional class to identify each slider but additional class will work only for Inline elements. You can only make global change for all of them at once.

[davidchispas]

I don't think that it is possible what you try to do. Technically you should use additional class to identify each slider but additional class will work only for Inline elements. You can only make global change for all of them at once.

Thanks Daniel. What I want to achieve I do perfectly adding with another widget. I leave a sample. Now it remains to perfect it

[admin]

Since this feature has been requested several times, additional classes for popover control elements will be added to the next firmware. If element has additional classes set then all classes prefixed with "pcontrol-" will be added to the popover control element. For example, if element has "my-class-1 my-class-2" classes then popover control will have "pcontrol-my-class-1 pcontrol-my-class-2" additional classes when the control element is shown.

[Joep]

With CSS you can solve this with the CSS BEFORE function. Below an example we use. The extra class for the slider in this exampe is kleurtemperatuur so make sure you use it correct.

.kleurtemperatuur::before {
box-sizing: border-box;
transform: scale(1);
-webkit-filter: blur(20px) saturate(1.1) brightness(1.1);
filter: blur(20px) saturate(1.1) brightness(1.1);
content: "";
display: block;
width: 200%;
height: 200%;
position: absolute;
top: -50%;
left: -50%;
padding-top: 100%;
background-image:
linear-gradient(330deg, transparent 50%, #FFFF66 50%),
linear-gradient(300deg, transparent 50%, #FFFF55 50%),
linear-gradient(270deg, transparent 50%, #FFFF44 50%),
linear-gradient(240deg, transparent 50%, #FFFFEE 50%),
linear-gradient(210deg, transparent 50%, #FFFFFF 50%),
linear-gradient(180deg, transparent 50%, #FFFFDD 50%),
linear-gradient(150deg, transparent 50%, #FFFFCC 50%),
linear-gradient(120deg, transparent 50%, #FFFFBB 50%),
linear-gradient(90deg, transparent 50%, #FFFFAA 50%),
linear-gradient(60deg, transparent 50%, #FFFF99 50%),
linear-gradient(30deg, transparent 50%, #FFFF88 50%),
linear-gradient(0deg, transparent 50%, #FFFF77 50%);
background-clip: content-box, content-box, content-box, content-box, content-box, content-box, padding-box, padding-box, padding-box, padding-box, padding-box, padding-box;
}

.kleurtemperatuur {
position: absolute;
width: 150px; /* Breedte van de cirkel slider */
height: 150px; /* Hoogte van de cirkel slider */
border-radius: 50%;
overflow: hidden;
}