最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】ReactJS的AdminLTE的内容显示区域的高度没有撑满屏幕

AdminLTE crifan 2913浏览 0评论

已经基本弄好了一个AdminLTE的ReactJS的版本了,

但是现在有个小问题,跳转到Main页面后,内容显示区域的高度没有撑满整个屏幕:

而之前了解过,是adminlte的app.js中,计算显示内容的高度的

此处该app.js也已经生成打包到了vendor.bundle.js中了,也执行过了。

不知道为何高度不对。

之前高度是正常的。

再随便点击一下菜单,展开后,高度就自动正常了:

看到React中的wrapper的高度就只有442

不过navi导航栏高度倒是高一点:579

但是都没有撑满屏幕高度。

点开左边导航栏,还是这个高度:

类似的,点击其他菜单,比如 系统管理,结果整个高度就自动计算更新了:

所以去查查,点击一级菜单时,触发了哪些js的计算

Adminlte 高度

关于.content-wrapper高度的问题 · Issue #1473 · almasaeed2010/AdminLTE

通过研究adminlte的代码,看到了:

里面很多地方,去调用

$.AdminLTE.layout.fix()

去计算和调整高度,包括sidebar导航栏的高度。

而之所以能找到这个地方,是因为:

从菜单的点击中,找到,只要点击了:

treeview-menu

好像就可以触发高度更新。

所以去搜了:

treeview-menu

找到了:

里面调用的:

          //Fix the layout in case the sidebar stretches over the height of the window
          _this.layout.fix();

就是前面说的:

$.AdminLTE.layout.fix()

去调整高度的。

【总结】

所以去把调整高度的代码,加到对应的,生效的地方:

rse_web/src/pages/main/main.js

import $ from ‘jquery’;
  componentDidMount(){
    console.log(`Main componentDidMount`);
    // console.log($);
    // console.log($.AdminLTE);
    // console.log($.AdminLTE.layout);
    // Note: fixbug for first load main page main content not full height
    if ($ && $.AdminLTE && $.AdminLTE.layout) {
      $.AdminLTE.layout.fix();      
    }
  }

注意:

此处要确保页面已经加载完毕,否则之前放到navigation-menu.js等地方中,$.AdminLTE.layout都是没有定义,无法使用:$.AdminLTE.layout.fix()

然后进入Main页面后,调用了fix后,页面高度就正常了:

转载请注明:在路上 » 【已解决】ReactJS的AdminLTE的内容显示区域的高度没有撑满屏幕

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
83 queries in 0.216 seconds, using 22.22MB memory