search

malsup / cycle2

2nd gen cycling
899 stars 239 forks source link

Slides overlap content #856

Open barlambe opened 3 years ago

barlambe commented 3 years ago

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:

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 commented 3 years ago

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 commented 3 years ago

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.

barlambe commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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.