Hi Florian,
Thanks for your update.
Query : every Browser shows the same super-small dialog:
By default, we have applied max-height for the edit dialog based(may vary on browsers) on the html and body element height. We suggest you to apply the height for the html and body element as 100% to resolve the reported problem (super small dialog).
Please refer to the below code example for more information.
|
<ejs-tab id="defaultTab" heightAdjustMode="Auto" overflowMode="Scrollable">
<e-tab-tabitems>
<e-tab-tabitem header="ViewBag.headerTextTwo" content="#general-section"></e-tab-tabitem>
<e-tab-tabitem header="ViewBag.headerTextOne" content="#user-section"></e-tab-tabitem>
</e-tab-tabitems>
</ejs-tab>
<div id="general-section" style="display: none">
<h1>TEST</h1>
</div>
<div id="user-section" style="display: none">
<div class="row">
<ejs-grid id="Grid" actionComplete="actionComplete" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" dataSource="ViewBag.dataSource">
<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog"></e-grid-editSettings>
<e-grid-columns>
<e-grid-column field="CustomerID" headerText="Customer Name" width="150"></e-grid-column>
</e-grid-columns>
</ejs-grid>
</div>
<style>
// Its need to add the below CSS
html, body{
height: 100% !important;
}
</style>
|
|
<style>
// add the below css to set grid form table width 100%
.e-edit-dialog .e-gridform .e-table {
border-collapse: separate;
border-spacing: 11px;
width: 100%;
}
.e-edit-dialog .e-dlg-content {
position: relative;
}
</style>
|
Note : We have already included the above CSS in source level since the CDN is not refreshed so we suggest you to apply the CSS in sample level. Once the cdn refreshed there is no need to add the above CSS(for apply width 2nd table).
Regards,
Thavasianand S.
