When display component reportdetails it display below menu?

HTML & CSS
1

I work on angular 7 and I have two components

first component is report component contain on left side menu and it is be router outlet on app.component

second component is table html exist on reportdetails component

but problem is second component - table html display below menu but i need it display on right of menu

so How to do that

first component report contain menu

report-category works!

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

second report component contain table that display below this is wrong

correct i need to display right of menu as picture below

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>


![screenerror|690x387](upload://dDXcrGDSJU8p747HQXUf34y0rqB.png)
2

can any one help me please

3

Hi ahmedsaazizba, sooner or later somebody that could give you a hand comes by. :slight_smile:

In the meantime you could try give more relevant info that would help a knowledgeable member see what you need.

Also if you could provide a link to what you are working on it would be so much easier to debug.

4

i do as following :

table{
float:right;
width:auto;
}

it moved table from left to right but i need it top beside menu so what i do

5

When you want a float be adjacent a non float, the float needs to come before in code so it can let the later coming elements go around it. Could that be the cause here?

See Mozilla Dev for more info:

6

so what i do

7

Depends. The code you’ve posted so far isn’t complete for the issue to show so it’s hard to tell anything.

Could you give a link to what you have so far?

1 Like
8

I need only css and i will test it
i need css class move html table from bottom to top right as link below

9

You can’t float an element alongside a block element unless the float is first in html source. You would have to float the first table to the left and the second table to the right.

These days flexbox is a better alternative and you could do something like this.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
.table-wrap{display:flex}
.reportlist{background:blue;width:300px;}
table.table-hover{flex:1 0 0%;background:orange;margin:0 0 0 2rem;}

</style>
</head>

<body>
<div class="table-wrap">
  <table class="reportlist" *ngFor="let rep of reportlist">
    <tr>
      <td>{{rep.reportCategory}}</td>
    </tr>
    <tr *ngFor="let subrep of subreportlist">
      <td>
        <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></td>
    </tr>
  </table>
  <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>
</body>
</html>

If the above was not what you meant then please post code in the format that I have done above so that it can be copied and run in a browser easily. The more you help us the easier it will be to help you :slight_smile:

2 Likes
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.