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说明与效果可参考

  • 相关阅读:
    install kde in ubuntu
    Upgrade to or Install Cinnamon 2.4 in Ubuntu
    enjoy dollar vs cash dollar
    opencv linux
    高频交易都有哪些著名的算法
    wpf
    opencv mat flags含义
    gphoto2 canon eos450d
    gphoto2
    task optimization之superglue分析
  • 原文地址:https://www.cnblogs.com/xzwen/p/2419270.html
Copyright © 2011-2022 走看看