Select to view content in your preferred language

Pop-up Arcade Content Block: HTML formatting issue with float

837
2
Jump to solution
04-24-2023 01:45 PM
Labels (1)
emilywpsgn
New Contributor II

I'm having an issue making an image and text float side by side. Using the Arcade content block and associated html I get this result:

emilywpsgn_0-1682368324007.png

 

var public_date = Text($feature.meeting_date,'dddd, MMMM D, Y @ hh:mmA')

return {
type: 'text',
text: `
<div style="float:left;padding:10px;background-color:#cfdce8;width:20%;"><img style="float:left;width:30px;" src="{image_url}"></div>
<div style="font-family:arial;float:right;align-top;padding:10px;width:75%;background-color:#cfdce8;">Public meeting is scheduled for <strong>${public_date}</strong></div>
`

 

I have also tried using the Text (Source Formatting) content block and still couldn't get the image and text to float side-by-side.

emilywpsgn_2-1682368681115.png

<div style="background-color:#cfdce8;">
<div style="float:left;padding:10px;width:65%;">
<span style="font-family:arial;">Public meeting is scheduled for <strong>
{meeting_date}</strong></span>
</div>
<div style="float:right;width:15%;">
<img style="float:right;" src="https://wpsgn.maps.arcgis.com/sharing/rest/content/items/7571b914c3fc40929328a5be04331759/data">
</div>
</div>

 

any help is appreciated, 

0 Kudos
1 Solution

Accepted Solutions
JohannesLindner
MVP Frequent Contributor

Do it in a table:

var public_date = Text(Now(),'dddd, MMMM D, Y @ hh:mmA')
var img_url = "https://wpsgn.maps.arcgis.com/sharing/rest/content/items/7571b914c3fc40929328a5be04331759/data"

return {
  type: "text",
  text: `<table><tr>
  <td><img src="${img_url}" width="30px"></td>
  <td style="padding-left: 10px;">Public meeting is scheduled for <br/> <strong>${public_date}</strong></td>
  </tr></table>`
}

 

JohannesLindner_0-1682371073575.png

 


Have a great day!
Johannes

View solution in original post

2 Replies
JohannesLindner
MVP Frequent Contributor

Do it in a table:

var public_date = Text(Now(),'dddd, MMMM D, Y @ hh:mmA')
var img_url = "https://wpsgn.maps.arcgis.com/sharing/rest/content/items/7571b914c3fc40929328a5be04331759/data"

return {
  type: "text",
  text: `<table><tr>
  <td><img src="${img_url}" width="30px"></td>
  <td style="padding-left: 10px;">Public meeting is scheduled for <br/> <strong>${public_date}</strong></td>
  </tr></table>`
}

 

JohannesLindner_0-1682371073575.png

 


Have a great day!
Johannes
emilywpsgn
New Contributor II

that's perfect!! thanks so much.

0 Kudos