Question

我正在使用Accordion Collapse bootstrap组件在页面中显示两个折叠项目。默认情况下折叠第一个折叠项目，第二个折叠项目在其中包含一个显示pdf文档的iframe。我需要第二个可折叠项目以适应屏幕的左侧高度。我尝试使用弹性框实现它，但似乎崩溃事件和弹性框有问题。我将不胜感激任何帮助。

这是我的小提琴示例：

Example

下图描绘了不良行为：

<vp-leftpanel>
   <div class="panel-group" id="accordion" role="tablist" aria-
      multiselectable="true">
      <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
        <h4 class="panel-title">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                {{panelHeadingData}}
            </a>
        </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
        <div class="panel-body">
            <div *ngIf="candidate.hasEmailSourceData">

                .....

            </div>                
        </div>
    </div>
</div>
<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
        <div class="panel-title">
            <div class="row">
                <div class="col-md-6">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        {{panelHeadingResume}}
                    </a>
                </div>
                <div class="col-md-6">
                    <select class="form-control" (change)='loadDocument($event.target.value)'>
                        <option [value]="d.id" *ngFor="let d of candidate.candidateDocuments">{{d.friendlyName}}</option>
                    </select>
                </div>
            </div>

        </div>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo">
        <div class="panel-body">
            <div *ngIf="candidate.candidateDocuments.length > 0" class="apply-flex">
                <iframe [src]="documentSelectedPathSafe" type="application/pdf" ></iframe>
            </div>
        </div>
    </div>
 </div>
  </div>
  </vp-leftpanel>

Answer 1

使用Flexbox启用它有点复杂。

在这个fiddle demo我创建/应用了下面的类来完成它，完全动态，认为这将打破手风琴的显示/隐藏

.fullvh {
  height: 100vh;
}
.flex-box-col {
  display: flex;
  flex-direction: column;
}
.flex-grow {
  flex-grow: 1;
}
.pos-relative {
  position: relative;
}
/* as it didn't work adding "flex-box-col flex-grow" to this
   elements class, I added it using its ID #collapseTwo */
#collapseTwo {         
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.pos-absolute {
  position: absolute;
  height: 100%;
  width: 100%;
}

此fiddle demo中不会破坏手风琴的替代方法是为iframe提供组合视口单元vh和CSS calc()的高度。即使固定高度160px在某种程度上是已知的，它仍然比前一个样本更不动态。

#collapseTwo iframe {
  height: calc(100vh - 160px);
  width: 100%;
}

此外，可以在第一个示例中修复脚本，或者在第二个示例中添加脚本计算，以获得准确的高度，或者交换到基于Flexbox的Bootstrap 4。

如果没有一些调整，交换到Bootstrap 4可能无法解决问题，因此在开始迁移之前要对其进行彻底测试。

Answer 2

只需将height=100%替换为max-height: 200px;。

强制Iframe进入折叠引导程序组件以适应屏幕

2 个答案: