cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
KickingApps
Level 8

HTMLText with CSS

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>
"
1 ACCEPTED SOLUTION

Accepted Solutions
Super User
Super User

Re: HTMLText with CSS

Unfortunately, the HTML control doesn't support the addition of CSS classes inside a style tag. There's a post about this here:

https://powerusers.microsoft.com/t5/General-Discussion/It-is-possible-to-declare-css-in-powerapps/m-...


The HTML control supports only a limited set of HTML tags. When I paste your HTML document into the HTML text control, I can see that PowerApps strips the head tag and doesn't render the body tag. Even if the control were able to do this, the validity of the resultant page wouldn't be great due to the presence of these multiple tags.

image.png
A workaround is to use inline CSS however, it's hard to achieve the desired formatting within the PowerApps container.

I was able to produce something a little closer to what you needed with a 2 column table. Perhaps you experiment with this or hopefully, maybe someone smarter could come up with a better solution.

 

"<table>
<tr>
<td valign=""top""> <img src=""https://visitcentraloregon.com/wp-content/uploads/2015/03/BrokenTopOnycha6-e1523399253239.jpg"" style=""max-width:100%;max-height:100%;""> <img src=""http://www.traditionalmountaineering.org/images/BrokenTop_W010.jpg"" style=""max-width:100%;max-height:100%;""> <img src=""https://c1.staticflickr.com/6/5480/9756626465_0e43576c3a_b.jpg"" style=""max-width:100%;max-height:100%;""> </td> <td valign=""top""> <img src=""http://www.roomtoramble.com/wp-content/uploads/2018/08/web_47.jpg"" style=""max-width:100%;max-height:100%;""> <img src=""https://www.bendpremierrealestate.com/uploads/agent-1/Broken%20Top%20Hike%2022-.jpg"" style=""max-width:100%;max-height:100%;""> <img src=""https://www.bendpremierrealestate.com/uploads/agent-1/No%20Name%20Lake%206-02090.jpg"" style=""max-width:100%;max-height:100%;""> </td>
</tr>
</table>"

View solution in original post

11 REPLIES 11
Gargoolgala
Level 8

Re: HTMLText with CSS

Try replacing the " with ' internally in the HTML

 

e.g. I use "<p><strong><span style='color: #0096d6;'>blah blah</span></p>"

instead of "<p><strong><span style="color: #0096d6;">blah blah</span></p>"

Community Support Team
Community Support Team

Re: HTMLText with CSS

Hi @KickingApps,

I have made a test on my side, and don't have the issue that you mentioned. I agree with @Gargoolgala's thought almost, please replace the double quotes which wraps the image url resource (<img> tag) with single quote.

Please take a try with the following workaround:12.JPG

Set the HtmlText property of the Html text control to following:

"<!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>"

Best regards,

Kris

Community Support Team _ Kris Dai
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
xyzzyx666
Level 8

Re: HTMLText with CSS

Hi @KickingApps,

 

I have change nothing and just copy and paste it into the HTML text and it works ok.

20190102.png

KickingApps
Level 8

Re: HTMLText with CSS

It is supposed to be presented in this way:  Side by size, varying sizes.  I get the same thing you all do when I paste the formula iin the htmltext box.  However, the out come I am seeking is that shown below and it works fine in an html editor.  Any thoughts?

 image.png

Super User
Super User

Re: HTMLText with CSS

Unfortunately, the HTML control doesn't support the addition of CSS classes inside a style tag. There's a post about this here:

https://powerusers.microsoft.com/t5/General-Discussion/It-is-possible-to-declare-css-in-powerapps/m-...


The HTML control supports only a limited set of HTML tags. When I paste your HTML document into the HTML text control, I can see that PowerApps strips the head tag and doesn't render the body tag. Even if the control were able to do this, the validity of the resultant page wouldn't be great due to the presence of these multiple tags.

image.png
A workaround is to use inline CSS however, it's hard to achieve the desired formatting within the PowerApps container.

I was able to produce something a little closer to what you needed with a 2 column table. Perhaps you experiment with this or hopefully, maybe someone smarter could come up with a better solution.

 

"<table>
<tr>
<td valign=""top""> <img src=""https://visitcentraloregon.com/wp-content/uploads/2015/03/BrokenTopOnycha6-e1523399253239.jpg"" style=""max-width:100%;max-height:100%;""> <img src=""http://www.traditionalmountaineering.org/images/BrokenTop_W010.jpg"" style=""max-width:100%;max-height:100%;""> <img src=""https://c1.staticflickr.com/6/5480/9756626465_0e43576c3a_b.jpg"" style=""max-width:100%;max-height:100%;""> </td> <td valign=""top""> <img src=""http://www.roomtoramble.com/wp-content/uploads/2018/08/web_47.jpg"" style=""max-width:100%;max-height:100%;""> <img src=""https://www.bendpremierrealestate.com/uploads/agent-1/Broken%20Top%20Hike%2022-.jpg"" style=""max-width:100%;max-height:100%;""> <img src=""https://www.bendpremierrealestate.com/uploads/agent-1/No%20Name%20Lake%206-02090.jpg"" style=""max-width:100%;max-height:100%;""> </td>
</tr>
</table>"

View solution in original post

KickingApps
Level 8

Re: HTMLText with CSS

@timl Thanks for the proposed solution.  I have settled on a gallery (for now).  Hope to tackle the math and see if I can come up with the original idea.  For now, this will have to do.

image.png

Super User
Super User

Re: HTMLText with CSS

Thanks for the update @KickingApps. For what it's worth, I think your gallery solution looks great!

Highlighted
KickingApps
Level 8

Re: HTMLText with CSS

@timl Thanks and the table is awesome. Going to work with it  because it is exactly the effect I am going for.  Just need to integrate with dynamic azure db.  

KickingApps
Level 8

Re: HTMLText with CSS

@timl Ok - challenge part 2.  A user will filter to view the photos.  Say they select 2018_JP.  That collection might have 20 photos.  We will need to split the table to show 10 photos each side or if 19 photos in collection, 10 on one side and 9 on the other (balanced, in other words).  Possible?  And, the img source can't be hard coded because it needs to be interactive with a filter.  So if the next time they filter on 2017_BC, 16 photos from collection will be displayed.  

Any thoughts?  Initially, I'm thinking of the following formulas/controls as possibilities - Count and divide or two collections with Count to split collection, ForAll maybe for the iteration through collection to references the images?  Oh, and one more thing to really complicate the matter, this is from AzureBlobStorage so instead of referencing an img source file. I'm experimenting now but will happily accept any more wisdom you might be willing to bestow. 🙂  

Helpful resources

Announcements
thirdimage

Power Automate Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

sixthImage

Power Platform World Tour

Find out where you can attend!

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

fifthimage

Microsoft Learn

Learn how to build the business apps that you need.

Top Kudoed Authors
Users Online
Currently online: 327 members 6,839 guests
Please welcome our newest community members: