Angular components and CSS : child component too big for its parent

Question

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 ?

I think you only need to add this css for your table : ***overflow: scroll;*** — br.julien, Feb 20 '18 at 09:10

score 4 · Accepted Answer · answered Feb 20 '18 at 09:25

    <!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>

Angular components and CSS : child component too big for its parent

1 Answers1