Slides overlap content

[barlambe]

Hello,

Maybe this questionnaires has been poses already but I die not find it yet.

Project:
Field Slideshow
Version:
8.x-3.0-beta2
Component:
Code
Priority:
Normal
Category:
Bug report
Assigned:
Unassigned
Reporter:
c.altosax
Created:
29 Jan 2021 at 02:04 CET
Updated:
15 Feb 2021 at 14:30 CET
Following 4 followers
Jump to comment: Most recent, Most recent file, Add new
Problem/Motivation

When a slideshow is included on a Basic Page, the slide overlaps the content below it, including the thumbnails.

Go to https://www.drupal.org/project/field_slideshow/issues/3195285 to see the screenshots:

• Slideshow-correct: What the slideshow should look like
• Slideshow-incorrect: The main slide overlaps the thumbnails and other content below it.

Steps to reproduce
On a fresh site (Drupal 9.1.3) with Bartik theme enabled:

Install and enable Field Slideshow 3.0.0-beta2
Download the cycle2 plugin (version: 2.1.6 build: 20141007) to web/libraries/jquery.cycle2/jquery.cycle2.min.js
Edit the “Basic page” content type:
Add an image field, below the body, with unlimited values allowed
Change the format of field_image to “Slideshow”. Do not change any other values or settings
Create a new “Basic page” with 2 or more images
View the new page. It should display correctly at this point (as in Slideshow-correct.jpg)
Go back to “Manage Display” for “Basic Page” and change any of the settings for the slideshow. I tested this with the “Image Style” and “Link Image To” properties
View the new page again. All content below the main slide will have moved upwards, and will be covered by the main slide (as in Slideshow-incorrect.jpg). Changing the settings back to their default values will have no effect; the slideshow will not display correctly again.

I posted this issue here but there they suggestie it is a cycle2 problem

https://www.drupal.org/project/field_slideshow/issues/3195285

[iam-sysop]

Please provide link to test or live copy where HTML output can be observed. Absolute positioning of HTML elements is dependent on the status of the parent element. Without verification of parent element CSS or other reviewable HTML, diagnosis cannot occur.

Sizing of parent element controls whether slide children will overlap container or not.

Additional note - this fork seems unmaintained at this time. A more up-to-date fork with some changes regarding deprecations in jQuery can be found here: https://github.com/thecarnie/cycle2 -- although no real significant changes have been made regarding layout or behavior.

[iam-sysop]

As no further comment or information has been marked, and further investigation is not possible, I recommend this issue be closed. Based on information available in issue-report as well as experience with code, I feel that this is a CSS issue and not a Cycle2 issue.

• Behavior unable to be reproduced
• Requires further information

• Recommend "Close" of this issue.

[barlambe]

Hello,

This is the link with an example

http://test.modelspoor.be/node/3040

page is made with display suite 2 column stacked. Left column has the following setup:

picture - cycle 2 slideshow
taxonomy term 1
taxonomy term 2

both taxonomyterms are hidden behind the slideshow. slideshow extends over the footer

left column, bodytext.

If the text is long enough, everything seems normal and visible but with a short text, you only see as in the example.

best regards,
bart lambert

[iam-sysop]

The issue lies in the usage of wrapper <div> elements around the slide images. Cycle2 uses the height of the "slide" - in your case, the image-wrapping-div to calculate heights. I am working out a demo-resolution for you to examine.

[Caltosax]

I am the author of the original Drupal issue that @barlambe referenced. After looking into it further, it appears that the issue is in fact with the Drupal module rather than the cycle2 library. Please see here for details.

Basically, the value of autoHeight is being set to the string "0" instead of the integer 0. I believe that a string is considered to be invalid input, and it seems that auto-height defaults to being disabled in this case.