Dijit/Dialog setzt Höhe auf kleinen Fenstergrößen

Ich habe ein Dijit/Dialog, der normalerweise bei Browserfenstergrößen> 1102px anzeigt, aber bei Größen kleiner als das Verhalten sich ungewöhnlich verhält. Ich habe herausgefunden, dass der Grund dafür ist, dass der JS feste Höhen und kleinere Browserbreiten hinzufügt (sowie einige zusätzliche absolute Positionierung auf Kinderknoten). Kann jemand erklären, warum das so ist oder wie man verhindert, dass diese Höhen/absolute Positionierungen eingestellt werden (vorzugsweise ohne dass man einfach! Wichtiges Styling überall verwenden muss). Oder missverstehe ich und es gibt einen anderen Grund, der passiert?Dijit/Dialog setzt Höhe auf kleinen Fenstergrößen

Ich konnte einen Plünderer zeigen, dass dies passiert. Wenn Sie es laden, wenn das Plunker-Widget < 1105px ist, sehen Sie eine feste Höhe, wenn Sie in Dev-Tools suchen, aber wenn Sie es laden, wenn der Plunker> 1105px ist, sehen Sie keine feste Höhe.

https://plnkr.co/edit/JCY0qRzXPIwNIAUgVOFM?p=preview

require (['dojo/parser', 'dojo/domReady', 'dijit/Dialog'], 
function (parser, ready, Dialog) { 
    ready(function() { 
     var dialog = new Dialog({title: "Random Title", style: 'width: 990px;'}); 
     dialog.set("content", "hello"); 
     dialog.show(); 
     parser.parse(); 
    }); 
    return {}; 
});

Hinweis: Sie müssen neu geladen werden (Laufstopp dann) die Plunker den Dialog im neuen Browserbreite neu zu laden. Nur die Änderung der Browser-Größe, während der Dialog geöffnet ist, wird nicht die fixe Höhe führen zu zeigen/verschwinden

Quelle

2017-03-08 pasquers

Documentation sagt:

Ein Dialog von Standardgrößen selbst nach ihrem Inhalt, wie eine einfachen <div> . Wenn der Inhalt für den Bildschirm zu groß ist, fügt Dialog automatisch eine Bildlaufleiste hinzu.

Daher sollten Sie normalerweise keine explizite Größe für einen Dialog festlegen müssen. Wenn Sie nicht möchten, dann müssen Sie Breite/Höhe zu einem div innerhalb den Dialog hinzuzufügen, oder stellen Sie eine Größe in der .dijitDialogPaneContent div:

Ihr Beispiel Breite Eigenschaft auf Dialog setzt, wie einstellen es innen in this example

Quelle

2017-03-09 10:48:23 barbsan

umgehen dieses problème gezeigt Sie den Dialog CSS-Eigenschaft können Sie die Breite Größe als Blow-Schnipsel beheben:

.dijitLayoutContainer { 
    width: 990px !important; 
} 
// set some spacing from parent 
.dijitDialogTitleBar,.dijitDialogPaneContent { 
    width: 980px !important; 
}

über einem Arbeits schnipp pet

require (['dojo/parser', 'dojo/domReady', 'dijit/Dialog'], 
 
function (parser, ready, Dialog) { 
 
    ready(function() { 
 
     var dialog = new Dialog({title: "Random Title", style: 'width: 990px;'}); 
 
     dialog.set("content", "hello"); 
 
     dialog.show(); 
 
     parser.parse(); 
 
    }); 
 
    return {}; 
 
});

.dijitLayoutContainer { 
 
    width: 990px !important; 
 
} 
 
/*to make spacing right nd left */ 
 
.dijitDialogTitleBar,.dijitDialogPaneContent { 
 
    width: 980px !important; 
 
}

<link href="//ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" rel="stylesheet"/> 
 
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.11.3/dojo/dojo.js"></script> 
 
<body class="claro"> 
 
    
 
</body>

Quelle

2017-03-09 12:20:46

Dijit/Dialog setzt Höhe auf kleinen Fenstergrößen

Antwort

Verwandte Themen