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
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"
}
}
Thanks @pascal.fragnoud how can I import your Json?
You can shift-right click a view to make copy json
and paste json
appear in the menu.
Thanks, you used a coordinate container right?
Yes. When you want things to overlap, coordinate containers are the simplest solution.
@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
Concerning the scrollbars, that's why I said
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:
Seems not working for the z-index... The label remains under the button
There is another strange behavior. When showing the label with number, it is shown 2 times as image attached
Alright, let's take it from the top.
- create a new view. Make it a coordinate view. Let's call it "button_badge"
- copy the json above
- Shift right click the button_badge view in the project browser and paste the json
- create ANOTHER view, it can be a flex view, a coordinate view, whatever. Let's call it "some_view"
- drag and drop button_badge into some_view to instanciate it
- in the styles of the newly created instance of button_badge, add
overflow: visible
- 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.
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.
![Screenshot 2024-01-31 161057](https://global.discourse-cdn.com/inductiveautomation/original/3X/7/1/7183e75a03bf441cfc75b8a6ef4c5e90dcb55667.png)
Try recreating the badge, I guess ?
Can you describe in details how you're setting things up ?
Now all works, only thing is not working is the z index of the label, that remains under the button