Last thumbnail missing

Replied by GillianS on topic Last thumbnail missing

Posted 4 years 3 months ago #54702
I think I am getting to the bottom of the problem.

I switched the template to Protostar where the thumbnails display correctly and used Firefox inspector to see if I could spot any differences and have noticed that in Protostar the ul element of the thumbnails initially has an inline style of
Code:
width=770px; margin-left: auto; margin-right: auto;
(pic #1)


After the first five slides have been shown, the thumbnail display shifts to the left and now has this style, which is correct:
Code:
width=770px; margin-left: auto-318px; margin-right: auto;
(pic #2, at the last slide)


However, in my template, for some reason the width is set at 757px (pic #3)


and, after the first five slides, its left margin changes to -288px. (pic #4).


If I manually change the width in the Inspector to 770px and margin-left to -318px, it displays correctly. (see pic #5).


I have added a new menu item to the site called 'Gallery Protostar' (/gallery-protostar) with the same Slideshowck module displayed. Both are displayed in an article (using Modules Anywhere) with a div of half width (span6 for Protostar which is Bootstrap 3 and col-6 for my template which is Bootstrap 4).

EDIT: I've just noticed that I've been looking on my desktop in Firefox (I find its Inpsector the easiest to use). There is a similar problem in MS Edge but on Chrome it displays correctly, so this makes me think it is possibly a browser CSS conflict.

Does this help?

Also, for some reason, whatever I do, the following options do not work:

1. Thumbnails = 'Yes' does not work if Pagination is also Yes in the 'Options' tab. If this is deliberate, then the tooltip for thumbnails needs to expain this.
2. Putting 640px (or any npx) in the 'Width' field in the 'Options' tab has no effect.
3. In the 'Advanced' tab, selecting a Bootstrap Size to 6, for example, has no effect.
Last Edit:4 years 3 months ago by GillianS
Last edit: 4 years 3 months ago by GillianS. Reason: Extra info (see 'EDIT')

Please Log in or Create an account to join the conversation.

Replied by GillianS on topic Last thumbnail missing

Posted 4 years 3 months ago #54706
I have managed to add some more css to force the container to be 770px wide:
Code:
.camera_thumbs_cont div ul { width: 770px !important;}

It's not ideal, but in most cases this now shows the thumbnail for the last image. I have noticed, though, that on a wider screen, the last thumbnail is displayed only until the last image and caption fully appears, at which point it disappears again. If the screen is less than 768px wide, this doesn't happen. N.B. This happens on both my template and Protostar.
Last Edit:4 years 3 months ago by GillianS
Last edit: 4 years 3 months ago by GillianS. Reason: extra info.

Please Log in or Create an account to join the conversation.

Replied by ced1870 on topic Last thumbnail missing

Posted 4 years 3 months ago #54708
yes you must use a such css fix in your case, because the width is calculated in javascript and in this special case the total is not correct because of a css confict.

Joomlack Webmaster and Developer

by ced1870

Please Log in or Create an account to join the conversation.

Time to create page: 0.688 seconds

Fast and powerful creation, customizable and responsive.

Read More

We have 836 guests and no members online