Two elements for Bubble’s native mobile editor, where no HTML element exists:

Requires Bubble’s native mobile editor. Works on iOS and Android.

Quick start

  1. Drag HTML Block onto a mobile page.
  2. Paste your markup into its html property.
  3. Tick auto_height so the element sizes itself to its content.
  4. In the Layout tab, set the element’s container to fit its content.

That’s the whole setup. Everything below is optional.

Element 1 — HTML Block

Properties

Property Type What it does
html text Your HTML. A fragment gets wrapped automatically; a full document is used as-is.
base_url text Base address for resolving relative URLs.
auto_height yes/no Resize the element to fit its content. Tick this.
min_height number Never shrink below this. 0 = no limit.
max_height number Never grow beyond this. 0 = no limit.
background_color color Element background.
text_color color Default text colour.
font_size number Base font size in px.
font_family text CSS font stack.
padding number Inner padding in px.
custom_css text Extra CSS injected into the document.
links_open_externally yes/no Open tapped links in the device browser. Tick this unless you want to handle links yourself.
show_loading yes/no Show a spinner while rendering.
debug_overlay yes/no Diagnostic bar. Leave off in production.

States

State Type What it holds
content_height number The real height of your content.
rendered_height number The height after min_height / max_height are applied.
is_loading yes/no Whether the document is still rendering.
last_message text The most recent value from bubble.send().
last_link_url text The URL of the last link tapped.
error_message text Details if rendering failed.

Detecting clipped content: when content_height is larger than rendered_height, max_height is cutting your content off. That’s your cue to show a “read more” button.

Events

loaded · height_changed · message_received · link_tapped · load_error