More than 2 properties in the Button settings object causes additional div

[todd.cochranParticipant]

I have come across a very odd side affect of going beyond two properties of the settings object on the Button while using the angular plugin. The example in the documentation has the settings object set with just two properties:

$scope.settings =
        {
           
            "width": 150,
            "height": 50
        };

This works fine and as expected. However, if you add just one more property, an extra div tag gets added and you are no longer able to use the button

[ChristopherParticipant]

Hi todd.cochran,

the settings that you apply to the button must be from the jqxButton API documentation. If you apply other settings the button won’t visualize properly. I tried your example by adding more properties to the settings and it works perfectly. Here is a demo of the angular jqxbutton with most of the properties you can apply to it:
https://www.jseditor.io/?key=xb-angular-demo

If you need to apply other properties like, for example, postition, margin, etc (styles). You can do that with Javascript or jQuery code from the script file( or trough the CSS file), not from the settings when creating the widget.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[todd.cochranParticipant]

Sorry, I should have been more clear. The button renders without issue. The problem is that the extra DIV tag shows up an there are two “buttons”. The onclick event no longer works because of the duplication. This code will not work:

var demoApp = angular.module("demoApp", ["jqwidgets"]);
demoApp.controller("demoController", function ($scope) {
    $scope.settings =
        {
            template: 'primary',
            disabled: false,
            imgWidth: 16, 
            imgSrc: 'http://www.jqwidgets.com/jquery-widgets-demo/images/facebook.png',
            textPosition: 'center',
            imgPosition: "left",
            width: 150,
            height: 50
        };
        
         // event Handler
        $scope.eventHandler = function(event){
            $log.info('eventHandler called');

        };
});

[ChristopherParticipant]

Hi todd.cochran,

thank you for your feedback. We’ve created a work item for this issue.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[todd.cochranParticipant]

Christopher,
Is there anyway that I can track the status of this work item and when a fix may be available?

[ChristopherParticipant]

Hi todd.cochran,

you can see the new changes after every release in the Release History tab in Documentation.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[Peter StoevKeymaster]

Hi todd.cochran,

Actually, the Extra DIV tag is required and created to display the image and the text. Button tags cannot host IMG tags, that’s why DIV tag is used.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts