Overview

When a user takes actions that result in the height of the previewed page increasing or decreasing, the canvas dynamically changes height to accommodate. Because the iFrame is vertically aligned in the center of the canvas, when its height changes, the iFrame appears to jump up or down.

This issue is fairly long standing I think but became much more apparent after #3469894: [later phase] Total canvas size should be dynamic based on browser viewport size and #3469677: Remove flickering when preview is being updated were both in place.

Proposed resolution

Before updating the preview take note of the position on screen of the .previewContainer (e.g. how many pixels from the top left of the screen is the top left of the .previewContainer)
After the preview has updated update the scroll position of the canvas to ensure the top left of the .previewContainer back to what it was.

CommentFileSizeAuthor
#8 Untitled.gif820.62 KBgauravvvv
#2 3475484-error.png786.61 KBnayana_mvr
jump after typing.gif761.73 KBjessebaker
jump after drag.gif2.04 MBjessebaker

Issue fork experience_builder-3475484

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

jessebaker created an issue. See original summary.

nayana_mvr’s picture

nayana_mvr commented
StatusFileSize
new 3475484-error.png786.61 KB

Hi @jessebaker, I tried to reproduce this issue in Drupal cms, but I'm getting some error. Steps followed:-

  1. Installed Drupal CMS (starshot) and Experience Builder module and enabled it.
  2. Created a new field in Basic page content type of field type Experience Builder.
  3. In the manage dispaly, the new field was in disabled section.
  4. Dragged the field to enabled section and tried to save configuration.
  5. Got the following error.

    6. error 

The website encountered an unexpected error. Try again later.

Drupal\Component\Plugin\Exception\PluginNotFoundException: The "hidden" plugin does not exist. Valid plugin IDs for Drupal\Core\Field\WidgetPluginManager are: address_default, address_zone_default, address_country_default, comment_default, moderation_state_default, datetime_datelist, datetime_default, file_generic, image_focal_point, geofield_latlon, geofield_bounds, geofield_dms, geofield_default, image_image, layout_builder_widget, leaflet_widget_default, link_default, linkit, oembed_textfield, media_library_widget, metatag_firehose, path, redirect_source, datetime_timestamp_no_default, smartdate_only, smartdate_inline, smartdate_datelist, smartdate_default, smartdate_timezone, text_textfield, text_textarea, text_textarea_with_summary, webform_entity_reference_select, webform_entity_reference_autocomplete, options_select, string_textfield, language_select, uri, entity_reference_autocomplete_tags, options_buttons, entity_reference_autocomplete, string_textarea, number, email_default, boolean_checkbox, datetime_timestamp in Drupal\Core\Plugin\DefaultPluginManager->doGetDefinition() (line 53 of core/lib/Drupal/Component/Plugin/Discovery/DiscoveryTrait.php).
Drupal\Core\Plugin\DefaultPluginManager->getDefinition() (Line: 118)
Drupal\Core\Field\WidgetPluginManager->createInstance() (Line: 81)
Drupal\Core\Plugin\DefaultLazyPluginCollection->initializePlugin() (Line: 80)
Drupal\Component\Plugin\LazyPluginCollection->get() (Line: 149)
Drupal\Component\Plugin\LazyPluginCollection->getIterator() (Line: 114)
Drupal\Core\Plugin\DefaultLazyPluginCollection->getConfiguration() (Line: 302)
Drupal\Core\Config\Entity\ConfigEntityBase->preSave() (Line: 272)
Drupal\Core\Entity\EntityDisplayBase->preSave() (Line: 528)
Drupal\Core\Entity\EntityStorageBase->doPreSave() (Line: 483)
Drupal\Core\Entity\EntityStorageBase->save() (Line: 257)
Drupal\Core\Config\Entity\ConfigEntityStorage->save() (Line: 354)
Drupal\Core\Entity\EntityBase->save() (Line: 617)
Drupal\Core\Config\Entity\ConfigEntityBase->save() (Line: 293)
Drupal\Core\Entity\EntityForm->save()
call_user_func_array() (Line: 129)
Drupal\Core\Form\FormSubmitter->executeSubmitHandlers() (Line: 67)
Drupal\Core\Form\FormSubmitter->doSubmitForm() (Line: 597)
Drupal\Core\Form\FormBuilder->processForm() (Line: 326)
Drupal\Core\Form\FormBuilder->buildForm() (Line: 73)
Drupal\Core\Controller\FormController->getContentResult() (Line: 39)
Drupal\layout_builder\Controller\LayoutBuilderHtmlEntityFormController->getContentResult()
call_user_func_array() (Line: 123)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->Drupal\Core\EventSubscriber\{closure}() (Line: 638)
Drupal\Core\Render\Renderer->executeInRenderContext() (Line: 121)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->wrapControllerExecutionInRenderContext() (Line: 97)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->Drupal\Core\EventSubscriber\{closure}() (Line: 181)
Symfony\Component\HttpKernel\HttpKernel->handleRaw() (Line: 76)
Symfony\Component\HttpKernel\HttpKernel->handle() (Line: 53)
Drupal\Core\StackMiddleware\Session->handle() (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle() (Line: 28)
Drupal\Core\StackMiddleware\ContentLength->handle() (Line: 32)
Drupal\big_pipe\StackMiddleware\ContentLength->handle() (Line: 106)
Drupal\page_cache\StackMiddleware\PageCache->pass() (Line: 85)
Drupal\page_cache\StackMiddleware\PageCache->handle() (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle() (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle() (Line: 36)
Drupal\Core\StackMiddleware\AjaxPageState->handle() (Line: 51)
Drupal\Core\StackMiddleware\StackedHttpKernel->handle() (Line: 741)
Drupal\Core\DrupalKernel->handle() (Line: 19)

Please let me know if I'm missing some steps here. Also please update the Issue Summary with steps to reproduce.

gauravvvv’s picture

gauravvvv commented
Assigned: Unassigned » gauravvvv
wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented

#2: that is for sure unrelated to the Experience Builder module.

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented

#2: that is for sure unrelated to the Experience Builder module.

gauravvvv opened merge request !327

gauravvvv’s picture

gauravvvv commented
Assigned: gauravvvv » Unassigned
Status: Active » Needs review
gauravvvv’s picture

gauravvvv commented
StatusFileSize
new Untitled.gif820.62 KB

After MR

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Version: » 0.x-dev
Issue tags: +DrupalCon Barcelona 2024

Thanks, @gauravvvv!

kristen pol’s picture

kristen pol
she/her
Primary language English
Location Santa Cruz, CA, USA
commented
Issue tags: -DrupalCon Barcelona 2024 +Barcelona2024

Fixing tag

jessebaker’s picture

jessebaker commented

This MR !327 doesn't address the problem but instead removes the functionality that causes the problem. At first this seemed to be the wrong solution but actually gave me an idea!

In #3469894: [later phase] Total canvas size should be dynamic based on browser viewport size functionality was added to make the canvas height dynamic based on the content. However in this MR some of that functionality was removed - and yet a small padding was still present because of the CSS. Surely I could just add additional padding in CSS!

Given that the "dynamic" height was just adding extra height/width equal to 80% of the viewport's height/width it occured to me that I could use vh and vw units in CSS to achieve the same thing and remove the JS (and the resize observer!) that was making that calculation.

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Assigned: Unassigned » balintbrews
balintbrews’s picture

balintbrews
he/him/his
Primary language Hungarian
Location Netherlands 🇪🇺
commented
Assigned: balintbrews » jessebaker
Status: Needs review » Needs work

balintbrews’s picture

balintbrews
he/him/his
Primary language Hungarian
Location Netherlands 🇪🇺
commented
Assigned: jessebaker » Unassigned
Status: Needs work » Fixed

I really like this solution! 👏🏻

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.