Ajustar layout do tema lambda do Moodle para MReport

Ao instalar o MReport no Moodle 3.8, notou-se que as telas de relatórios do MReport estavam com a formatação quebrada. Para resolver isso, foi inserido CSS para ajustar o layout.

Trata-se do cenário do tema lambda na versão 3.8 do Moodle. Em outras versões, o código apresentado aqui pode não funcionar. O importante é inspecionar o elemento no navegador, ver a incompatibilidade, corrigir e depois inserir CSS para formatar as telas do relatório.

É importante ressaltar que os códigos CSS inseridos se aplicam apenas quando as telas do relatório são acessadas. Isso significa que não interfere em outras áreas do Moodle.

Quando foi instalado o MReport, as telas do relatório apareceram desconfiguradas, como ilustra a imagem a seguir.

Com a aplicação do CSS, as telas ficaram arrumadas, como ilustra a imagem a seguir.

Segue o comando CSS que foi configurado.

.badiunet-content-nformated-service .row{
     display: flex !important;
     gap: 16px;
}
.badiunet-content-nformated-service .row .col{
     width: 33%;
     padding: 6px;
}
.badiunet-content-nformated-service .row .col .card-body{
         padding: 12px;
}
 
#region-main {
    width: 100% !important;
}
 
#block-region-side-pre{
    visibility: hidden !important;
}
 
 
#badiu-report-search-firtrow {
  wdisplay: block !important;
}
 
 
#badiu-report-search-firtrow .col{
  width: 100% !important;
}
 
#badiu-report-search-othersrows{
display: block !important;
}
 
#badiu-report-search .row .col-4{
  width: 33%;
}
 
#badiu-report-search .row .col-3{
  width: 30%;
}
 
#badiu-report-search .row .col-2{
  width: 30%;
}
#badiu-report-search .row .col-1{
  width: 20%;
}
#badiu-report-search select {
    width: 100%;
}
#badiu-report-search input {
    width: 100%;
}
 
.vdp-datepicker__calendar {
    position: relative;
}
 
#badiu-report-result .btn{
    width: 95%;
}
 
.badiu-report-list .container-fluid .row .col-sm-4{
  width: 30%;
}
 
.badiu-report-list .container-fluid .row .col-sm-8{
  width: 70%;
}
 
.badiu-report-list .container-fluid .row  img{
  width: 100%;
}

    

Para aplicar esse CSS, clique aqui e siga as orientações de como customizar o comando CSS nos relatórios do MReport.