Md_modal (dialog) à la taille du contenu et centré

Salon des Développeurs Aide Programmation
1

Bonjour à tous,

des heures que je cherche sans trouver :slight_smile:

J’ouvre une md_modal pour afficher un contenue qui a une taille automatique, mais qui ne prend pas toute la largeur et hauteur de l’écran :

pour l’ouvrir :

    $('.thd_openEqLogic').on('click', function () {
      var eqId=$(this).attr('data-id');
      $('#md_modal').dialog({title: $(this).attr('data-name')});
      $('#md_modal').load('index.php?v=d&plugin=thvirtuel&modal=showthv&eqLogic_id='+eqId).dialog('open');
    });

et ce que j’affiche dans le modal :

<div style="display:inline-block!important;width:auto;margin-left:auto!important;margin-right:auto!important;">
<?php echo $eqLogic->toHtml();?>
</div>

Je veux donc que le md_modal fasse la taille du contenu (petit et pas du plein écran). Je n’y arrive pas

2

bonjour, aucune idée si je vais répondre à ta question.
il faut définir la taille ou le définir « auto »
« .dialog (autoreize,…) » car bien souvant la taille correspond à un cache. le reize reste en mémoire

exemple avec iframe

3

Bon j’ai essayé pas mal de trucs, mais rien ne fonctionne.

Je n’arrive pas à reproduire ce qu’il se passe quand on ouvre un historique de commande par exemple (la fenêtre se redimensionne au contenu)…

4

Ok, je pense que j’ai trouvé une solution.

testé sur Chrome (Windows) et sur Android.

La dialog m’arrive aux bonnes dimensions et centrée.

<script>
  if ($('#thvirtuel_dialog').length) {
    var thvirtuel_dialog = $('#thvirtuel_dialog');
  } else {
    var thvirtuel_dialog = $('<div id="thvirtuel_dialog" title=""></div>').appendTo("body").dialog({ autoOpen: false,
      modal: true,
      resizable: true,
      draggable: true,
      width: "auto",
      height: "auto",
      dialogClass:"dialogStyle",
      closeText: "",
      closeOnEscape: true}
    );
  }
  $('.thd_openEqLogic').on('click', function () {
    var eqId=$(this).attr('data-id');
    var thvirtuel_dialog = $('#thvirtuel_dialog');
    thvirtuel_dialog.dialog("option", "title", $(this).attr('data-name'));
    thvirtuel_dialog.load('index.php?v=d&plugin=thvirtuel&modal=showthv&eqLogic_id='+eqId);

    //Corrige l'erreur de position x
    setTimeout(function () {
      $('#thvirtuel_dialog').dialog('open');
      //Corrige l'erreur de position y sur mobile Android
      var box = $('#thvirtuel_dialog').closest('.ui-dialog');
      var windowHeight = window.innerHeight;
      var boxHeight = box.height();
      box.css('top', window.scrollY+((windowHeight - boxHeight )/2));
    }, 500);
  });
</script>
5

Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.