# Perspective - create Bootstrap Badge

**URL:** <https://forum.inductiveautomation.com/t/perspective-create-bootstrap-badge/84949>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [January 30, 2024, 2:00pm UTC](https://forum.inductiveautomation.com/t/perspective-create-bootstrap-badge/84949 "2024-01-30T14:00:10Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![davee\_s](https://avatars.discourse-cdn.com/v4/letter/d/e47774/32.png) [@davee\_s](https://forum.inductiveautomation.com/u/davee_s)\
**Post date:** [January 30, 2024, 2:00pm UTC](https://forum.inductiveautomation.com/t/perspective-create-bootstrap-badge/84949/1 "2024-01-30T14:00:10Z")

</div>

Hello guys, I want to recreate a Bootstrap badge as you can see here [Badges · Bootstrap v5.3 (getbootstrap.com)](https://getbootstrap.com/docs/5.3/components/badge/).  
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

 ![Screenshot 2024-01-30 145653](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/0/004d5b92ed044b90a2bfe60de9d466b2503c025e.png)  
 ![Screenshot 2024-01-30 145747](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/1/512b213ff3aee5668d3e39edf2d35a336e7ac2e0.png)

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [January 30, 2024, 2:05pm UTC](https://forum.inductiveautomation.com/t/perspective-create-bootstrap-badge/84949/2 "2024-01-30T14:05:41Z")

</div>

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**
>
> ```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"
> }
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![davee\_s](https://avatars.discourse-cdn.com/v4/letter/d/e47774/32.png) [@davee\_s](https://forum.inductiveautomation.com/u/davee_s)\
**Post date:** [January 30, 2024, 2:24pm UTC](https://forum.inductiveautomation.com/t/perspective-create-bootstrap-badge/84949/3 "2024-01-30T14:24:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [January 30, 2024, 2:26pm UTC](https://forum.inductiveautomation.com/t/perspective-create-bootstrap-badge/84949/4 "2024-01-30T14:26:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![davee\_s](https://avatars.discourse-cdn.com/v4/letter/d/e47774/32.png) [@davee\_s](https://forum.inductiveautomation.com/u/davee_s)\
**Post date:** [January 30, 2024, 3:04pm UTC](https://forum.inductiveautomation.com/t/perspective-create-bootstrap-badge/84949/5 "2024-01-30T15:04:01Z")

</div>

Thanks, you used a coordinate container right?

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [January 30, 2024, 3:26pm UTC](https://forum.inductiveautomation.com/t/perspective-create-bootstrap-badge/84949/6 "2024-01-30T15:26:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![davee\_s](https://avatars.discourse-cdn.com/v4/letter/d/e47774/32.png) [@davee\_s](https://forum.inductiveautomation.com/u/davee_s)\
**Post date:** [January 31, 2024, 7:41am UTC](https://forum.inductiveautomation.com/t/perspective-create-bootstrap-badge/84949/7 "2024-01-31T07:41:11Z")

</div>

@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  
 ![Screenshot 2024-01-31 084012](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/4/e4fb2f791d6f794fa24767549daec1f3a3403ec9.png)

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [January 31, 2024, 8:13am UTC](https://forum.inductiveautomation.com/t/perspective-create-bootstrap-badge/84949/8 "2024-01-31T08:13:22Z")

</div>

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:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/c/ecf3709db68f399a6cd0632ef7b273998b97649d.png)

---

<div class="post-metadata">

**Author:** ![davee\_s](https://avatars.discourse-cdn.com/v4/letter/d/e47774/32.png) [@davee\_s](https://forum.inductiveautomation.com/u/davee_s)\
**Post date:** [January 31, 2024, 9:04am UTC](https://forum.inductiveautomation.com/t/perspective-create-bootstrap-badge/84949/9 "2024-01-31T09:04:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![davee\_s](https://avatars.discourse-cdn.com/v4/letter/d/e47774/32.png) [@davee\_s](https://forum.inductiveautomation.com/u/davee_s)\
**Post date:** [January 31, 2024, 9:14am UTC](https://forum.inductiveautomation.com/t/perspective-create-bootstrap-badge/84949/10 "2024-01-31T09:14:42Z")

</div>

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

 ![Screenshot 2024-01-31 101352](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/2/82ffb38779d8b28a790c3ad8c66c36047ea28041.png)  
 ![Screenshot 2024-01-31 101401](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/b/5b8d591b6efc4eb9f0505aa3b744cb571f65751e.png)

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [January 31, 2024, 9:20am UTC](https://forum.inductiveautomation.com/t/perspective-create-bootstrap-badge/84949/11 "2024-01-31T09:20:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![davee\_s](https://avatars.discourse-cdn.com/v4/letter/d/e47774/32.png) [@davee\_s](https://forum.inductiveautomation.com/u/davee_s)\
**Post date:** [January 31, 2024, 3:16pm UTC](https://forum.inductiveautomation.com/t/perspective-create-bootstrap-badge/84949/12 "2024-01-31T15:16:40Z")

</div>

Seems like was a bug of the 8.1.36 version.

 ![Screenshot 2024-01-31 161145](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/6/1616d03c2d1ce026359d8db882c6e0be13a14e96.png)  
Updating to 8.1.37 seems the problem has been solved, but the z-index problem still remains.  
 ![Screenshot 2024-01-31 161057](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/1/7183e75a03bf441cfc75b8a6ef4c5e90dcb55667.png)

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [January 31, 2024, 3:37pm UTC](https://forum.inductiveautomation.com/t/perspective-create-bootstrap-badge/84949/13 "2024-01-31T15:37:21Z")

</div>

Try recreating the badge, I guess ?

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

---

<div class="post-metadata">

**Author:** ![davee\_s](https://avatars.discourse-cdn.com/v4/letter/d/e47774/32.png) [@davee\_s](https://forum.inductiveautomation.com/u/davee_s)\
**Post date:** [January 31, 2024, 3:43pm UTC](https://forum.inductiveautomation.com/t/perspective-create-bootstrap-badge/84949/14 "2024-01-31T15:43:37Z")

</div>

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