Last thumbnail missing
4 years 10 months ago - 4 years 10 months ago #54702
by GillianS
Replied by GillianS on topic Last thumbnail missing
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
(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:
(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.
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;
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;
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 10 months ago by GillianS. Reason: Extra info (see 'EDIT')
Please Log in or Create an account to join the conversation.
4 years 10 months ago - 4 years 10 months ago #54706
by GillianS
Replied by GillianS on topic Last thumbnail missing
I have managed to add some more css to force the container to be 770px wide:
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.
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 10 months ago by GillianS. Reason: extra info.
Please Log in or Create an account to join the conversation.
4 years 10 months ago #54708
by ced1870
Joomlack Webmaster and Developer
Replied by ced1870 on topic Last thumbnail missing
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
Please Log in or Create an account to join the conversation.
Time to create page: 0.206 seconds