No announcement yet.
  • Filter
  • Time
Clear All
new posts

    SmartClient RibbonGroup problem: All icons showing same position


    I ve used RibbonGroup and IconMenuButtons for create my generic Toolbar . F​irst 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);;

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

    return toolbar;

    Click image for larger version

Name:	Ekran grnts 2021-05-19 005934.jpg
Views:	74
Size:	3.0 KB
ID:	265445

    Attached Files

    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.


      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)
          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);
      Last edited by Isomorphic; 20 May 2021, 22:57.