html - 如何从父组件 CSS 将宽度应用于特定子 ngx-bootstrap 模态
问题描述
我在父组件 CSS 文件中使用以下 CSS 代码来更改子模式的宽度(我正在使用 NGX 引导模式)。
父 CSS:
::ng-deep .modal-dialog {
min-width: 1000px;
}
父 HTML:
<!-- Modal -->
<div class="modal-header" style="padding-bottom: 0px">
<h2 class="modal-title" id="exampleModalLabel">Modification History</h2>
<button type="button" class="close" data-dismiss="modal" (click)="bsModalRef.hide()" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<app-mod-logs [searchInput]="searchInput"></app-mod-logs>
</div>
子 HTML:
<div class="modal-dialog filter">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">
Advanced Filter
</h5>
<button type="button"
class="close"
data-dismiss="modal"
(click)="bsModalRef.hide()"
aria-label="Close">
<span aria-hidden="true">
×
</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-4 py-3 px-lg-1 border bg-light column1">
<div class="heading">
<b>Available Objects</b>
</div>
<ul class="list-group container1">
<li class="list-group-item list-group-item-action"
[ngStyle]="{width: objectWidth}"
[class.active]="active === i"
(click)='loadKeyItems(object.KeyObject); activated(i);'
*ngFor="let object of availableObjects; let i = index;">
{{object.SourceObject}}
</li>
</ul>
</div>
<div class="col-md-4 py-3 px-lg-1 border bg-light column2">
<div class="heading">
<b>Available Items</b>
</div>
<ul class="list-group container2">
<ngx-spinner name="boxSpinner"
[fullScreen]="false"
type="ball-spin-clockwise"
size="small">
</ngx-spinner>
<li [ngStyle]="{width: availableWidth}"
class="list-group-item list-group-item-action"
(dblclick)='pushToSelected(keyItem.Id)'
(mousedown)="disableTextSelection($event)"
*ngFor="let keyItem of KeyItems">
{{keyItem.Caption}}
</li>
</ul>
</div>
<div class="col-md-4 py-3 px-lg-1 border bg-light column3">
<div class="heading">
<b>Selected Items</b>
</div>
<ul class="list-group container3">
<li [ngStyle]="{width: selectedWidth}"
class="list-group-item list-group-item-action"
(dblclick)='pushToAvailable(select.Id)'
(mousedown)="disableTextSelection($event)"
*ngFor='let select of selectedItemArray'>
{{select.Caption}}
</li>
</ul>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-secondary"
(click)='clear()'
[disabled]='buttonDisabled'>
Clear
</button>
<button type="button"
class="btn btn-secondary"
[disabled]='buttonDisabled'>
Apply Filters
</button>
</div>
</div>
但是这段代码将 1000px 的宽度应用于所有的孩子。我希望在特定的模式上使用它。由于 modal-dialog 类是 modals 的父引导类,我无法从子级访问它,所以我在父级中编写了 CSS。我试图添加我那个特定孩子的 css 类,但它没有按预期工作。(见下面的代码)。(PS - 我没有在子 CSS 中应用任何与此相关的 CSS)。
父修改CSS:
::ng-deep .modal-dialog .filter {
min-width: 1000px;
}
解决方案
我为该特定模式使用了 modal-lg 类,因此我在父组件中使用了以下 CSS。
::ng-deep .modal-lg {
min-width: 1000px !important;
}
推荐阅读
- c# - 使用 C# 以编程方式编辑大型 Word 文档
- c# - 自定义 msiexec 进度条?
- javascript - gapi.auth2 已使用不同的选项进行初始化。考虑调用 gapi.auth2.getAuthInstance() 而不是 gapi.auth2.init()
- junit - 如何在 Java <= 8 中强制执行模块边界
- python-3.x - 替换python数据框中的重复条目并根据其他列保留第一个值
- angular - 无法在我的 NX 工作区中使用 @angular-service-worker
- javascript - Route.post() 需要一个回调函数,但得到一个 [object String]
- plsql - 在plsql中将数据类型CHAR转换为数据类型boolean
- android - 自定义范围内没有出现 - 织物
- java - ARCore:垂直平面上的随机对象旋转