cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
emfuentes27
Resolver II
Resolver II

Is it possible to create something similar to Bootstrap's badges in PowerApps?

I would like to create badges similar to Bootstrap's:

badges.png

 

I tried to create some kind of badges using labels, and rectangles, circles, etc., and aligning the Xs and Ys to make them overlap but they look really ugly. Also, I'm worry that as the numbers get bigger, the alignment will messed up.

 

I'm trying to play with the with of the text, and the X of the "badge":

 

badges.png

 

The label width is "8*(RoundUp(Len(name.Text),0))`"  to kind of have a dynamic width. And the the badge X is "name.Width".

 

Any ideas?

 

Thanks.

1 ACCEPTED SOLUTION

Accepted Solutions
zmorek
Super User
Super User

I'm not sure of a nice neat way for that, but I'd probably use the X of the left side label in the gallery... something like:

X = Label8.X-(Self.Width/2)


zmorek_0-1651004430316.png

 

View solution in original post

3 REPLIES 3
zmorek
Super User
Super User

When I need rounded corners, I use buttons. Buttons allow you to control the border radius of each of the corners!

emfuentes27
Resolver II
Resolver II

Thanks @zmorek , I didn't think of buttons. The issue now is the X position.

zmorek
Super User
Super User

I'm not sure of a nice neat way for that, but I'd probably use the X of the left side label in the gallery... something like:

X = Label8.X-(Self.Width/2)


zmorek_0-1651004430316.png

 

Helpful resources

Announcements
Power Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.

May UG Leader Call Carousel 768x460.png

June User Group Leader Call

Join us on June 28 for our monthly User Group leader call!

PA Virtual Workshop Carousel 768x460.png

Register for a Free Workshop

This training provides practical hands-on experience in creating Power Apps solutions in a full-day of instructor-led App creation workshop.

PA.JPG

New Release Planning Portal (Preview)

Check out our new release planning portal, an interactive way to plan and prepare for upcoming features in Power Platform.

Top Solution Authors
Users online (3,475)