Modal conflict between layout css and view css using AdminLTE and yii2FullCalendar

[jc.reyes.suazo (Juan Carlos Reyes Suazo)]

Im using Admin LTE 3.0 and yii2fullcalendar v3.9.0

I have set a sidebar in my main layout with Admin LTE. Now I want to set yii2fullcalendar with a script that gets the date I click in the calendar, and shows a modal form to create events with the date already set.

The problem is the modal doesn’t show because adminlte.css is causing a malfunction. See image below

Here’s the code

CalendarioAsset.php

<?php

namespace app\assets;

use yii\web\AssetBundle;

class CalendarioAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/calendario/site.css',
    ];
    public $js = [
        'js/calendario/createEvent.js',
        'js/jquery.min.js'

    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\web\JqueryAsset',
        'yii\bootstrap\BootstrapAsset',          
    ];
}

DashboardAsset.php

<?php
/**
 * @link http://www.yiiframework.com/
 * @copyright Copyright (c) 2008 Yii Software LLC
 * @license http://www.yiiframework.com/license/
 */

namespace app\assets;

use yii\web\AssetBundle;

/**
 * Main application asset bundle.
 *
 * @author Qiang Xue <qiang.xue@gmail.com>
 * @since 2.0
 */
class DashboardAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/site.css',
        'css/all.min.css',
        'css/OverlayScrollbars.min.css',
        'css/adminlte.css',
        'https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700'
        
        
    ];
    public $js = [
        'js/bootstrap.bundle.min.js',
        'js/jquery.overlayScrollbars.min.js',
        'js/adminlte.js',
        
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\web\JqueryAsset',
        'yii\bootstrap\BootstrapAsset',
    ];
}

view index.php

<?php

use yii\helpers\Html;
use yii\bootstrap\Modal;
use app\assets\CalendarioAsset;
use yii\web\JsExpression;

CalendarioAsset::register($this);

/* @var $this yii\web\View */
/* @var $searchModel app\models\CalendarioSearch */
/* @var $dataProvider yii\data\ActiveDataProvider */

$this->title = 'Calendario de Reuniones';
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="calendario-index">

    <h1><?= Html::encode($this->title) ?></h1>
    
    <p>
        <?= Html::a('Ver lista', ['lista'], ['class' => 'btn btn-success']) ?>
        <?= Html::a('Crear Reunión', ['create_lista'], ['class' => 'btn btn-success']) ?>
    </p>
    
    <p>
        <?php 
            Modal::begin([
                'header' => '<h3>Crear Evento</h3>',
                'id'=>'create',
                'size'=>'modal-lg',
            ]);

            echo "<div id='modalCreate'></div>";
            Modal::end();
        ?>
    </p>
    
    <p>
        <?php 
            Modal::begin([
                'header' => '<h3>Información del evento</h3>',
                'id'=>'view',
                'size'=>'modal-lg',
            ]);

            echo "<div id='modalView'></div>";
            Modal::end();
        ?>
    </p>
    
    <p>
        <?php
            Modal::begin([
                'header' => '<h3>Actualizar evento</h3>',
                'id' => 'update',
                'size' => 'modal-lg'
            ]);
            echo "<div id='modalUpdate'></div>";
            Modal::end();
        ?>
    </p>
    
    <p>
        <?php 
            $JsEventClick = 'function(event) {
                $.get("index.php?r=calendario/view", {"id": event.id}, function(data){
                    $("#view").modal("show")
                           .find("#modalView")
                           .html(data);
               });            
            }'
        ?>
    </p>
    
    <p>
        <?php
            $JsEventDrop = 'function(event, delta, revertFunc) {
                    var event_data = {
                        id: event.id,
                        fecha_inicio: $.fullCalendar.formatDate(event.start, "YYYY-MM-DD"),
                        hora_inicio: $.fullCalendar.formatDate(event.start, "HH:mm"),
                        hora_termino: $.fullCalendar.formatDate(event.end, "HH:mm"),
                        fecha_termino: $.fullCalendar.formatDate(event.end, "YYYY-MM-DD"),
                    };
                    if (!confirm("¿Está seguro que desea modificar la fecha y/o hora?")) {
                        revertFunc();
                    }
                    else {
                        $.ajax({
                            type: "POST",
                            url: "index.php?r=calendario/update-drop" + "&id=" + event_data.id 
                            + "&fecha_inicio=" + event_data.fecha_inicio + "&hora_inicio=" + event_data.hora_inicio 
                            + "&hora_termino=" + event_data.hora_termino + "&fecha_termino=" + event_data.fecha_termino,
                            success: function(json) {
                                alert("Fecha y/o hora modificada correctamente");
                            }
                        });
                    }
                }'
        ?>
    </p>
    
    <p>
        <?php
            $JsEventResize = 'function(event, delta, revertFunc) {
                    var event_data = {
                        id: event.id,
                        hora_inicio: $.fullCalendar.formatDate(event.start, "HH:mm"),
                        hora_termino: $.fullCalendar.formatDate(event.end, "HH:mm"),
                    };
                    if (!confirm("¿Está seguro que desea modificar la hora?")) {
                        revertFunc();
                    }
                    else {
                        $.ajax({
                            type: "POST",
                            url: "index.php?r=calendario/update-resize" + "&id=" + event_data.id 
                            + "&hora_inicio=" + event_data.hora_inicio + "&hora_termino=" + event_data.hora_termino,
                            success: function(json) {
                                alert("Hora modificada correctamente");
                            }
                        });
                    }
                }'
        ?>
    </p>
        
    <p>
        <?php
            $JsEventRender = 'function(event, element){
                element.popover({
                    title: "Descripción",
                    animation:true,
                    delay: 300,
                    placement: "top",
                    content: event.description,
                    trigger: "hover",
                    container: "body",
                });
            }'
        ?>
    </p>
    
    <p>
        <?= yii2fullcalendar\yii2fullcalendar::widget([
            'events' => $events,
            'id' => 'calendario',
            'options' => [
                      'lang' => 'es',
                    ],
            'clientOptions' => [
                    'selectable' => false,
                    'editable' => true,
                    'droppable' => true,
                    'header' => [
                        'left' => 'prev,next,today',
                        'center' => 'title',
                        'right' => 'month,agendaWeek,agendaDay,listDay',
                        ],
                'minTime' => '08:00',
                'maxTime' => '21:00',
                'height' => 'auto',
                'snapDuration' => '00:05:00',
                'eventRender' => new JsExpression($JsEventRender),
                'eventClick' => new JsExpression($JsEventClick),
                'eventDrop' => new JsExpression($JsEventDrop),
                'eventResize' => new JsExpression($JsEventResize),
                    ],
            ]);
        ?>
    </p>
</div>

calendaario/site.css

.modal {
    overflow-y: scroll!important;
}

.modal-header {
    border-bottom: 0 none;
    padding-bottom: 0px;    
}

.modal-body {
    padding-top: 0px;
    padding-bottom: 0px;
}

adminlte.css

```
.modal {
    overflow-y: scroll!important;
    overflow-x: visible;
    display: block;
    overflow: scroll;
}

.modal-header {
    border-bottom: 0 none;
    padding-bottom: 0px;    
}

.modal-body {
    padding-top: 0px;
    padding-bottom: 0px;
}

.modal-open {
    overflow: scroll;
    overflow-x: visible;
    overflow-y: scroll!important;
}

.modal-content{
    overflow: scroll;
}
```

adminlte.css

```
.modal-open {
  overflow: hidden;
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 0;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: 0.5rem;
  pointer-events: none;
}

.modal.fade .modal-dialog {
  transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  -webkit-transform: translate(0, -50px);
  transform: translate(0, -50px);
}

@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {
    transition: none;
  }
}

.modal.show .modal-dialog {
  -webkit-transform: none;
  transform: none;
}

.modal-dialog-scrollable {
  display: -ms-flexbox;
  display: flex;
  max-height: calc(100% - 1rem);
}

.modal-dialog-scrollable .modal-content {
  max-height: calc(100vh - 1rem);
  overflow: hidden;
}

.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}

.modal-dialog-centered {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  min-height: calc(100% - 1rem);
}

.modal-dialog-centered::before {
  display: block;
  height: calc(100vh - 1rem);
  content: "";
}

.modal-dialog-centered.modal-dialog-scrollable {
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  height: 100%;
}

.modal-dialog-centered.modal-dialog-scrollable .modal-content {
  max-height: none;
}

.modal-dialog-centered.modal-dialog-scrollable::before {
  content: none;
}

.modal-content {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: #ffffff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.5);
  outline: 0;
}

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

.modal-backdrop.fade {
  opacity: 0;
}

.modal-backdrop.show {
  opacity: 0.5;
}

.modal-header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid #e9ecef;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}

.modal-header .close, .modal-header .mailbox-attachment-close {
  padding: 1rem;
  margin: -1rem -1rem -1rem auto;
}

.modal-title {
  margin-bottom: 0;
  line-height: 1.5;
}

.modal-body {
  position: relative;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1rem;
}

.modal-footer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: end;
  justify-content: flex-end;
  padding: 1rem;
  border-top: 1px solid #e9ecef;
  border-bottom-right-radius: 0.3rem;
  border-bottom-left-radius: 0.3rem;
}

.modal-footer > :not(:first-child) {
  margin-left: .25rem;
}

.modal-footer > :not(:last-child) {
  margin-right: .25rem;
}

.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

@media (min-width: 576px) {
  .modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto;
  }
  .modal-dialog-scrollable {
    max-height: calc(100% - 3.5rem);
  }
  .modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 3.5rem);
  }
  .modal-dialog-centered {
    min-height: calc(100% - 3.5rem);
  }
  .modal-dialog-centered::before {
    height: calc(100vh - 3.5rem);
  }
  .modal-content {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
  }
  .modal-sm {
    max-width: 300px;
  }
}

@media (min-width: 992px) {
  .modal-lg,
  .modal-xl {
    max-width: 800px;
  }
}

@media (min-width: 1200px) {
  .modal-xl {
    max-width: 1140px;
  }
}

I don’t know how to edit adminlte.css to show the calendar’s modal @softark @samdark @emuthomi

[softark]

Hi @jc.reyes.suazo,

I’m sorry but I have no idea about this problem, because I have no experience with Admin LTE and FullCalendar.

$(function(){
    $(document).on('click', '.fc-day', function(){
        var fecha_inicio = $(this).attr('data-date');
        var fecha_termino = $(this).attr('data-date');
        $.get('index.php?r=calendario/create', {
            'fecha_inicio' : fecha_inicio,
            'fecha_termino' : fecha_termino
        }, function(data){
           $('#create').modal('show')
                       .find('#modalCreate')
                       .html(data);
        });
    });
    
    $(function(){
        $('#btn_save').click(function(){
            $('#create').modal('show')
                    .find('#modalCreate')
                    .load($(this).attr('value'));
        });
    });    
});

I would try to trace this code step by step using the browser’s dev tool.

[jc.reyes.suazo (Juan Carlos Reyes Suazo)]

Maybe it is because yii forces fullcalendar to use admin LTE jquery and bootstrap so modal is not supported by those versions. Any suggestions on how to trace the code?

[softark]

@jc.reyes.suazo

Any suggestions on how to trace the code?

Any web browser nowadays has some developer’s tool that you can use to trace your javascript code. It’s very useful and you’ll like it.

[jc.reyes.suazo (Juan Carlos Reyes Suazo)]

Yes, I know. I’ve been tracing the code, see the image in the post… but any advice?

[softark]

On which line does your code break?

[jc.reyes.suazo (Juan Carlos Reyes Suazo)]

That’s the thing, it doesn’t break, it just doesn’t show the modal. The main window fades but the modal doesn’t appear.

[emuthomi (Eric)]

Go to the Elements tab in Chrome DevTools and see if the modal div is rendered but it’s still hidden.

[softark]

@jc.reyes.suazo

The main window fades but the modal doesn’t appear.

You mean a gray overlay on the main window without a modal on it?

It sounds like a problem of CSS rather than JavaScript.
Hidden, z-order, or a position out of sight … something like that.

[jc.reyes.suazo (Juan Carlos Reyes Suazo)]

@softark @emuthomi

This is what I see

I tried some css, i.e. .modal, .modal-body, .modal-open and .modal-content, with no success.

Here’s the stackoverflow thread https://stackoverflow.com/questions/61298858/modal-doesn-t-show-using-admin-lte-v3-0-yii2fullcalendar-v3-9-0-yii2

[tri (tri - Tommy Riboe)]

398 x 2320.500 !?

[jc.reyes.suazo (Juan Carlos Reyes Suazo)]

Console shows me this

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help, check https://xhr.spec.whatwg.org/.

with this code

$(function(){
    $(document).on('click','.fc-day', function(){
        var fecha_inicio = $(this).attr('data-date');
        var fecha_termino = $(this).attr('data-date');
        $.ajax({
            type: 'GET',
            url: "index.php?r=calendario/create",
            async: true,
            data: 'fecha_inicio='+fecha_inicio+'&fecha_termino='+fecha_termino,
            success: function(data){
                $('#create').modal('show')
                    .find('#modalCreate')
                    .html(data);
            }
        });
    });   
});

[jc.reyes.suazo (Juan Carlos Reyes Suazo)]

Anyone has any idea?

[angelusroman]

try to remove css class fade when modal load in your js code

 $('#modalButton').click(function () {
    $('#modal').modal('show').removeClass('fade').appendTo("body");
});

[elivia22]

thanks! you saved my day…

[itmagetan1 (itmagetan)]

I have similar problem using bootstrap4 modal in adminlte3 template. Calling modal break adminlte layout, because yii2 automatically inject 3 bootstrap files (js, css, jquery), makes it confict with adminlte assets. So i have to prevent/disable it using below codes in every view files using modal:

Yii::$app->assetManager->bundles['yii\bootstrap4\BootstrapAsset'] = false; // Add this to prevent bootstrap4 Modal css file injected
Yii::$app->assetManager->bundles['yii\bootstrap4\BootstrapPluginAsset'] = false; // Add this to prevent bootstrap4 Modal js file injected
Yii::$app->assetManager->bundles['yii\web\JqueryAsset'] = false; // Add this to prevent jquery file injected

I don’t know it is a best practice or not, but it solved my problem.