Solved: Re: HTMLText with CSS

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

timl · ‎01-02-2019

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.

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

Gargoolgala · ‎01-01-2019

Try replacing the " with ' internally in the HTML

e.g. I use "blah blah"

instead of "blah blah"

v-xida-msft · ‎01-01-2019

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:

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 · ‎01-02-2019

Hi @KickingApps,

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

KickingApps · ‎01-02-2019

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?

timl · ‎01-02-2019

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.

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

KickingApps · ‎01-04-2019

@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.

timl · ‎01-05-2019

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

KickingApps · ‎01-05-2019

@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 · ‎01-05-2019

@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. 🙂