web
You’re offline. This is a read only version of the page.
close
Skip to main content

Announcements

Welcome to the Power Platform Communities
News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Blogs / Power Apps - Community Blog / How To - Rounded Corners fo...

How To - Rounded Corners for Dropdown Controls and labels

Views (13786)
JR-BejeweledOne Profile Picture JR-BejeweledOne 5,836 Moderator

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 61
    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 Moderator
    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!

  • Community Power Platform Member Profile Picture Community Power Pla... Microsoft Employee
    Posted at
    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.