I am having quite a bit of trouble trying to modify CSS. Or I should say, after successfully modifying CSS I am having trouble getting Webix to update or respond.
For example, I have a component and I use the property CSS to set a css class. Now within my application I have a theme chooser that is dynamic and updates the css. Let’s say I update font size to much larger.
So now I have a Webix component that has fonts larger than when initialized. What method should I use to get the component to update to account for new size? I tried resize() and refresh(). I tried putting them in a timer to delay. Nothing seems to work.
One thing I did note, I have a datatable and the increased font causes the scroll bar to not scroll to the bottom anymore because of the increased size. If I resize the window slightly, something kicks-off and the scroll bar is updated.
So my question is I guess a broad one. When dynamically changing CSS after Webix has initialized what is the preferred method to update Webix?
The only stable way to apply the skin is to reload the page with new CSS file.
There is no standard solution for repainting the existing UI with a new skin. Colors and other visual styles can be changed by changing the active CSS. But if you need to change sizes as well, full UI repainting ( page reloading ) is the only solution.
I see. I was trying to avoid that. I may have to redesign a bit.
One thing to note for others reading this. (And Maria correct me if I am wrong). One part of the issue I was having was the component in question was a view with a tabbar. I did not realize that only the active tab view is available. The other tab views I believe are destroyed and recreated when needed. To resolve this I change my tabbar to a multiview. Multiview has a property called “keepViews: true”. Now when I apply say a font change using a control on one tab, it does update the other tab.
Maria - can I ask one more related question? In a similar vein, I am using adjustable row height and am having similar issues getting it to fire. It fires if I move the resizer. (I believe reloading Window would work as well).
Can you explain what fires when the resizer moves? Can I call that directly without actually having to resize?
With both your help I have (painfully) figured out how to handle much of the issues I was having. However, before I refactor my code to reload the page can you look at this snippet. If you increase the font using button, you will see that the first column does not adjust to newly sized content?
Is there a way for me to “call” some function that will readjust?
Ha! Exactly what I needed. I was knew there had to be more to it but did not know what specifically to ask for.
Is this general idea documented somewhere? I have noticed that you often recommend changes to CSS. Those changes do address the question being asked but when implemented have ramifications that run through the UI. For example, a font change can change a width and all of the sudden things no longer center properly in a related view. I have been trying not to break the core functionality of Webix.
The library itself is not designed to work in such a way.
During rendering, widgets can set a fixed sizes for the related HTML containers, so changing the CSS will affect only part of HTML on the page, and to update the other part, the related widgets need to repaint self, which requires some extra js coding.
Can you please share a practical use-case, where such kind of styling-on-the-fly can be necessary.
Well, I suspect I am using Webix in a way that falls out of your core market. I am using it for a game UI. The UI has a number of distinct panes. Most panes will contain text (whether embedded in buttons or in a widget or a plain template view). One pane contains a canvas that renders graphics and is not impacted directly by UI.
It was my intent to provide the end user with the ability to change the font sizes for each pane both from an accessibility viewpoint and to accommodate various device sizes.
I understand and will try to work around the limitations. Maybe a question or two more if I get really stuck. lol
I do stand by one of my points though. You offer both a way to functionally add and manipulate CSS and you basically advocate doing so throughout the forums and documentation. I think your average developer is going to see CSS as an open door. I don’t recall any guidelines or warnings on what NOT to do.
Thanks for your help.
(One option I may explore is simply moving over to Zoom. A quick test seems to show Webix behaves nicely with zoom as compared to disrupting font sizes)
So I have been using your approach above for row height and that seems to be working great. I have revised the snippet slightly applying the font size change to the accordion label and column header. Can you advise how to get those item’s row height to resize? I have tried a whole slew of approaches but nothing seems to work.
As you noted above, I suspect I need to repaint some other parts of widget.