当显示组件报告详细信息时它显示在菜单下方?
When display component reportdetails it display below menu?
问题
第二个组件 - table html 显示在菜单下方,但我需要它显示在菜单右侧。
我在 angular 7 上工作,我有两个组件
第一个组件是包含在左侧菜单中的报告组件,它是 app.component
上的路由器出口
第二个组件是 table html 存在于 reportdetails 组件上并在单击 link 菜单时生成。
第一个组件报告包含菜单
<p>report-category works!</p>
<table *ngFor="let rep of reportlist">
<tr>
<td>{{rep.reportCategory}}</td>
</tr>
<tr *ngFor="let subrep of subreportlist">
<div *ngIf="subrep.reportCategoryID === rep.reportCategoryID">
<a href="/reportdetails?id={{subrep.reportID}}">
<i class="{{subrep.IconClass}}"></i>
<span class="title">{{subrep.reportName}}</span>
</a>
</div>
</tr>
</table>
第二个是包含显示在菜单下方的 table 的报告组件,这是错误的
我需要的正确是显示菜单右侧,如下图
reportdetails works!
<p>reportdetails works!</p>
<div>
<table class="table table-hover" >
<thead>
<tr>
<th>regulation</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let rep of reportdetailslist">
<td>{{rep.regulation}}</td>
</tr>
</tbody>
</table>
<p>reportdetails works!</p>
<div>
<table class="table table-hover" >
<thead>
<tr>
<th>regulation</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let rep of reportdetailslist">
<td>{{rep.regulation}}</td>
</tr>
</tbody>
</table>
</div>
fiddle link 如下:
https://jsfiddle.net/015asjzv/1/
我的尝试
table{
float:right;
width:auto;
}
最后更新
参见 link 此处
http://www.mediafire.com/view/wnptffqakjglkre/correctdata.png/file
它从左到右移动了 table 但我需要它在菜单旁边的顶部所以我做什么
所以我现在可以看到你有 2 个表被 divs 包裹,这就是为什么它们显示为块(divs 有显示:块;默认情况下)
在这 2
周围再添加一个 div
<div class='wrapper'>
// You have to make sure only this divs are direct child of wrapper.
// div table 1 || you can just remove the div and add table directly
// div table 2 || as divs with no class dont add any value
</div>
// css
.wrapper {
display: flex;
}
祝你好运。
您可以了解有关 display flex 的更多信息here
注意:这也可能是父组件布局的问题,但修复方法是一样的。
问题
第二个组件 - table html 显示在菜单下方,但我需要它显示在菜单右侧。
我在 angular 7 上工作,我有两个组件
第一个组件是包含在左侧菜单中的报告组件,它是 app.component
上的路由器出口第二个组件是 table html 存在于 reportdetails 组件上并在单击 link 菜单时生成。
第一个组件报告包含菜单
<p>report-category works!</p>
<table *ngFor="let rep of reportlist">
<tr>
<td>{{rep.reportCategory}}</td>
</tr>
<tr *ngFor="let subrep of subreportlist">
<div *ngIf="subrep.reportCategoryID === rep.reportCategoryID">
<a href="/reportdetails?id={{subrep.reportID}}">
<i class="{{subrep.IconClass}}"></i>
<span class="title">{{subrep.reportName}}</span>
</a>
</div>
</tr>
</table>
第二个是包含显示在菜单下方的 table 的报告组件,这是错误的
我需要的正确是显示菜单右侧,如下图
reportdetails works!
<p>reportdetails works!</p>
<div>
<table class="table table-hover" >
<thead>
<tr>
<th>regulation</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let rep of reportdetailslist">
<td>{{rep.regulation}}</td>
</tr>
</tbody>
</table>
<p>reportdetails works!</p>
<div>
<table class="table table-hover" >
<thead>
<tr>
<th>regulation</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let rep of reportdetailslist">
<td>{{rep.regulation}}</td>
</tr>
</tbody>
</table>
</div>
fiddle link 如下: https://jsfiddle.net/015asjzv/1/
我的尝试
table{
float:right;
width:auto;
}
最后更新 参见 link 此处
http://www.mediafire.com/view/wnptffqakjglkre/correctdata.png/file
它从左到右移动了 table 但我需要它在菜单旁边的顶部所以我做什么
所以我现在可以看到你有 2 个表被 divs 包裹,这就是为什么它们显示为块(divs 有显示:块;默认情况下)
在这 2
周围再添加一个 div<div class='wrapper'>
// You have to make sure only this divs are direct child of wrapper.
// div table 1 || you can just remove the div and add table directly
// div table 2 || as divs with no class dont add any value
</div>
// css
.wrapper {
display: flex;
}
祝你好运。
您可以了解有关 display flex 的更多信息here
注意:这也可能是父组件布局的问题,但修复方法是一样的。