M-Files plugin: DOM style changes not reflect by page

Question

I'm creating a plugin for M-Files. It's based on jquery, the browser is embedded in the windows explorer window. For some reason, I'm unable to change the style properties of simple HTML elements. Value is changed, but other than text color, no change is reflected by the view.

Element creation

               // Create element for title.
               $("<p class='mf-widget-newobject-title'>" + title + "</p>").appendTo(this.element);
               // Create element for news
               $("<p class='mf-widget-newobject-news'>" + news + "</p>").appendTo(this.element);
               // Create element for standart text
               $("<p class='mf-widget-newobject-standart'>" + standard + "</p>").appendTo(this.element);
               // Create elements for content.
               $("<div id='mainDiv' class='new-section-content'></div>")
                   .append("<ul></ul>")
                   .appendTo(this.element);

This works fine!

Style changes

                var x = document.getElementsByClassName('new-section-content');
                var i;
                for (i = 0; i < x.length; i++) {
                    x[i].style.columncount = columns;
                    alert(x[i].style.columncount);
                }

                var x = document.getElementsByClassName('mf-widget-newobject-title');
                var i;
                for (i = 0; i < x.length; i++) {
                    x[i].style.color = headlineColor;
                    x[i].style.fontsize = headlineSize + "px";
                    alert(x[i].style.fontsize);
                }
                var x = document.getElementsByClassName('mf-widget-newobject-standart');
                var i;
                for (i = 0; i < x.length; i++) {
                    x[i].style.color = standardColor;
                    x[i].style.fontsize = standardSize + "px";
                    alert(x[i].style.fontsize);
                }

This, however. "Color" is changed without a problem. As for font-size and column-count, the value is changed (Alert return right value), but nothing happens in the view.

Am I missing something? I'm not really good at javascript but it seems like I have everything right...

Thanks!

score 1 · Answer 1 · answered Feb 04 '21 at 14:22

1

Try fontSize and columnCount. JavaScript is case sensitive.

answered Feb 04 '21 at 14:22

dellink

544
3
16

Unfortunately, it still does not work. When I change the CSS class directly, it shows just fine but no luck with this piece of code. – V. Kovar Feb 04 '21 at 16:04

score 0 · Answer 2 · answered Oct 25 '22 at 12:38

Well, since you are already using jQuery you may as well leverage its power. It's much shorter and works across browsers (useful if your plugin is also supposed to run in the web client).

For example the first and second block in style changes could be written:

$(".new-section-content").css( { "column-count": columns } );

$(".mf-widget-newobject-title").css( { "color": headlineColor, "font-size": headlineSize+"px" } );

No need to manually code loops! Just be careful to put the dot "." in the selector if you want to select elements based on their class name.

Documentation of jQuery.css() see here: https://api.jquery.com/css/#css-properties

M-Files plugin: DOM style changes not reflect by page

2 Answers2