Display detail button - modal box : css bug ?

[fabio42]

Hello !
I switched the parameters from "yes(overlib" to "yes(modalbox)" and when the popup opens, the information box is slighty larger than the popup box ... any css problem ? An example of https://www.4u2learn.fr/joomla/download ... s-sequencehere.

And linked to that ... when the file is restricted to "registered users" and a public user sees the available file (because "display inaccessible file" is set to "yes", the detail box opens a page (inside the popup box) of the home page of th website. Would it be possible to display the details even is the file is not accessible to non-logged in users instead of this strange home page view ?
An example of the "issue" https://www.4u2learn.fr/joomla/downloads/audio-files.

Thanks for your answers.
Fabio

[Jan]

Hi,
1)
the modal box can be in conflict with your CSS libraries loaded on your site, there are different options:

- display it in standard popup window
- display it in modal (when standard layout is enabled, it will be used the mootools modal)
- display it in modal (when Bootstrap layout is enabled, it will be used the Bootstrap modal)

Try to enable the Bootstrap layout in Options and test it with Bootstrap modal window.

2) unfortunately no, the file is protected completely including the information, so in this case, it is not recommended to use modal window for the information (technically, in modal window is loaded the item view of the file, but such is protected, so completely view is not displayed in such case)

Jan

[fabio42]

Hi Jan !
1/ Tried all the solutions you said and here are the results :
- Bootstrap 3 mode (yes) :
+ Display yes (modal box) = a modal box appears (but it is very narrow !!! so you have to use the scrollbar to view all the info). The background of the screen becomes black but slightly transparent
+ Display yes (standard popup window) = the windows appears but is truncated at the bottom (half of the "download button"), not very aesthetic
- Bootstrap mode (load libraries)
+ Display yes (modal box) = a huge modal box appears (truncated on the right side, and at the bottom), absolutely not centered. The background becomes black and slightly transparent. There is the detail box inside the popup modal box. It seems to be centered in the modal box. The size of the detail sheet is quite ok, though there is still a scroll bar, and it is larger than the first one (see my point above)
+ Display yes (standard popup window) = there is a popup window, which is ... empty ! (no scroll bar, nothing at all)
- in Bootstrap mode "NO" (NB : when you mean "when standard layout is displayed", you mean that the bootstrap mode is set to "no" ??? right ? There is not other parameter anywhere else that I might have missed ??), so I assume in "standard layout" :
+ Display yes (standard popup window) = all the DETAIL buttons disappear on the page !!!???
+ Display yes (modal) = problem I told you about (css alignment which is not correct)

2/ Dang ! So, we're stuck with this very weird window. Is there a way to hide the DETAIL button when people are not allowed to view information ? This would be more logical ! What is the use of having access to somehting you don't have access to ?

So, now what (should I do) ? The best thing would be to opt for the combination "Bootstrap 3+display yes modal box" by elimination ?

Thanks for following up !
Fabio

[Jan]

Hi,

2) for now the option is set that the file is displayed but everything to get download or detailed information is behind login - if users should not see the files, you can just completely hide it with: Display Inaccessible file or for now the only way to fit your needs is to customize it directly in the code

1) can you paste screenshots of what do you exactly mean? Maybe there are even CSS conflicts between Bootstrap and your template, hard to say without seeing the screenshots

Bootstrap 3 - modal:



Standard Popup:



Mootools Modal Box:



Jan

[fabio42]

Hello Jan !
2/ ok, ok, fine. I just sit and cry. Well, I've been thinking of it actually. In the details box, there's nothing really top secret. Why is it hidden in the code ? (you just have the date, the number of downloads, the title and the file size ... : not so much of a revelation!). What would be the hack in the code to let it display ?

1/ I finally opted for the modal box + bootstrap, which is the most appropriate but I have 2 questions
QUESTION 1 : I wanted to modify the opacity of the background so I could have a lighter background.
I inserted (into a custom.scss file) the following code :

Code: Select all

.modal-backdrop, .modal-backdrop.fade.in
{
    opacity: 0.3;
}

Yet, when I test it (link here) something strange happens if you click out of the modal box directly into the background. Replicate this as follows :
* open one detail box
* click on the background (not the cross on the modal box)
=> everything works fine
* open another detail box
=> the background is slighly blacker
* click on it (well, actually, you have to click on it 2 times before it comes back to normal again)
and etc. !! (each time, the number of times you have to click is multiplied !! and the background becomes blacker and blacker)
What's happening there ? do you have any idea ?
(edit today = I can even replicate the same issue by clicking on the cross of the modal box => if I open several detail boxes one after the other, the background becomes darker and darker until it becomes black)

QUESTION 2 : the modal box width is set to "auto" but some long file titles are truncated. Normal ?

(well, I'd love to paste pictures but how to do it ? The editor in the forum just lets me include links to pictures ... but I don't have the possibility to insert pictures with an uploader ? I can't paste anything .... )

NB : as for montools ,I don't have this setting ?

To be continued. Thanks for your time !!

[Jan]

Hi, regarding pasting images in this forum, see:
https://www.phoca.cz/documents/50-phoca ... forum-post

2) I don't know the hack as I didn't do such modification yet, so in fact the item view needs to be changed - if the output inside the window should be modified or category view if the modal should not displayed

1) These all are more a questions on Bootstrap or Mootools developers. There are can a lot of different reasons for this. E.g. on the site, more different libraries are loaded and they are in conflit with each other. There can even by loaded older version which do not know all the current settings. Etc. Etc. The problems can be e.g. caused by wrongly closing the window (can be a problem of CSS or Javascript)

Mootools is loaded by Joomla! when Modal window will be asked. If standard output in Phoca Download is selected, Modal Window by Mootolls will be asked by Joomla!. If Bootstrap output in Phoca Download is selected, Bootstrap Window is aksed - but Bootstrap must be loaded - it can be loaded by template or Phoca Download. If by template you need to be sure, it is Bootstrap 3

So in fact all this depends on loaded CSS and JS libraries on the site. Mostly this all is managed by template. And if you know, your template is a Bootstrap 3 template, you just enable Bootstrap in Phoca Download so it can fit template settings. If it is not Bootstrap template, it can be still used Bootstrap output when Bootstrap is loaded by Phoca Download. But of course all conflicts between libraries must be solved on the site where they occurrs.

So I would say, the background is not removed from HTML when closing the modal and each time new modal is openend, the background is displayed over old backrounds - in different layer

Jan

[fabio42]

Hi Jan !
2/ That's pretty complicated ! Let's leave it like that then ! A future request maybe that could let the user select which category he wants to have the comments integrated into ? (with multiple selection ?) That would be cool !!!

1/ As for the modal box, it gets really techy for me.
Question is : I don't quite get if Bootstrap is included in Joomla or if it is the emplate which determines the version of the bootstrap. Where can we find this ???
I checked this link for my template (gantry 5) and it suggests options.
There : http://docs.gantry.org/gantry5/configure/page-settings (there is a javascript frameworks atom which you can activate)
I tried to switch Bootstrap on, then mootools on. To no avail. There are different layers juxtaposing onto each other indeed.
I'm left clueless as to what to do...

I suppose I'll stay this way. Users do not click a thousand times on details anyway . But this boostrap thing is really unsettling.

Fabio

[Jan]

Hi,

2) see: viewtopic.php?f=31&t=61142&p=160819#p160862

1) In source code you will find which version of Bootstrap is loaded and mostly by the path to the css or js you will see if this is loaded by template or component or some another extension

Gantry does not use Boostrap as default but it can load it and unfortunately, even complicated, different versions of the Bootstrap can be loaded.

So, yes, it is really complicated, displaying of detail window just depends on the library which is active on the site. Mix of different extensions (template, components, modules, plugins) can load different css and js parts on the site, so there is no other way then to see the source code and detect what part loads which css and js.

Jan

[fabio42]

Thanks for everything Jan ! A bit clearer and now, that really shows how complex it is !

[Jan]

Ok