SmartClient RibbonGroup problem: All icons showing same position

[ihsan.kocak]

Hi

I ve used RibbonGroup and IconMenuButtons for create my generic Toolbar . First I ve create RibbonGroup and I add IconMenuButtons with a forEach to RibbonGroup.
But all icons shows same position !..
In early version Smartclient it s working correctly but new version which I downloaded today and I use but all tollbars was broken .

Working version :
Version v12.1p_2020-04-25 (2020-04-25)

None Working version :
Version v12.1p_2021-05-18 (2021-05-18)


My Toolbar code :

var toolbar = isc.RibbonGroup.create({
ID: "Toolbar_" + Parameters.formName,
showTitle: false,
width: "100%",
numRows: 1,
canUpdate: Parameters._canUpdate,
clickButton : function(buttonName) {
let button = toolbar.controls.find("ID","Toolbar_" + Parameters.formName + "_" + buttonName);
button.click();
}
});

Parameters.items.forEach(function (item,index) {
let imgName = "toolbar_" + item.name
toolbar.addControl(
isc.IconMenuButton.create({
ID: "Toolbar_" + Parameters.formName + "_" + item.name,
title: item.title ,
disabled: item.disable ,
width: 60,
orientation: "vertical",
showMenuIcon: false,
//iconSize: 20,
//largeIconSize:30,
icon: Common.images[imgName],
largeIcon: Common.images[imgName],
click: function () {
item.click();
}
}),index);
});

return toolbar;

[Isomorphic]

The test code isn't runnable (no Parameters object) - however, the problem is likely that RibbonGroups require a parent RibbonBar, and you don't have one here. Some changes were made last year which may have strengthened this requirement. If you look in the browser console, there may be error/warning logs around this.

See the sample here for working code.

Let us know if that doesn't help.

[Isomorphic]

In fact, a quick test with similar code, showing a group without a parent ribbon, seems to work as expected.

This code is based on the Showcase sample we just linked to - you can drop it into that sample

function getRibbonButton (title, props) {
    return isc.IconButton.create(isc.addProperties({
            title: title,
            icon: "pieces/48/cube_blue.png"
        }, props)
    );
}

isc.RibbonGroup.create({
    ID: "group",
    autoDraw: true,
    // fill parent width
    width: "100%",
    // auto-height - overflow to content
    height: 1,
    overflow: "visible",
    // no title
    showTitle: false,
    // one row
    numRows: 1,

    // if you want the icons to left-align in the group, rather than being spaced across the full width
    columnLayoutProperties: {
        // column-widths auto-size to button content
        width: 1,
        overflow: "visible"
    }
});

// works whether or not you pass an index (including negative/out-of-bounds values)
group.addControl(getRibbonButton("Video", { orientation: "vertical", icon: "pieces/16/pawn_yellow.png" }), 0);
group.addControl(getRibbonButton("Link", { orientation: "vertical", icon: "pieces/16/piece_red.png" }), 100);
group.addControl(getRibbonButton("Other", { orientation: "vertical", icon: "pieces/16/star_blue.png" }), null);