cancel
Showing results for 
Search instead for 
Did you mean: 
JR-BejeweledOne

How To - Rounded Corners for Dropdown Controls and labels

Here is a neat little trick for making dropdowns and labels have the same rounded corners that text boxes do. 

ddroundedcorners.jpg   

LabelRoundedCorners.jpg

You will need 3 items to do this.

  • Basic Container
  • Dropdown or Label
  • Text Input

Nest the Dropdown or Label and Text Input inside the container and set the control properties

Dropdown

  • Container
    • Height: Dropdown.Height + 6
    • Width: Dropdown.Width + 5
  • Dropdown
    • X: 3
    • Y: 3
    • Border Thickness: 1
    • Focused Border Thickness: 1
    • Height: 
    • Width:
  • Text Input:
    • Text: Blank
    • Reorder: Send to Back
    • Radius: 5
    • Border Thickness: 1
    • Height: Dropdown.Height + 2
    • Width: Dropdown.Width + 1
    • X: Dropdown.X - 1
    • Y: Dropdown.Y -1

Label

  • Container
    • Width: Label.Width + 2
    • Height: Label.Height + 2
  • Label
    • Width:  Desired Width
    • Height: Desired Height
    • Border: None
    • X: 1
    • Y: 1
  • Text Input
    • Text: Blank
    • Reorder: Send to back
    • Radius: 5
    • Border Thickness: 2
    • Width: Label.Width
    • Height: Label.Height
    • X: Label.X
    • Y: Label.Y
Comments
Anonymous

I need help does anyone know why I am getting this "Encountered internal server error. The correlation Id is '0c5bcc51-ba2b-4291-bc88-0f95b7fee0c4" When I try to import into powerapps? I have followed all the steps provided by microsoft.

 

Can't get it to work like yours but will keep tinkering.  Thanks for the idea!

@dawnpeacock, Once you place the text input and dropdown or label inside the container, just so we are on the same page, this is the container I use. 

 

Container.png

Set the properties on the controls in this order and then see if that makes a difference:

  1. Dropdown/Label
  2. Text Input
  3. Container

 

One of the best way is to set all borders colors to blank and use HTML text control with proper css.
Looks awesome.

 

Sample CSS
"<div style='background-color: rgba(0,0,0,0); box-shadow: 1px 2px 22px 0px rgba(89,87,87,0.85); margin: 20px; width: 500px; height: 60px; border-radius: 30px'></div>"

 

2.png1.png

 

 

Sunil Kumar @PowerTrainer @sonuomroutlook 

LinkedIn: https://www.linkedin.com/in/powertrainer/
YouTube: https://www.youtube.com/@PowerTrainer