[build/js]: Fix height problem on default tabs for the IFrame plugin. (#3876)

This commit is contained in:
Diego Smania 2021-09-17 16:26:49 -03:00 committed by GitHub
parent 3bff93f6c9
commit 3267f781b9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 9 additions and 5 deletions

View file

@ -227,14 +227,16 @@ class IFrame {
// Private
_init() {
if ($(SELECTOR_TAB_CONTENT).children().length > 2) {
const usingDefTab = ($(SELECTOR_TAB_CONTENT).children().length > 2)
if (usingDefTab) {
const $el = $(`${SELECTOR_TAB_PANE}:first-child`)
$el.show()
this._setItemActive($el.find('iframe').attr('src'))
}
this._setupListeners()
this._fixHeight(true)
this._fixHeight(!usingDefTab)
}
_initFrameElement() {

View file

@ -86,9 +86,9 @@ class Layout {
if (max === heights.controlSidebar) {
$contentSelector.css(this._config.panelAutoHeightMode, (max + offset))
} else if (max === heights.window) {
$contentSelector.css(this._config.panelAutoHeightMode, (max + offset) - (heights.footer == 0 ? 0 : (heights.header - heights.footer)))
$contentSelector.css(this._config.panelAutoHeightMode, (max + offset) - heights.header - heights.footer)
} else {
$contentSelector.css(this._config.panelAutoHeightMode, (max + offset) - (heights.footer == 0 ? 0 : heights.header))
$contentSelector.css(this._config.panelAutoHeightMode, (max + offset) - heights.header)
}
if (this._isFooterFixed()) {

View file

@ -43,7 +43,9 @@ To get the iframe 100% working you need the following content-wrapper markup:
<a class="nav-link bg-light" href="#" data-widget="iframe-fullscreen"><i class="fas fa-expand"></i></a>
</div>
<div class="tab-content">
<div class="tab-pane fade active show" id="panel-index" role="tabpanel" aria-labelledby="tab-index"><iframe src="./index.html" style="height: 671px;"></iframe></div>
<div class="tab-pane fade active show" id="panel-index" role="tabpanel" aria-labelledby="tab-index">
<iframe src="./index.html"></iframe>
</div>
<div class="tab-empty">
<h2 class="display-4">No tab selected!</h2>
</div>