Question

我正在尝试在调整浏览器大小时通过js调整元素的大小。第一次加载页面时，所有元素的大小都会正确调整。如果更改浏览器的大小并再次还原，则滚动条会出现在边缘，但不会出现在Mozilla和chrome中。如果我在延迟500ms的js settimeout中包含我的调整大小功能，则其正常工作！！！

为什么会这样？

HTML代码

<body class="@ViewContext.RouteData.Values["controller"].ToString() container">
    <script src="@Url.Content("~/Scripts/Custom/jsSQE-v1.0.js")" type="text/javascript"></script>
    <main class="mainContent">
        <div class="leftContent NoMinHeightWidth">
            @{ Html.RenderPartial("ContentLeftPartialView"); }
        </div>
        <div class="rightContent NoMinHeightWidth">
            @RenderBody() */below*/
        </div>
    </main>
 </body>

/* This is the body */
div class="content">
    <div class="heading">
        <div class="heading__info">
            <h3 class="heading__info-text">Client’s Users</h3>
            <div class="heading__info-buttons">
                @Html.DevExpress().Button(settings => {
                    settings.AllowFocus = false;
                    settings.Name = "btnBack";
                    settings.Text = "Back";
                    settings.Height = Unit.Pixel(CustomTheme.SmallButtonHeight);
                    settings.Width = Unit.Pixel(CustomTheme.SmallButtonWidth);
                    settings.UseSubmitBehavior = false;
                    settings.Style.Add("text-transform", "none");
                    settings.ClientVisible = false;
                    settings.ClientSideEvents.Click = "function(s, e) { SQE.GotoPreviousStep(); }";
                }).GetHtml()

                @Html.DevExpress().Button(settings => {
                    settings.AllowFocus = false;
                    settings.Name = "btnSave";
                    settings.Text = "Save";
                    settings.Height = Unit.Pixel(CustomTheme.SmallButtonHeight);
                    settings.Width = Unit.Pixel(CustomTheme.SmallButtonWidth);
                    settings.UseSubmitBehavior = false;
                    settings.Style.Add("text-transform", "none");
                    settings.Style.Add("margin-left", "8px");
                    settings.ControlStyle.BackColor = System.Drawing.Color.FromArgb(CustomTheme.ButtonSaveColor);
                    settings.ClientVisible = false;
                    settings.ClientSideEvents.Click = "function(s, e) { e.processOnServer = false; SQE.ProcessClient(); }";
                }).GetHtml()
            </div>
        </div>
    </div>
    <div id="step-1">
        <div style="height: 100%;" class="padding__small color__bg-light">
            @{Html.RenderAction("ListGridPartialView");}
        </div>
    </div>
    <div id="step-2" style="display: none;">
        <div id="clients__ajax-info">&nbsp;</div>
    </div>
    <div id="step-3" style="display: none;">
        <div id="clients__ajax-news">&nbsp;</div>
    </div>
</div>

CSS

.padding__small {
    padding: 10px;
}
.NoMinHeightWidth {
    min-width: 0;
    min-height: 0;
}

.mainContent {
    display: flex;
    height: 100%;
}

.leftContent {
    flex: 0 0 350px;
    overflow-y: auto;
}

.rightContent {
    flex: 1;
    overflow: auto;
}
/*LeftPane*/
.leftPanel {
    min-height: 700px;
    height: 100%;
    background-color: var(--color-navbar-bg);
}

clients {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-bottom: 4px;
    /*height: calc(100% - (var(--height-heading-info) + 2px));  100px + 2px padding height of heading-info*/
}

#clients__ajax-info {
    height: 100%;
}

.clients__info:first-child {
    flex: 0 0 auto;    
}

.clients__info:last-child {
    flex: 1 1 auto;
    margin-top: 10px;
    min-height: 380px;
}

.clients__info:not(:last-child) {
    display: flex;
}

.clients__info > div,
.clients__locations > div {
    border-radius: 5px;
    background-color: var(--color-bg-light);
}

    .clients__info > div:not(:first-child) {
        margin-left: 3px;
    }

.clients__info-details {
    display: flex;
    align-items: center;
    padding: 6px 0 8px 0;
}

    .clients__info-details .dxeBase_MaterialCompact .dxichCellSys,
    .clients__info-details .dxeTAR.dxeBase_MaterialCompact .dxichTextCellSys {
        padding-top: 0;
        padding-bottom: 0;
    }

.clients__info-subText {
    font-size: 18px;
}

.clients__info-quizzes {
    margin-top: 15px;
}

.clients__info-data {
    flex: 1 0 437px;
}

.clients__info-logo {
    flex: 1 0 380px;
}

.clients__info-licenses {
    flex: 1 0 679px;
}

.clients__locations {
    height: 100%;
    padding-bottom: 0;
}

.licenses__popup .heading__info-text {
    text-align: center;
}

.news {
    height: 100%;
}

JS

function AdjustSize () {
        var e = SQE.GetCurrentView(); /*Return element step-1 or step-2 or step-3 */
        if (!e) return;

        if ($(e)[0].id === "step-1") {
            let height = $('.content').height() -
                $('.heading').outerHeight(true);
            height -= (parseInt($('.padding__small').css('padding-top')) + parseInt($('.padding__small').css('padding-bottom')));

            gridClientsList.SetHeight(height); *devexress mvc gridview*/
        }
        else if ($(e)[0].id === "step-2") {
            let height = $('.content').height() -
                $('.heading').outerHeight(true);

            $('#step-2').height(height);

            height = $('.clients__info-licenses').height() -
                $($('.clients__info-details')[1]).outerHeight(true);

            gridClientLic.SetHeight(height);

            height = $('.clients__locations').height() -
                $($('.clients__info-details')[2]).outerHeight(true);

            gridClientLoc.SetHeight(height); /*devexress mvc gridview*/
        }
        else if ($(e)[0].id === "step-3") {
            let height = $('.content').height() -
                $('.heading').outerHeight(true);

            $('#step-3').height(height);

            height -= (parseInt($('.padding__small').css('padding-top')) +
                parseInt($('.padding__small').css('padding-bottom'))) + $('.news__heading').height();
            gridClientNews.SetHeight(height); *devexress mvc gridview*/
        }
    }

使用Microsoft Edge调整元素大小的问题

0 个答案: