CSS scaled window with timeboard

Webix JS
#1

Hi,

I’m trying to scale a window with a timeboard, the focus looks right for the
button and time fields but the mouse coordinates are off for the sliders, any
suggestions?

https://snippet.webix.com/cqb8fftl

-Tomas

#2

Hello, @TomasF

The point is that Webix handles sizes of components as variables in JS code.
Changes set directly via CSS (including CSS-based scale) will interrupt the sizing logic in the core, which will also lead to the mentioned issues, as coordinates for context and move will be still calculated regardless of CSS scale (sizes in JS and in DOM will be still the same).

The first solution is would be deep [component customization] (Creating a Custom Component of Guides, Extending Сomponents Webix Docs).
Еhe other solution is building a new component based on the ones already in Webix. In our Blog, you could find an article with an example.
Please, check the snippet here: Code Snippet
This snippet is not a direct solution, but it might give you some ideas

#3

Hi @AlenaLisava,

Thanks! How would I create a scaled version in JS? ie: wider/thicker
slider?

Thanks,
Tomas

#4

Hello, @TomasF

It’s not about not using CSS at all. This article describes which styles can be applied freely, and which should be used with caution because they can lead to behavioral change.
For example, you could try to change font-size.
Here you could find [Slider CSS] (Slider CSS of Styling of Widgets, CSS Image Maps Webix Docs) classes. Also, you could find proper classes by using the inspector.
Please, check the snippet here: Code Snippet

#5

Hi @AlenaLisava,

How do I change the height of .webix_slider_handle, .webix_slider_right, .webix_slider_left? This is on a touch screen and we have some big fingers.

Thanks.

#6

I Figured it out by adding webix.skin.$active.inputHeight = 50; along with .webix_slider_box .webix_slider_handle .webix_slider_left .webix_slider_right.

Thanks.

#7

Hi @AlenaLisava,

Can you change the $active.inputHeight on a single component? ie: timeboard?

Thanks,
Tomas

#8

@AlenaLisava @TomasF
Hi
I’m using Timeboard to get hours, minutes, and seconds. And there is a done button in Timeboard if we set button to true. But I want to change the default done to other. Is there a way to change done to other something. And I also want to change the default hours, minutes, and seconds. If there is a way to change these default text?
Sorry for my English