I'm working on an app generated by Jhipster, in Angular 4.3.
I've several components contained in a parent component, and I've problems for the display. Actually it looks like this :
The code looks like this in the parent component :
<h1> My title </h1>
<div class="row">
<div class="col-md-8">
<jhi-child-comp1></jhi-child-comp1>
</div>
<div class="col-md-4">
<jhi-child-comp2></jhi-child-comp2>
<jhi-child-comp3></jhi-child-comp3>
</div>
</div>
The child-comp1 contains a table which is too bigger for my screen, the classes of the table are :
<div class="table-responsive" *ngIf="users">
<table class="table table-hover">
...
</table>
</div>
I don't know how to add a scroll bar at the parent component if the child are too bigger.
I've searched solution, but I've only found solutions like this : Limit the child component size from the parent
But I would like a scroll bar on the parent component if the child component takes too much space if it's possible.
Does anyone have an idea ?
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
background-color: lightblue;
height: 30px;
overflow-y: scroll;
}
</style>
</head>
<body>
<h1>The overflow-x Property</h1>
<h2>overflow-x: scroll:</h2>
<div class="ex1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
The overflow-x property specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element, when it overflows at the left and right edges
</div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.