Create a box with shadows in Power Apps easily

PublishedMay 30, 2023

Add an HTML Text object to the Power Apps Canvas Application
And change the HtmlText property of the object for this one:

 "<div style='margin:10px;width:100px;height:100px;background-color:#;box-shadow:0 3px 6px 1px  #ccc; border-radius:15px'></div>"

And it will look like this one:

Neat!, so we can use the power of HTML inside PowerApps.

But there is more!

What if we want to create objects of different sizes? Simple, Change the HTMLText for this one:

 "<div style='margin:10px;width:" & Self.Width &" px;height:" & (Self.Height-35) &"px;background-color:#;box-shadow:0 3px 6px 1px  #ccc; border-radius:15px'></div>"

So we can use any size and we could copy the HTML objects.

Why "Self.Height-35"? For some reason, if we set the height the same as the container, then this adds a scroll. So we reduce the size of the HTML so we could avoid the scroll

Self.Height:

Self.Height-35:

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

The AI revolution in a nutshell: "Your flesh is a relic; a mere vessel. Hand over your flesh, and a new world awaits you. We demand it"

...Hand over your flesh, and a new world awaits you. We demand it. The AI revolution is arriving at the worst moment possible, but it is here, and it will not get away. Workforce (aka, the flesh) In

Apr 2, 20263 min read

PHP is funny but...

Currently, I am working on a 500k lines code project. It is strictly structured, OOP, Models, Services, Controllers, and whatnot. Sadly every time we need to make changes to the code, it gets harder and prone to errors. PHP is funny but in the long r...

Feb 14, 20255 min read

Running several processes in PHP

A PHP library to run multiples processes using JavaScript

Jan 2, 20253 min read

Unpopular Opinion: my experience installing a Windows NAS.

I want to install a cheap NAS to backup and keep some files locally in my house. What is a NAS?. NAS is a machine to serve data (videos, documents, backups) using the network but it also could work to serve other purposes, such as audio and video str...

Dec 17, 20235 min read

Unpopular Opinion: my experience installing a Windows NAS.

Are you using Edge Chrome and Web Select is missing

That is the trick Change the edge link to: "C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" --enable-features=msEdgeAreaSelect Thank Microsoft for making our life easy.

Nov 12, 20231 min read

Are you using Edge Chrome and Web Select is missing

SouthProjects

16 posts

Command Palette

But there is more!

Comments

More from this blog