1. 首页
  2. 问答
  3. 无法摆脱X溢出（滚动条被隐藏，但我仍然可以滚动到右侧）

无法摆脱X溢出（滚动条被隐藏，但我仍然可以滚动到右侧）

2017-10-18 49 views
9

我忙于一个项目，我正在使用angular-flex-layout。据我了解，如果将fxLayoutWrap属性应用于容器，Flex容器应该换行到下一行。出于某种原因，我有一个非常小的x溢出。它曾经是更大的，然后我删除了一些fxLayoutGaps我有两个fxLayout行容器，使它更好。我不知道这是什么原因，因为我将fxLayoutWrap属性应用于父级（仪表板组件的第一行）行容器。任何想法我做错了什么？无法摆脱X溢出（滚动条被隐藏，但我仍然可以滚动到右侧）

图片pageafter的向右滚动前向右滚动

https://imgur.com/a/Ga4UR

和画面：

https://imgur.com/CWyWO4T

我的代码：

我家组件的HTML：

<mat-sidenav-container position="start" class="custom-sidenav-container"> 
    <mat-sidenav #sidenav mode="side" opened="true"> 
     Navigation 
     <ul class="sn-list"> 
      <li>      
       <mat-icon class="sn-item"> 
        <i class="material-icons">dashboard</i> 
       </mat-icon> 
       <a class="sn-item" href="#">Dashboard</a>  
      </li> 
      <li> 

       <mat-icon class="sn-item"> 
        <i class="material-icons">archive</i> 
       </mat-icon>    
       <span class="sn-item" [matMenuTriggerFor]="stockSystemMenu">Stok System</span> 

       <mat-menu [overlapTrigger]="false" #stockSystemMenu="matMenu"> 
        <button mat-menu-item> 
         <mat-icon class="sn-item"> 
          <i class="material-icons">chevron_right</i> 
         </mat-icon> 
         <span class="sn-item">Service 1</span> 
        </button> 
        <button mat-menu-item> 
         <mat-icon class="sn-item"> 
          <i class="material-icons">chevron_right</i> 
         </mat-icon> 
         <span class="sn-item">Service 2</span> 
        </button> 
        <button mat-menu-item> 
         <mat-icon class="sn-item"> 
          <i class="material-icons">chevron_right</i> 
         </mat-icon> 
         <span class="sn-item">Service 3</span> 
        </button> 
       </mat-menu> 
      </li>   
      <li> 
       <mat-icon class="sn-item"> 
        <i class="material-icons">shopping_cart</i> 
       </mat-icon> 
       <span class="sn-item" [matMenuTriggerFor]="salesMenu">Sales/Purchases</span> 
       <mat-menu [overlapTrigger]="false" #salesMenu="matMenu"> 
        <button mat-menu-item> 
         <mat-icon class="sn-item"> 
          <i class="material-icons">chevron_right</i> 
         </mat-icon> 
         <span class="sn-item">Service 1</span> 
        </button> 
        <button mat-menu-item> 
         <mat-icon class="sn-item"> 
          <i class="material-icons">chevron_right</i> 
         </mat-icon> 
         <span class="sn-item">Service 2</span> 
        </button> 
        <button mat-menu-item> 
         <mat-icon class="sn-item"> 
          <i class="material-icons">chevron_right</i> 
         </mat-icon> 
         <span class="sn-item">Service 3</span> 
        </button> 
       </mat-menu>   
      </li>  </ul> 
    </mat-sidenav> 
    <div class="sn-content"> 
    <!--<button mat-icon-button (click)="sidenav.toggle()">--> 
     <!--<mat-icon aria-label="menu">--> 
      <!--<i class="material-icons">restaurant_menu</i>--> 
     <!--</mat-icon>--> 
    <!--</button>--> 
    </div> 



    <mat-toolbar class="toolbar" color="primary"> 
     <button mat-icon-button (click)="toggleSidenav()"> 
      <mat-icon aria-label="menu"> 
       <i class="material-icons">restaurant_menu</i> 
      </mat-icon> 
     </button> 
     <span>POC Toolbar</span>    
     <span class="fill-remaining-space"></span> 
     <div class="rhs"> 
      <mat-icon class="rhs-icon fa fa-home fa-lg"></mat-icon> 
      <span class="rhs-item">Home</span> 

      <mat-icon class="rhs-icon fa fa-sign-out fa-lg" aria-hidden="true"></mat-icon> 
      <span class="rhs-item">Logout</span> 

      <mat-icon class="rhs-icon fa fa-key fa-lg"></mat-icon> 
      <span class="rhs-item">Password</span> 

      <mat-icon class="rhs-icon fa fa-sitemap fa-lg"></mat-icon> 
      <span class="rhs-item">Site map</span>   
     </div> 
    </mat-toolbar> 

<router-outlet></router-outlet> 
</mat-sidenav-container>

我的仪表板组件的HTML（这是在家庭成分路由器出口的默认路由）

<div fxLayout="row" fxLayoutAlign="start start" fxLayoutWrap> 
    <br /><br />  

    <div fxFlex> 
     <div fxLayout="column" fxLayoutGap="20px"> 
      <div fxFlex> 
       <h1>Dashboard</h1> 
      </div> 
      <div fxFlex> 
       <p>Lorem ipsum dolor sit amet, eum iuvaret delicata at. Eu postea commodo persius mei. Id est semper constituto, ignota aperiri adversarium ne vix. Id est impetus suscipit, nulla meliore epicuri id eos. <br /> Ad pro modo albucius atomorum. At mel ullum libris debitis, in vero apeirian mediocrem mei.</p> 
      </div> 
      <div fxFlex="80%"> 
       <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p> 
      </div> 
      <div fxFlex="80%"> 
       <h2>Sample Angular/Flex Column Layout</h2> 
      </div> 
     </div> 
     <div fxLayout fxLayoutGap="15px"> 
      <div fxFlex="26%">    
        <h3>Notes</h3> 
        <ul> 
         <li>we're using responsive css &amp; Angular(Angular-material &amp; Angular/flex) This allows us to show (or hide) things like the left menu and the number of columns displayed by dataTables.</li> 
         <li>The amount of "Custom" css we've used is actually very little, prefering rather to make use of the framework's built in features.</li> 
         <li>Angular reactive forms and validators should probably replace the generic php form.</li> 
         <li>No server side php is used.</li> 
        </ul> 
      </div> 
      <div fxFlex="26%"> 
       <h3>Example views</h3> 
       <ul> 
        <li><a href="#">Login Screen</a></li> 
        <li><a href="#">Home Page</a> &raquo; Ledger system &raquo; Sales ledger &raquo; Customer master files</li> 
        <li><a href="#">Customer Master Search</a></li> 
        <li><a href="#">Customer Master List</a></li> 
        <li><a href="#">detail Customer Master</a></li> 
        <li><a href="#">update Customer Master</a></li> 
        <li><a href="#">detail Account</a> - Click on suburb <i class="fa fa-info-circle"></i></li> 
        <li><a href="#">Lookup Screen(Generic)</a> - Click on suburb <i class="fa fa-search"></i></li> 
       </ul> 
      </div> 
      <div fxFlex="26%"> 
       <h3>Keyboard Shortcuts</h3> 
       <ul> 
        <li><Ctrl + b: Go back/li> 
        <li>Ctrl + i: Launch info</li> 
        <li>Ctrl + h: Launch help</li> 
        <li>Ctrl + l: Show or hide menu</li> 
        <li>Ctrl + n: Add new item</li> 
        <li>Ctrl + p: Print</li> 
        <li>Ctrl + r: reload table data</li> 
        <li>Ctrl + <em>any other</em> page specific function you ned</li> 
       </ul> 
      </div> 
     </div> 
     <div fxLayout> 
      <h2>Quick Links &amp; Favourites</h2> 
     </div> 
     <div fxLayout> 
<div fxFlex="40%"> 
    <mat-list> 
      <mat-list-item>   
       <mat-icon mat-list-icon class="fa fa-archive fa-2x"></mat-icon> 
       <a matLine href="#">Stock System</a>     
       <span matLine>Nam ultricies enim id sapien dignissim, in facilisis neque blandit, te corrumpit vituperata constituam pri.</span>     
      </mat-list-item> 
      <mat-list-item> 
       <mat-icon mat-list-icon class="fa fa-shopping-cart fa-2x"></mat-icon> 
       <a matLine href="#">Sales Purchases</a>    
       <span matLine>Donec cursus augue sit amet suscipit volutpat. Ne dignissim sadipscing pro. Munere scripta temporibus mel at.</span> 
      </mat-list-item> 
      <mat-list-item> 
       <mat-icon mat-list-icon class="fa fa-sticky-note fa-2x"></mat-icon> 
       <a matLine href="#">Stock Ordering</a>    
       <span matLine>Integer placerat libero ac dui hendrerit lacinia. Brian semper constituto, ignota aperiri adversarium ne vix.</span> 
      </mat-list-item> 
      <mat-list-item> 
       <mat-icon mat-list-icon class="fa fa-book fa-2x"></mat-icon> 
       <a matLine href="#">Ledger System</a> 
       <span matLine><a href="#">Ledger System</a> &raquo; 
       <a href="#">Sales Ledger</a>&raquo; 
       <a href="#">Customer Master Files</a>&raquo; 
       <a href="#">Customer Master</a></span> 
       <span matLine>Purus scelerisque, dapibus felis sit amet, accumsan est.</span> 
      </mat-list-item> 
      <mat-list-item> 
       <mat-icon mat-list-icon class="fa fa-money fa-2x"></mat-icon> 
       <a matLine href="#">POS Control</a>    
       <span matLine>Pellentesque id purus scelerisque, dapibus felis sit amet, accumsan est. Diceret dissentiunt ad sea, te corrumpit vituperata constituam pri.</span> 
      </mat-list-item> 
      <mat-list-item> 
       <mat-icon mat-list-icon class="fa fa-tablet fa-2x"></mat-icon> 
       <a matLine href="#">PDCU Control</a>     
       <span matLine>In vestibulum dui sed dapibus accumsan. Id est semper constituto, ignota aperiri adversarium ne vix.</span> 
      </mat-list-item> 
      </mat-list> 
     </div> 
     <div fxFlex="40%"> 
      <mat-list> 
       <mat-list-item> 
        <mat-icon mat-list-icon class="fa fa-line-chart fa-2x"></mat-icon> 
        <a matLine href="#">Price Change System</a>    
        <span matLine>Integer placerat libero ac dui hendrerit lacinia. Brian semper constituto, ignota aperiri adversarium ne vix.</span> 
       </mat-list-item> 
       <mat-list-item> 
        <mat-icon mat-list-icon class="fa fa-building fa-2x"></mat-icon> 
        <a matLine href="#">HO Coms</a>    
        <span matLine>Donec cursus augue sit amet suscipit volutpat. Ne dignissim sadipscing pro. Munere scripta temporibus mel at.</span> 
       </mat-list-item> 
       <mat-list-item> 
        <mat-icon mat-list-icon class="fa fa-plane fa-2x"></mat-icon> 
        <a matLine href="#">Auto Pilots</a>    
        <span matLine>Fusce eget velit tincidunt erat sollicitudin eleifend in in odio. Integer placerat libero ac dui hendrerit lacinia.</span> 
       </mat-list-item> 
       <mat-list-item> 
        <mat-icon mat-list-icon class="fa fa-hashtag fa-2x"></mat-icon> 
        <a matLine href="#">Additional</a>    
        <span matLine>Fusce eget velit tincidunt erat sollicitudin eleifend in in odio. In vestibulum dui sed dapibus accumsan.</span> 
       </mat-list-item> 
       <mat-list-item> 
        <mat-icon mat-list-icon class="fa fa-desktop fa-2x"></mat-icon> 
        <a matLine href="#">Workspaces</a>    
        <span matLine>matLinePellentesque id <a href="#">Customer Master</a> purus scelerisque, dapibus felis sit amet, accumsan est.</span> 
       </mat-list-item> 
       <mat-list-item> 
        <mat-icon mat-list-icon class="fa fa-cogs fa-2x"></mat-icon> 
        <a matLine href="#">System Config</a>    
        <span matLine>Pellentesque id purus scelerisque, dapibus felis sit amet, accumsan est. Diceret dissentiunt ad sea, te corrumpit vituperata constituam pri.</span> 
       </mat-list-item>     
      </mat-list> 
     </div> 
    </div> 
    <div fxLayout> 
     <div fxFlex="80%"> 
      <hr> 
      <p>Numquam honestatis neglegentur ex duo, ad vix movet tollit tantas. Cu quaeque labores debitis vis, dicta eruditi eligendi ex vim. Est mentitum 
       voluptaria te. Decore aperiri explicari cu usu, suas saepe accumsan ea usu. In vim modo accusata, ad audire delenit prodesset usu.</p> 
      <hr> 
     </div> 
    </div> 
    <div fxLayout fxLayoutGap="20px"> 
     <div fxFlex="26%" class="centered"> 
      <h2>Heading</h2> 
      <p> 
       Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, 
       porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna. 
      </p> 
      <p><button mat-raised-button><a href="#">View Details</a></button></p> 
     </div> 
     <div fxFlex="26%" class="centered"> 
      <h2>Heading</h2> 
      <p> 
       Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. 
       Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh. 
      </p> 
      <p><button mat-raised-button><a href="#">View Details</a></button></p> 
     </div> 
     <div fxFlex="26%" class="centered"> 
      <h2>Heading</h2> 
      <p> 
       tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. 
      </p> 
      <p><button mat-raised-button><a href="#">View Details</a></button></p> 
     </div> 
    </div> 
     <div fxLayout fxLayoutGap="20px"> 
     <div fxFlex="26%" class="centered"> 
      <h2>Heading</h2> 
      <p> 
       Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, 
       porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna. 
      </p> 
      <p><button mat-raised-button><a href="#">View Details</a></button></p> 
     </div> 
     <div fxFlex="26%" class="centered"> 
      <h2>Heading</h2> 
      <p> 
       Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. 
       Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh. 
      </p> 
      <p><button mat-raised-button><a href="#">View Details</a></button></p> 
     </div> 
     <div fxFlex="26%" class="centered"> 
      <h2>Heading</h2> 
      <p> 
       tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. 
      </p> 
      <p><button mat-raised-button><a href="#">View Details</a></button></p> 
     </div> 
    </div> 
    <div fxLayout> 
     <div fxFlex class="centered"> 
      <p>Copyright Trade Link &copy; 2017</p> 
     </div> 
    </div> 
</div> 
</div>

我styles.css的：

@import '[email protected]/material/prebuilt-themes/deeppurple-amber.css'; 

body { 
    font-family: 'Roboto', sans-serif; 
    max-width: 100%; 
    x-overflow: hidden; 
    max-width: 90%; 
} 

my home component's css: 


.fill-remaining-space { 
    flex: auto; 
} 

.rhs { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

.rhs-item { 
    margin-right: 20px; 
} 

.rhs-icon { 
    margin-right: 5px; 
    display: inline-flex; 
    vertical-align: middle; 
} 


/*.custom-sidenav-container { 
position: inherit; 
display: inherit; 
transform: inherit; 
}*/ 


mat-sidenav { 
// width: 300px; 
    margin-top: 65px; 
    border: 1px solid rgba(0, 0, 0, 0.5); 
    position: fixed; 
    left: 0; 
} 

.sn-list { 
    list-style: none; 
} 

.sn-list li { 
    cursor: pointer;  
    margin-bottom: 10%; 
} 

.sn-item { 
    display: inline-flex; 
    vertical-align: middle; 
} 

.toolbar { 
    position: fixed; 
    left: 0; 
    top: 0; 
    right: 0; 
}

我的仪表板组件的CSS：

.centered { 
    text-align: center; 
}

来源

2017-10-18 user2094257

+0

@VXp我设定的X-溢出到隐藏。但是，仍然可以向右滚动。查看一张图片顶部工具栏旁边的空白 – user2094257

+0

@VXp你的意思是你没有看到滚动条？你不会像我将x-overflow设置为隐藏。 – user2094257

+0

@VXp它呢。但不是在我的计算器上的问题 – user2094257

回答

5

有没有这样的CSS属性为x-overflow，你可能想overflow-x代替。

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x

您需要在设置为“隐藏”以禁用滚动。您应该查找比它应该更宽的元素（导致滚动的元素）。在它的父类中，你应该有overflow-x：hidden，或者你应该防止该元素变得更宽。

来源

2017-10-21 19:01:26

+0

不，那不是。我仍然可以滚动到右侧 – user2094257

+0

您可以将其设置在身体上，尽可能我看到，这可能是错误的容器，但很难说！我需要一个工作示例来检查它在检查器中...我猜只是正确的主要内容框过度浮动，你必须隐藏该容器上的溢出！否则只是身体不会显示滚动条，但内部div可以这样做... – ToTaTaRi

+0

是的，摆脱这个问题将有所帮助，可以只是HTML + CSS，没有角度需要。 –

1

试试这个演示

html { 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    overflow-x: hidden; 
 
} 
 
body { 
 
    margin: 0 auto; 
 
    overflow-x: hidden; 
 
    width: 950px; 
 
} 
 
.full { 
 
    background: red; 
 
    color: white; 
 
} 
 
.full, 
 
.f_right { 
 
    margin-right: -3000px !important; 
 
    padding-right: 3000px !important; 
 
} 
 
.full, 
 
.f_left { 
 
    margin-left: -3000px !important; 
 
    padding-left: 3000px !important; 
 
}
<div> 
 
    <div class="full"> 
 
    abc 
 
    </div> 
 
</div>

来源

2017-10-24 12:41:31

0

试试这个，X-溢出不存在：

body { 
 
    font-family: 'Roboto', sans-serif; 
 
    max-width: 100%; 
 
    overflow-x: hidden; 
 
    max-width: 90%; 
 
}

来源

2017-10-26 14:23:15

相关问题

 相关问题