nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Add option to change background color of Embed widget

Brian_McLeer

I had the embed widget in a splash screen on an AGOL EB app. Within this, I had HTML to make the background color transparent. After the recent AGOL update last week, my background is now white. Please allow the option to choose the background color within the Embed widget on the Style tab, which should include a transparent selection. This would be no different than other widgets that offer background selection color.

Find more posts tagged with

Status: Open

Comments

TonghuiMing

@Brian_McLeer

After the recent AGOL update last week, my background is now white.

I am curious about this. What does your HTML code look like? Sounds like a regression issue based on your description, instead of a new option ENH.

Brian_McLeer

Thank you @TonghuiMing. My HTML is pasted below using psuedo contact information.

<div style="max-width:800px; margin:0 auto; padding:16px 14px; text-align:center; font-family:Poppins, Arial, sans-serif; color:#FFFFFF;">
  &lt;!-- Generic placeholder logo (fake URL) --&gt;
  <img src="https://example.com/assets/logo-placeholder.png" alt="City logo" style="max-width:160px; margin-bottom:12px;">

  <div style="font-size:22px; font-weight:700; margin:0 0 10px; font-family:Oswald, Arial, sans-serif; color:#002D56;">
    Welcome to the City Interactive Zoning and Future Land Use Plan Map
  </div>

  <div style="height:2px; background:#E9D8C2; margin:8px auto 12px; max-width:720px;"></div>

  <div style="font-size:18px; font-weight:700; color:#C41230; margin:8px 0 6px; font-family:Oswald, Arial, sans-serif;">
    Disclaimer
  </div>

  <div style="font-size:14px; margin:0 auto 8px; max-width:720px; color:#002D56;">
    This map is intended for informative and educational purposes only. The data represented has been sourced from multiple entities. While the City has done its due diligence in maintaining accuracy of boundaries to the best of its abilities, it cannot guarantee all boundaries are represented as recorded with the county. Therefore, this zoning map should not be considered a legal record.
  </div>

  <div style="font-size:14px; margin:0 auto 14px; max-width:720px; color:#002D56;">
    Please note the zoning represented and boundaries shown on the map may have changed between map updates. For questions regarding the information displayed, please contact the City Planning &amp; Development Department.
  </div>

  <div style="font-size:14px; max-width:720px; margin:0 auto; color:#002D56;">
    <div style="margin:6px 0;"><strong>Phone:</strong> <a href="tel:+15550100" style="color:#002D56; text-decoration:none;">(555) 0100 x156</a></div>
    <div style="margin:6px 0;"><strong>Email:</strong> <a href="mailto:planning@example.org" style="color:#002D56; text-decoration:none;">planning@example.org</a></div>
    <div style="margin:6px 0;"><strong>Web:</strong> <a href="https://www.example.org/planning-development" target="_blank" style="color:#002D56; text-decoration:none;">City Planning &amp; Development</a></div>
  </div>
</div>

TonghuiMing

@Brian_McLeer Thank you for the HTML info.

Per our investigation, this is a regression indeed, caused by the framework theme upgrade. We have resolved it in a patch just released, and per my testing, the default widget background is still transparent now, after the fix:

Your code example in a window

Let me know if this is resolved in your app and if there's anything odd about it.

Best,

Tonghui

Brian_McLeer

Thank you @TonghuiMing for the quick patch, that resolved the issue on my end. The window background color is green and the embed widget is honoring the transparency in the HMTL code.

TonghuiMing

@Brian_McLeer Great! Good to hear that.