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

    RibbonButton doesn't scale vertically?

    SmartClient Version: SNAPSHOT_v13.1d_2024-06-30/AllModules Development Only (built 2024-06-30)

    Hello, it seems that the RibbonButton doesn't scale vertically:

    Click image for larger version  Name:	2024-07-01 09.30.39.jpg Views:	14 Size:	7.0 KB ID:	272772
    Click image for larger version  Name:	2024-07-01 09.30.33.jpg Views:	12 Size:	8.2 KB ID:	272773

        title: "title",
    // showButtonTitle: false,
        autoDraw: true,
        click: "isc.say(this.title + ' button clicked');",
        vertical: false, icon: "pieces/16/star_yellow.png"
    Last edited by claudiobosticco; 3 Jul 2024, 05:39.

    hi Claudio,

    You were right, we weren't scaling RibbonButtons directly - however, we were scaling RibbonGroup.rowHeight, so RibbonButtons would have scaled when used in Ribbons.

    We've added regular scaling for standalone RibbonButton, likely for tomorrow's builds.
    Last edited by Isomorphic; 2 Jul 2024, 00:11.


      SmartClient Version: SNAPSHOT_v13.1d_2024-07-03/AllModules Development Only (built 2024-07-03)

      Thanks, now I see it's scaling, just a note: in Spacious density it's 32px tall, just like an IButton, while in Dense density is 29px vs 24px for an IButton. Is it intended like that?

      These heights are with the sample from post #1.


        hi Claudio - we've fixed the scaling here when RibbonButtons are used outisde of Ribbons. They will now show at a similar size to other buttons and scale appropriately.

        Please retest with a build dated July 6 or later.


          SmartClient Version: SNAPSHOT_v13.1d_2024-07-06/AllModules Development Only (built 2024-07-06)

          I see it's fixed, thank you very much


            SmartClient Version: SNAPSHOT_v13.1d_2024-07-08/AllModules Development Only (built 2024-07-08)

            Hello, I found that when using a specified "size" attribute in SVG string with a RibbonButton configured like this:

            var spriteFile = "[SKIN]images/stockIcons.svg";
            var spritePrefix = "sprite:svg:" + spriteFile;
                showMenuButtonImage: false,
                showMenuIcon: false,
                showMenuOnClick: true,
                showButtonTitle: false,
                autoDraw: true,
                vertical: false,
                icon: spritePrefix+"#add_circle;size:20,20;"
            the icon scales as described by this new feature:

            However, when the size exceeds a certain limit, which I think is >= 18 for "Spacious" density, the icon is no longer centered.

            This is with spacious density and size 20, as in the sample above:

            Click image for larger version

Name:	2024-07-08 17.37.42.jpg
Views:	27
Size:	620 Bytes
ID:	272844

            is it expected?


              hi Claudio,

              Yes, that's expected - RibbonButton has an iconSize set to 16, and that scales with density to 19. But you're showing an SVG in the icon element at 20px, which will scale to 23.

              The "size" attribute in src-strings is really to make an SVG *smaller* than it's container, but your code is fine - you'll just need to set RibbonButton.iconSize to at least the same as you specify in the src-string - at which point, you won't really need the size attribute in the src-string, because it will inherit the iconSize.

              Note that, like other widget sizes, RibbonButton.iconSize will only be scaled if you set it globally (eg, in load_skin.js) before scaling runs.
              Last edited by Isomorphic; 8 Jul 2024, 18:52.


                Thank you very much for the clarification!