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

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. Smiley Happy  

Helpful resources

Announcements
firstImage

PowerApps Monthly Community Call!

Join us next Wednesday for our Demo Extravaganza, October 16, 2019 8am PDT.

firstImage

Microsoft Business Applications Virtual Launch Event

Join us for an in-depth look at the new innovations across Dynamics 365 and the Microsoft Power Platform.

firstImage

Watch Sessions On Demand!

Continue your learning in our online communities.

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

FirstImage

Power Platform World Tour

Coming to a city near you

thirdimage

PowerApps Community User Group Member Badge

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

FourthImage

Join PowerApps User Group!!

Connect, share, and learn with your peers year-round

SecondImage

Power Platform Summit North America

Register by September 5 to save $200

Top Kudoed Authors
Users Online
Currently online: 394 members 4,777 guests
Please welcome our newest community members: