Perspective - create Bootstrap Badge

[davee_s]

Hello guys, I want to recreate a Bootstrap badge as you can see here Badges · Bootstrap v5.3 (getbootstrap.com).
I created a flex view with a button and a label setting all css properties as I see inspecting Bootstrap Badge but doesn't work.
Thanks for support

[pascal.fragnoud]

Use a coordinate view instead of a flex view. Then it becomes trivial.

edit: You might need overflow: visible (on the instances)

view's json

{
  "custom": {},
  "params": {
    "badge_value": 42,
    "button_text": "Value"
  },
  "propConfig": {
    "params.badge_value": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.button_text": {
      "paramDirection": "input",
      "persistent": true
    }
  },
  "props": {
    "defaultSize": {
      "height": 48,
      "width": 250
    }
  },
  "root": {
    "children": [
      {
        "meta": {
          "name": "Button"
        },
        "position": {
          "height": "100%",
          "width": "100%"
        },
        "propConfig": {
          "props.text": {
            "binding": {
              "config": {
                "path": "view.params.button_text"
              },
              "type": "property"
            }
          }
        },
        "type": "ia.input.button"
      },
      {
        "meta": {
          "name": "Label"
        },
        "position": {
          "height": 32,
          "width": 50,
          "x": "calc(100% - 30px)",
          "y": -10
        },
        "propConfig": {
          "meta.visible": {
            "binding": {
              "config": {
                "expression": "!isNull({view.params.badge_value})"
              },
              "type": "expr"
            }
          },
          "props.text": {
            "binding": {
              "config": {
                "expression": "if({view.params.badge_value} \u003e 99,\r\n\t\u002799+\u0027,\r\n\t{view.params.badge_value}\r\n)"
              },
              "type": "expr"
            }
          }
        },
        "props": {
          "style": {
            "backgroundColor": "#EA3A2C",
            "borderBottomLeftRadius": 15,
            "borderBottomRightRadius": 15,
            "borderTopLeftRadius": 15,
            "borderTopRightRadius": 15,
            "color": "#E3DCDC",
            "textAlign": "center"
          }
        },
        "type": "ia.display.label"
      }
    ],
    "meta": {
      "name": "root"
    },
    "props": {
      "style": {
        "overflow": "visible"
      }
    },
    "type": "ia.container.coord"
  }
}

[davee_s]

Thanks @pascal.fragnoud how can I import your Json?

[pascal.fragnoud]

You can shift-right click a view to make copy json and paste json appear in the menu.

[davee_s]

Thanks, you used a coordinate container right?

[pascal.fragnoud]

Yes. When you want things to overlap, coordinate containers are the simplest solution.

[davee_s]

@pascal.fragnoud I have pasted your Json but in browser this is what I see.
The button should not have scroll bar. Furthermore the label should stay above the button to see the number it indicates

[pascal.fragnoud]

Concerning the scrollbars, that's why I said

@pascal.fragnoud

overflow: visible (on the instances)

For the button going over the label... This is weird, I'd expect the z-order to be preserved. But you should be able to easily fix this by going into the view and using these buttons:

[davee_s]

Seems not working for the z-index... The label remains under the button

[davee_s]

There is another strange behavior. When showing the label with number, it is shown 2 times as image attached

[pascal.fragnoud]

Alright, let's take it from the top.

1. create a new view. Make it a coordinate view. Let's call it "button_badge"
2. copy the json above
3. Shift right click the button_badge view in the project browser and paste the json
4. create ANOTHER view, it can be a flex view, a coordinate view, whatever. Let's call it "some_view"
5. drag and drop button_badge into some_view to instanciate it
6. in the styles of the newly created instance of button_badge, add overflow: visible
7. pass the button text and the number you want displayed in the badge as parameters to the instance

That's it. I can't see a reason why anything weird would happen with that, it's a very simple and basic operation.

[davee_s]

Seems like was a bug of the 8.1.36 version.

Updating to 8.1.37 seems the problem has been solved, but the z-index problem still remains.

[pascal.fragnoud]

Try recreating the badge, I guess ?

Can you describe in details how you're setting things up ?

[davee_s]

Now all works, only thing is not working is the z index of the label, that remains under the button