Skip to main content

Notifications

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

*This post is locked for comments

  • sonuomroutlook Profile Picture sonuomroutlook 47
    Posted at
    How To - Rounded Corners for Dropdown Controls and labels

    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 

  • JR-BejeweledOne Profile Picture JR-BejeweledOne 5,836
    Posted at
    How To - Rounded Corners for Dropdown Controls and labels

    @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

     

  • dawnpeacock Profile Picture dawnpeacock 34
    Posted at
    How To - Rounded Corners for Dropdown Controls and labels

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

  • How To - Rounded Corners for Dropdown Controls and labels

    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.