- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我正忙于使用 angular-flex-layout 的元素。据我所知,如果将 fxLayoutWrap 属性应用于容器,则 flex 容器应换行到下一行。出于某种原因,我的 x 溢出非常小。它曾经更大,然后我删除了两个 fxLayout 行容器上的一些 fxLayoutGaps,这使它变得更好。我不知道这可能是什么原因,因为我将 fxLayoutWrap 属性应用于父(仪表板组件的第一行)行容器。知道我做错了什么吗?
向右滚动后的页面图片
和向右滚动前的图片:
我的代码:
我的主页组件的 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>
我的 dashboard 组件的 html(这是 home 组件中 router-outlet 的默认路由)
<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 & Angular(Angular-material & 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> » Ledger system » Sales ledger » 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 & 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> »
<a href="#">Sales Ledger</a>»
<a href="#">Customer Master Files</a>»
<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 © 2017</p>
</div>
</div>
</div>
</div>
我的样式.css:
@import '~@angular/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;
}
最佳答案
没有 x-overflow
这样的 CSS 属性,您可能需要 overflow-x
来代替。
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x
您需要将其设置为“隐藏”以禁用滚动。你应该寻找比它应该更宽的元素(导致滚动的元素)。在它的父级上,你应该有 overflow-x: hidden,或者你应该阻止那个元素变宽。
关于css - 无法摆脱 x-overflow(滚动条被隐藏,但我仍然可以向右滚动),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46808728/
我想在不使用函数 m 中的循环的情况下加快计算并获得结果.可重现的例子: N require(rbenchmark) > benchmark(m(r, N), + m1(r, N
关闭。这个问题是opinion-based 。目前不接受答案。 想要改进这个问题吗?更新问题,以便 editing this post 可以用事实和引文来回答它。 . 已关闭 9 年前。 Improv
我正在尝试使用 Cython。我使用 setup.py 并构建,而不是让 pyximport 执行此操作。但是,每次我导入模块时,似乎都会调用 pyximport 。 Pyximport 构建失败,一
考虑两个案例 case1 和 case2 以及两个方法 method1 和 method2。假设方法 1 解决案例 1,方法 2 解决案例 2。现在,我有一个程序可能以 case1 或 case2 结
我怎样才能摆脱 CA2202 警告(CA2202:Microsoft.Usage:对象“compressedStream”可以在方法“Compression.InternalDecompress(by
我在这段代码中得到 NP_NULL_ON_SOME_PATH_FROM_RETURN_VALUE final Integer id = Ints.tryParse(idString); FailRea
我的 eclipse 中有 Java WebService 代码。我用过@WebService @Webmethod、@XmlElements、@XmlType、@XmlAccessorType 现在
在我正在编写的基于 Sprite 的游戏中,二维网格中的每个字段都包含一堆 Sprite 。大多数情况下,最重要的是最重要的。 在游戏的规则模块中,我有很多这样的代码: public boolean
在 Java 中,我必须设置一个带有值的 POJO 类。然而,要决定使用哪个 setter 函数,我必须取决于 if 条件。我当前的代码如下所示: // Code written in a funct
关闭。这个问题需要details or clarity .它目前不接受答案。 想改进这个问题吗? 通过 editing this post 添加细节并澄清问题. 关闭去年。 Improve this
所以我最近接触到了C++中所谓“令人厌恶的函数类型”的怪诞之处(据我所知源自这篇论文: https://www.open-std.org/jtc1/sc22/wg21/docs/papers/2015
我正在研究配置 QDialog。它有几个类别(General、Appearance 等),当用户点击它们时会加载它们。每个类别都有自己的页面。这些页面本身就是独立的类(每个都有自己的 ui、cpp 和
我一直在开发 Vb.Net应用程序最近,我试图使它尽可能轻量级(即,使二进制文件尽可能小)。 我已经完成了所有琐碎的工作,但是在使用 ILDasm 浏览二进制文件时,我注意到它有一个 My names
An easy way to get rid of *everything* generated by SBT?要求一个简单的方法来清理从 sbt 生成的所有文件,但没有找到。我会要求一个艰难的。我如
如何摆脱默认的 ANTLR 识别错误? 我想用我自己的错误类而不是 ANTLR 的错误来写另一条消息。 我的意思是是否有可能扩展某些 ANTLR 错误类以显示我自己的消息? 更清楚地说,我不想在控制台
使用 woocommerce 的订单面板时,我注意到使用搜索执行了不必要的查询。这是对 Woocommerce 文件(/includes/data-stores/class-wc-order-data
我有一个包含列的大数据框,例如: ID, time, OS, IP 该数据帧的每一行对应一个条目。在某些 ID 的数据框中,存在多个条目(行)。我想摆脱那些多行(显然,对于相同的 ID,其他属性会有所
当我运行测试时,我得到如下代码: objc[8845]: GC: forcing GC OFF because OBJC_DISABLE_GC is set 它还会污染我运行的子流程的输出。我如何摆脱
在 ie8 上,状态栏下方有一个绿色进度指示器,可能表示基于某处某个静态长度值的下载进度。不幸的是,由于“现代”动态 JavaScript、ajax 调用等的性质,该指示器经常会变得困惑,并且栏保持在
我现在正在学习 MVVM,但我了解的东西很少(这里有很多但很少..): 是否每个模型都可能(通过 VM)暴露给 View 有一个 VM? 例如,如果我有一个 Contact 和 Address 实体并
我是一名优秀的程序员,十分优秀!