Solved: Re: HTMLText with CSS - Page 2

KickingApps · ‎01-01-2019

Greetings,

Any thoughts on why this won't work in HTML text? It works fine (with minor adjustments (double quotes arount source), in HTML editor but not working within PowerApps.

"
<!DOCTYPE html>
<html>
<head>
     <style>
         body{
               margin: 0;
          }
         div{
               width: 50%;
               float: left;
               box-sizing: border-box;
               padding: 2px;
               
         }
        img{
              display: block;
              max-width: 100%;
              margin-top: 4px
        }
</style>
</head>
<body>
     <div>
	<img src=""https://visitcentraloregon.com/wp-content/uploads/2015/03/BrokenTopOnycha6-e1523399253239.jpg"">
<img src=""http://www.traditionalmountaineering.org/images/BrokenTop_W010.jpg"">
<img src=""https://c1.staticflickr.com/6/5480/9756626465_0e43576c3a_b.jpg"">
    </div>
    <div>
	
    <img src=""http://www.roomtoramble.com/wp-content/uploads/2018/08/web_47.jpg"">
<img src=""https://www.bendpremierrealestate.com/uploads/agent-1/Broken%20Top%20Hike%2022-.jpg"">
<img src=""https://www.bendpremierrealestate.com/uploads/agent-1/No%20Name%20Lake%206-02090.jpg"">
    </div>
</body>
</html>
"

KickingApps · ‎01-25-2019

Update - I have figured out:

How to split a collection into more two
Create an image grid using a gallery

Still needs work but it's working.

timl · ‎01-25-2019

Nice one @KickingApps!

PowerAddict · ‎01-15-2022

@timl @KickingApps I accidentally ran into this old post so through I would share this. I created a Pinterest like gallery for one of the apps I created for Microsoft. There's one challenge remaining - to split the records based on height (if someone wants that feature). Anyways, I thought it would be fun to revive this old conversation 🙂.

Here's the link: https://thepoweraddict.com/how-to-create-a-pinterest-like-gallery/

Thanks,

Hardit

timl · ‎01-17-2022

Hi Hardit, thanks for sharing this and for reviving this post! Hope both you and @KickingApps are well.

NewcombR · ‎03-02-2023

Using the With PowerFx command, you should be able to sort of emulate the Style tag.

HtmlText1.HtmlText =

With(
    {
        STYLE: $"background-color:red;color:white;font-size:2.5rem;height:{Self.Height-1}px"
    },
    $"<div style={STYLE}>Hello there</div>"
)

Not exactly the same as the Style tag, but it certainly makes it easier to read versus writing everything inline within the element.