Question

具有基于此的DNN / Evoq皮肤：https://startbootstrap.com/template-overviews/simple-sidebar/

在DNN / Evoq 9之前，控制杆位于顶部;没问题。现在角色栏位于左侧，登录时会出现问题。边栏不会移动，因为它的位置设置为固定。

所以我尝试添加一些JS代码来向这个侧边栏添加一个类，以便将项目向左移动80px;这不起作用。

有什么想法吗？感谢..

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 300px;
    width: 0;
    height: 100%;
    margin-left: -300px;
    overflow-y: auto;
    background: #000;
    background: #415A8A;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    border-right: 2px solid #c88d0c;
}

#sidebar-wrapper.sideadmin {
    left: 380px;
}


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        // When persona bar is active, move page right 80px
        $(function () {
            if ($('form').hasClass('personalBarContainer')) $('#sidebar-wrapper').addClass('sideadmin');
        });
    });
</script>

<html>
<body id="Body" style="margin-left: 80px;">
    <form method="post" action="/" onsubmit="javascript:return WebForm_OnSubmit();" id="Form" enctype="multipart/form-data">
        <div id="ctl15_PersonaBarPanel" class="personalBarContainer">
            .....
        </div>

        <div id="sidebar-wrapper" class="mm-wrapper">
            .....
        </div>
    </form>
</body>
</html>

Answer 1

我认为你的问题在于PersonaBar是在Iframe中加载的。使用下面的代码，您可以操纵该iframe。它为该iframe添加了一个额外的类，并向右移动了80px。它还将页面的其余部分设置回浏览器的左侧。也许这会帮助你开始。

<style>
    .sidebar-wrapper {
        border: 2px solid red;
        position: absolute;
        left: 80px !important;
    }
    .extraBodyClass {
        left: 0px !important;
        margin-left: 0px !important;
    }
</style>

<script type="text/javascript">
    $(document).ready(function () {
        $("#personaBar-iframe").addClass('sidebar-wrapper');
        $("body").addClass('extraBodyClass');
    });
</script>

当角色栏处于活动状态时，JS不会将侧栏移动到左侧

1 个答案: