Modal box: detail box does not show up

Phoca Download - download manager
User avatar
fabio42
Phoca Enthusiast
Phoca Enthusiast
Posts: 81
Joined: 09 Oct 2018, 16:39

Modal box: detail box does not show up

Post by fabio42 »

Hello!
After migrating to joomla 5, something is not working on my site.
When I click on "Details" in the downloads page, I simply get a sort of veil on the screen (what should be in the background behind the modal box popup) and that's all. The details box does not show up. :cry:
Here's a link to show you:
https://www.4u2learn.fr/joomla/downloads/methodology
What is going wrong?
Thanks a lot for your precious help!
Fabrice

Tags:
christine
Phoca Hero
Phoca Hero
Posts: 2819
Joined: 28 Nov 2010, 17:20

Re: Modal box: detail box does not show up

Post by christine »

Hi Fabrice,

I don't know off the top of my head. Template, bootstrap twice, modal box etc. ...?

Before we can look further, do you have the latest PD version? If not, then:
https://www.phoca.cz/download/68-phoca- ... -component (from 03.09.2024)
install it over it. And go through the options again.

Kind regards
Christine
User avatar
fabio42
Phoca Enthusiast
Phoca Enthusiast
Posts: 81
Joined: 09 Oct 2018, 16:39

Re: Modal box: detail box does not show up

Post by fabio42 »

Thanks for your reply Christine!

1/ I checked the version and it's definitely up to date.
2/ I don't know if Gantry already loads bootstrap or not. I've checked in the parameters and it seems there's nothing you can really set or deactivate.
3/ I've already had (in the past versions of phocadownload) to make a few changes in terms of css. You've been really helpful in giving me help to display some elements correctly :D . Here's the code modifications that we've made so far. Maybe one of them is in conflict and could be the culprit? :idea:

Code: Select all

@import "dependencies";

// Slideshow Particle
@import "slideshow";

// sample date hydrogen
// @import "sample";

// bouton login modification de la longueur et hauteur 
.button {
        padding: 0.5rem 1.12rem;
    }
    
/*phocadownload espace entre downloads et nombre*/
.pd-fl-m {
position: relative;
float: left;
margin: 5px 0;
padding-left: 20px;
}

.cc_banner-wrapper  {
	.cc_container {
		border-color: $base-border-color;
		padding: 15px 20px 70px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
		.cc_message {
			line-height: 1.5rem;
		}
		.cc_btn {
			background-color: $accent-color-1;
			color: #ffffff;
			left: 20px;
			right: 20px;
			bottom: 20px !important;
			@include transition(all 0.2s);
			&:hover, &:focus {
				background-color: lighten($accent-color-1, 10%);
				color: #ffffff;
			}
		}
		.cc_logo {
			display: none;
		}
	}
}

/*phocadownload largeur nom de catégories*/
#phoca-dl-categories-box div.pd-categoriesbox {
    width: 40%;
}

/* tags plus rapprochés du titre de l'article */
/* ul, ol, dl {margin-top: -2rem;} */
/* essai2 de tags rapprochés*/
/* ul .tags inline {margin-top: -2.5rem;}*/
/* essai 3*/
ul.tags.inline {
margin-top: -30px !important;
}

/*phoca download detail popup - width*/
.modal-dialog {
min-width: 600px;  
}

/*phoca detail box bug affichage*/
#sbox-window {
height:auto !important;
}
.contentpane.modal {
padding: 0.5rem;
}

/* phocadownload - couleur du bouton download dans la detail box*/
#phoca-dl-file-box .pd-button-download {
background-image: linear-gradient(to bottom, #ffbfbf, #e6e6e6);
}

/*navigation - réduire la hauteur*/
#g-navigation .maclass .g-content {
padding:0;
}

/*couleur highlight des search results*/
.search span.highlight {background-color: #f3f295;
}

/*espace avant le bouton dans la boîte de login*/
.btn btn primary {margin-top: 13px !important ;
  			      margin-bottom: -16px !important;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index:5!important;
    width: 100vw;
    height: 100vh;
    background-color: #000;
}

.ns-bs5 .btn-primary {
  color: #fff;
  background-color: #c06c84;
  border-color: #c06c84;
  }


/* phocadownload - si nom de fichier trop long HOT placé en retour de ligne*/
@media only screen and (min-width:400px) {
#phoca-dl-category-box .pd-document16, #phoca-dl-download-box .pd-document16 {
width: 150%;
}}

/* ligne sous article */
.blog-item.blog-item { padding-bottom: 25px; border-bottom: 2px solid; border-color: #c06c84 }
Thank you again for taking the time to help!
Fabio
christine
Phoca Hero
Phoca Hero
Posts: 2819
Joined: 28 Nov 2010, 17:20

Re: Modal box: detail box does not show up

Post by christine »

Hi Fabio,
fabio42 wrote: 15 Sep 2024, 10:02 2/ I don't know if Gantry already loads bootstrap or not. I've checked in the parameters and it seems there's nothing you can really set or deactivate.
I would first temporarily switch to Cassiopeia. To check, if it's OK there.
Because I suspect it's Gantry. Also, see the 2 bootstrap versions:

https://www.4u2learn.fr/joomla/media/ga ... strap5.css

https://www.4u2learn.fr/joomla/media/co ... ap.min.css

I would also go through the options in PD.
3/ I've already had (in the past versions of phocadownload) to make a few changes in terms of css.
It was probably just a matter of "formatting". I don't remember.

I can't say more now, we have flood alarm and damage...

Kind regards
Christine
User avatar
fabio42
Phoca Enthusiast
Phoca Enthusiast
Posts: 81
Joined: 09 Oct 2018, 16:39

Re: Modal box: detail box does not show up

Post by fabio42 »

Thanks a lot!
So, I've been trying those:
1/ I tried to swtich to cassiopeia by activating it as my default template. However, when I get to the downloads page, my Gantry template gains the upper hand, and I can't find out why. Tried to modify the template name in the menu parameters. In vain. So, I basically can't figure out what makes it impossible to have the template Cassiopeia with my downloads menu...
2/ I see that there are 2 versions of bootstrap indeed. When I look into the PD css, I see that:
Image
Now if I unpublish Bootstrap.min.css (the old bootstrap version??), the modal popup appears but this is what I see:
Image

instead of:
Image

What can I do?
Can I do without this Bootstrap.min.css file? Where is it called for? In other words, does PD need it to work?
3/ Yes, we happened to do a bit of formatting. I sent you the code just for you to check if, by any chance, there might be a conflict between what we inserted in the custom.scss file

Well, good luck with floods! I hope you'll make it through because it really seems to be dramatic and disastrous!
christine
Phoca Hero
Phoca Hero
Posts: 2819
Joined: 28 Nov 2010, 17:20

Re: Modal box: detail box does not show up

Post by christine »

Hi Fabio,

Here there is a PD Demo (Gantry): https://www.phoca.cz/demo/phoca-downloa ... -documents

- bootstrap.min.css of PD ist not actived.
- Deactive: default.css (it's empty)
- Activate: button.css
Here's the code modifications that we've made so far. Maybe one of them is in conflict and could be the culprit?
A lot of them seem unfamiliar to me. I can't find them either. You can try removing this or that temporarily.

Difficult to check/know because there are many compiled CSS files.
I tried to swtich to cassiopeia by activating it as my default template. However, when I get to the downloads page, my Gantry template gains the upper hand, and I can't find out why.
I don't understand why it is not possible to switch to Cassiopeia for testing purposes. Activate it under: Style.

Well, good luck with floods! I hope you'll make it through because it really seems to be dramatic and disastrous!
Thank you. Unfortunately, the flood is still bad. Lots of fire department operations etc. Fortunately the sun is back today - we hope.

Kind regards
Christine
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 48402
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Modal box: detail box does not show up

Post by Jan »

Hi, the way it should work best is to have boostrap load from a Joomla/template. It means to load only one Bootstrap (best by template), be sure, it is the latest Bootstrap version. It is not recommended to load the Bootstrap from Phoca Download. It is even not included inside Phoca Download 5 (so if you can see it in your folder, it means, it stayed there from some previous version and should be removed).
If you find Phoca extensions useful, please support the project
User avatar
fabio42
Phoca Enthusiast
Phoca Enthusiast
Posts: 81
Joined: 09 Oct 2018, 16:39

Re: Modal box: detail box does not show up

Post by fabio42 »

Thanks Christine and Jan!
So, I'll try what you suggest.
Yet, Jan, how can I remove Bootstrap (the old version)? Really, I'd love to know!
(good to know sun is back and you're safe! :D )
User avatar
fabio42
Phoca Enthusiast
Phoca Enthusiast
Posts: 81
Joined: 09 Oct 2018, 16:39

Re: Modal box: detail box does not show up

Post by fabio42 »

So, Christine, I reproduced the same configuration as you suggested:
- bootstrap.min.css of PD ist not actived.
- Deactive: default.css (it's empty)
- Activate: button.css
And I get the same result:
The modal popup appears (yet, it used to be in one single box, here, I have a box with a scroll bar, so it's not very satisfying, as if users wish to have the whole information they will have to use the scroll bar, which will never happen :lol: ), but the rounded corners buttons are absent, so I have no colours around them.
After looking at the old scss modifications, I think none should be the culprits as they have nothing to do with modal boxes whatsoever. yet, I'll try to uncomment them after Yan has told me how to remove the old bootstrap version.
Thanks again.
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 48402
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: Modal box: detail box does not show up

Post by Jan »

Hi, testing your site now, I get standard modal there. :idea:

Image
If you find Phoca extensions useful, please support the project
Post Reply