Topic: video is not displayed using MDB5 on humhub
Expected behavior Hi I'm using MDB modal video on my web site based on Humhub. There an examle: https://www.artunion.com/php-pages/global_pages/test.php
Actual behavior when I call this fucntion via my website, video is not displayed you can try here https://www.artunion.com/p/test
Resources (screenshots, code snippets etc.)
Hello,
first of all please install MDB according to our tutorial: https://mdbootstrap.com/docs/standard/pro/installation/
It will solve CORS blocking issue.
Second of all you have to remove aria-hidden="true" attribute from your modal content, and change data attributes to data-mdb atttributes. For example: data-mdb-toggle="modal" data-mdb-target="#modalYT"
Here is the snippet: https://mdbootstrap.com/snippets/standard/m-duszak/3701409#html-tab-view
ArtUnion commented 3 years ago
Hello
I started from you installation but it doens't work.
pls see my test https://www.artunion.com/p/test
direct link is https://www.artunion.com/php-pages/global_pages/test.php
Styles from stylesheet linked from below declaration are overwriting your modal styles, so it's invisible:
<link href="/assets/7c543ee/css/bootstrap.css?v=1.8.0" rel="stylesheet">
Because it gives your modal style of opacity: 0; from file /assets/7c543ee/css/less/component-animations.less, exactly this fragment:
.fade {
opacity: 0;
.transition(opacity .15s linear);
&.in {
opacity: 1;
}
}
You can delete that to troubleshoot (if you are using MDB already, appending other ui kits or styling libraries may break some of your styles. It just happened with modal).If you want to stick with your actual imports, you can brute-force it with adding inline style of opacity: 1; to your MDB Modal:
<div class="modal fade" id="modalYT" tabindex="-1" aria-labelledby="myModalLabel" style="display: none; opacity: 1;" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<!--Content-->
...
ArtUnion commented 3 years ago
It seems working, but bouton close is not working and myStyle are not correct: pls see :
before https://www.artunion.com/php-pages/global_pages/before.png
after https://www.artunion.com/php-pages/global_pages/after.png
Michał Duszak staff commented 3 years ago
What action did you perform on the website that caused this? You deleted the whole stylesheet which I mentioned earlier?
ArtUnion commented 3 years ago
no, I didn't delete style I just add line you mentionned in your post
link tou reach me url is https://www.artunion.com/p/test
Michał Duszak staff commented 3 years ago
I can't see any of the tabs from the screenshots. Here is what I see in https://www.artunion.com/p/test - https://i.imgur.com/gomuH9K.png
Michał Duszak staff commented 3 years ago
What is your browser?
ArtUnion commented 3 years ago
I'm using chrome browser
Michał Duszak staff commented 3 years ago
I still can't see those tabs. Libraries which you append into your projects may be causing bad interference with MDB. For example the bootstrap.css which I told you above injects modified bootstrap v 2.0.3 from 10 years ago.
ArtUnion commented 3 years ago
that means I cannot use MDB in my project ?
ArtUnion commented 3 years ago
that means I cannot use MDB in my project ?
ArtUnion commented 3 years ago
may I ask you your reply ? pls
Michał Duszak staff commented 3 years ago
You can use MDB in your project. You have outdated libraries in your project that overwrite some of MDB functionalities. For example, the file that I mentioned above, and overwrite of .fade class and its opacity.
ArtUnion commented 3 years ago
sorry Michal it is not clear for me. can you send me an example pls
my url is https://www.artunion.com/p/test
Michał Duszak staff commented 3 years ago
As I can see now, modals work fine. Do you experience any other technical issues related to MDB?
Michał Duszak staff commented 3 years ago
According to not working close button - change data-dismiss attribute to data-mdb-dismiss.
ArtUnion commented 3 years ago
thank you
what about before https://www.artunion.com/php-pages/global_pages/before.png
after https://www.artunion.com/php-pages/global_pages/after.png
Michał Duszak staff commented 3 years ago
In the URL you provided, I don't experience such errors that you've shown in the screenshots. Is this issue related to the MDB product? Could you recreate this behaviour in a snippet? https://mdbootstrap.com/snippets/
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 3.10.0
- Device: windows
- Browser: chrome
- OS: windows
- Provided sample code: No
- Provided link: Yes