zoukankan      html  css  js  c++  java
  • sharepoint母版页固定宽度与纵向滚动条靠右边(修改版)

    之前文章对母版页固定宽度,但在添加list item时页面布局出现问题,后来找到方法修改这个bug,修改之后如下:


    页面固定宽度为 990px, 整体居中,将纵向滚动条,移到浏览器的最右边
    加css与js:

    <style type="text/css">
    #s4-bodyContainer
    {
    width
    : 990px !important;
    margin-left
    :auto;
    margin-right
    :auto;
    }

    /* Aligns the Top Bars */
    .ms-cui-ribbonTopBars
    {
    width
    : 990px !important;
    margin-left
    :auto;
    margin-right
    :auto;
    }

    /* Turns off the border on the bottom of the tabs */
    .ms-cui-ribbonTopBars > div
    {
    border-bottom
    :1px solid transparent !important;
    }
    </style>

    //当列表项多,超出指定宽度时后,背景为空白,所以根据列表项长度,将页面内容范围根据内容扩大,
    <script type='text/javascript'>

    $(document).ready(
    function(){
    //Elements with the potential to be too wide.
      elements = $(".ms-bodyareacell > div > *, .main-container > div > *");
      leftPanelWidth
    = $("#s4-leftpanel").width();

      //For each Elements
      $(elements).each(function(){
        //if it's wider than the side width
        if($(this).width() > ($("#s4-bodyContainer").width() - leftPanelWidth ))
        {
          //Calculate the new width taking the left nav into account
          newWidth = leftPanelWidth + $(this).width();
          //Set the width!
          $("#s4-bodyContainer").attr("style",""+newWidth +"px!important")
        }
      });
    });
    </script>

    最后:

    找到ID="s4-workspace",添加:
    <div ID="s4-workspace" class="s4-nosetwidth">

    另外,详细CSS说明与效果可参考

  • 相关阅读:
    LC.225. Implement Stack using Queues(using two queues)
    LC.232. Implement Queue using Stacks(use two stacks)
    sort numbers with two stacks(many duplicates)
    LC.154. Find Minimum in Rotated Sorted Array II
    LC.81. Search in Rotated Sorted Array II
    LC.35.Search Insert Position
    前后端分离:(一)
    Redis基本使用(一)
    GIT篇章(二)
    GIT篇章(一)
  • 原文地址:https://www.cnblogs.com/xzwen/p/2419270.html
Copyright © 2011-2022 走看看