Power Platform Community Forum Thread Details

PowerApps Responsive HTML Shadow Box

I'm designing an app for the company I work for, this is an employee onboarding app. I'm not overly adept at utilising the power platform. However, I have created an HTML Text Box, where I included the below code to create a shadow box that matches the size and scale of another box within the app.

"<div style='width:"& 'To-do_Background'.Width &"px; height:"& 'To-do_Background'.Height &"px; margin: 10px; box-shadow: 0px 4px 8px 0px rgba(51, 51, 51, 1); border-radius: 6px'></div>"

The issue I am having is: The app needs to be able to scale with screen size/format (16:9, 21:9, Mobile), and the above code locks it at the size the "'To-do_Background'.Width" is when in the editor, so on larger screens it is just a small box behind the actual background.

I can't find a way to make the width and height responsive to the screen scaling the same as the rectangle is!!!

Please help!

I've attached some screen shots, of what its supposed to look like, and what it actually looks like, and what the setting are for the shadow box.

Categories:

Power Platform Build Tools

Quick Links

Leaderboard > Power Apps - Power Apps Pro Dev & ISV