AEM Sites: i componenti scorrono automaticamente in alto durante l’authoring con una griglia reattiva personalizzata

Questo articolo descrive come risolvere un problema in Adobe Experience Manager (AEM) Sites, in cui i componenti scorrono automaticamente fino alla parte superiore della pagina durante l’authoring, quando viene utilizzata una griglia reattiva personalizzata. La soluzione prevede la revisione e l’allineamento dell’implementazione della griglia reattiva con le best practice.

Descrizione description

Ambiente

Siti Adobe Experience Manager (AEM) (tutte le versioni; osservati in AEM 6.5 e AEM as a Cloud Service)

Sintomi

Quando si creano determinati componenti, ad esempio Testo o Immagine, in una pagina che utilizza una griglia reattiva personalizzata, il componente può scorrere automaticamente fino alla parte superiore della pagina invece di rimanere nel punto di inserimento desiderato. Questo comportamento si verifica durante il processo di authoring e non è riproducibile in modo coerente in tutti i tipi di componenti. Il componente ritorna nella posizione prevista dopo l’aggiunta del contenuto o l’aggiornamento della pagina. Questo problema non si verifica in un’istanza AEM pulita e preconfigurata.

Causa

Il comportamento di scorrimento automatico è causato da una mancata corrispondenza o da un disallineamento tra il tipo di risorsa Sling della griglia reattiva personalizzata e l’implementazione ereditata dai Componenti di base. Questo può causare un comportamento imprevisto nell’interfaccia utente di authoring. Il problema è specifico per gli ambienti personalizzati e non è un comportamento standard del prodotto.

Risoluzione resolution

Per risolvere il problema, segui la procedura riportata di seguito.

  1. Esamina l’implementazione personalizzata della griglia reattiva:

    1. Apri il modello o la struttura della pagina in CRXDE Lite o nell’archivio del codice.
    2. Controlla il tipo di risorsa Sling per la griglia reattiva e i relativi componenti secondari. Verificare che il tipo di risorsa faccia riferimento in modo coerente al tipo di risorsa WCM Foundation o Componenti core appropriato, ad esempio wcm/foundation/components/responsivegrid o al componente core pertinente.
  2. Confronta con implementazione preconfigurata:

    1. Crea una nuova pagina o modello utilizzando l’implementazione della griglia reattiva OOTB.
    2. Crea gli stessi componenti e osserva se si verifica il problema di scorrimento automatico.
    3. Confronta l’implementazione personalizzata con la versione OOTB per identificare eventuali differenze nella configurazione della struttura o del tipo di risorsa.
  3. Convalidare la struttura del modello e le personalizzazioni:

    1. Verifica la presenza di eventuali codici personalizzati o sostituzioni nei componenti della griglia reattiva o del contenitore che potrebbero influenzare la struttura DOM o la gestione degli eventi durante l’authoring.
    2. Allinea l’implementazione personalizzata con le best practice utilizzate nella griglia reattiva OOTB.
  4. Verifica dopo aver apportato le modifiche:

    1. Dopo aver aggiornato l’implementazione, verifica di nuovo l’authoring dei componenti per confermare se il problema è stato risolto.
    2. Se il problema persiste, rimuovi le personalizzazioni in modo incrementale per isolare ulteriormente la causa.
  5. Assicurati che i componenti rimangano nel punto di inserimento previsto durante l’authoring e non scorrano automaticamente fino alla parte superiore.

recommendation-more-help
experience-cloud-kcs-help-kbarticles