This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm that you accept these cookies being set.

custom css inside widget (slider)
#1
I'm trying to apply a custom css style I create for a horizontal slider (from other forum post) to an object on a widget.
But for some reason, the custom style has no effect on the object on the widget. The same style on the main page works as intended (with some specific tuning for touch and usermode)

Am I overlooking something? Or is it because the slider is on a widget and thus not using .slider / .progress?
Don't ask what we can do in KNX but wonder what we can't - www.KNXlogic.eu
Reply
#2
Post your code and screenshots of what is not working.
Reply
#3
the page itself has the horizontal slider for volume object,
   
The object uses Custom CSS slider-alt : 
Code:
/*fancy minimalistic hor slider */
.slider-alt .slider-min,
.slider-alt .slider-max {
  display: none;
}
.slider-alt .slider {
  overflow: hidden;
  padding: 13px 0;
}
.slider-alt .slider .progress {
  height: 4px;
  margin: 0;
  border: none;
  border-radius: 2px;
  box-shadow: none;
  background-color: #ccc;
}
.slider-alt .slider .slider-handle {
  background-clip: padding-box;
  background-color: #bbb;
  background-image: none;
  border-radius: 50%;
  border-color: #bbb;
  box-sizing: border-box;
  height: 12px;
  padding: 6px;
  width: 12px;
  margin-top: 6px;
  margin-left: -1px;
}
.touch .slider-alt .slider .slider-handle {
  margin-top: 3px;
}
.usermode .slider-alt .slider {
  width: 430px;
}
.slider-alt .slider .slider-handle:before {
  background: #106AC4;
  border-radius: 10%;
  content: ' ';
  height: 4px;
  left: -501px;
  pointer-events: none;
  position: absolute;
  top: 3px;
  width: 500px;
}
.slider-alt .slider-value span {
  border-radius: 0;
}

The widget now looks like :
   
, with the default slider on the volume icon/object on that widget
When specifying custom CSS slider-alt on that object, then nothing changes.

Ideally, i'd like to have a vertical slider, looking similar to the horizontal slider on the main page, but even a similar hor slider, with reduced length would be a good start.
I tried that by adding a new custom css slider-alt-short, and just updating the specified width, but again, no effect.
Would be nice to reuse the slider-alt, with a CSS statment like
Code:
.widget .slider-alt .slider {
  width: 100px;
}
I can dream right Smile
Don't ask what we can do in KNX but wonder what we can't - www.KNXlogic.eu
Reply
#4
Your CSS code only affects inline controls. Additional classes are added to popover controls with pcontrol- prefix. Use inspect tool in your browser dev tools (F12) to check which classes are assigned to an element.
Reply
#5
OK
I get it: all the (custom) css classes have 'pcontrol-' added in front of what is configured in the visu editor.
So i now added custom css slider which is in fact pcontrol-slider
When adding that style pcontrol-slider explicitely to the css styles, then it works indeed.

Code:
/*popover slider */
.pcontrol-slider .slider-min,
.pcontrol-slider .slider-max {
  display: none;
}
.pcontrol-slider .slider {
  width: 140px;
  overflow: hidden;
  padding: 13px 0;
}
   
Now it's just a matter of writing proper css to get the look I need

Thanks.

I
Don't ask what we can do in KNX but wonder what we can't - www.KNXlogic.eu
Reply
#6
final result of the visu we automatically generate:
[Image: attachment.php?aid=3135]
Thx for the support
C.

Attached Files Thumbnail(s)
   
Don't ask what we can do in KNX but wonder what we can't - www.KNXlogic.eu
Reply


Forum Jump: