How to create labels(5) with in a box with side border

Dear friends,

i want to ctreate clickable label (box contain 5 set of labels) like below:

each boxes should be clickable. On top of this i have a heading row contains logo and home buttons. So all these boxes should be in the center of the screen (middle row)

pls help me to create with ionic 4.

Thanks and Regards,
Syed Abdul Rahim

can you show me your code

HTMl cod is:

<ion-content>

  <div class="full-screen" >
    <div style="height: 10%;">
        <ion-row class="headrow">
            <ion-col text-left>
                <ion-icon src="../../assets/imgs/left_arrow.svg" style="vertical-align: -webkit-baseline-middle; height: 50px; width: 50px;" (click)="back_clicked()"></ion-icon>
              <img src="../../assets/imgs/nav_logo.png" height="40px" style="vertical-align: -webkit-baseline-middle">
              <ion-label style="padding:15px; font-size: 40px; color: #ffffff; vertical-align: -webkit-baseline-middle"><span>IETM</span> <span style="font-size: 10px;">v1.0.0</span> </ion-label>
            </ion-col>
            
            <ion-col text-right>
                <ion-icon src="../../assets/imgs/home.svg" style="vertical-align: -webkit-baseline-middle; height: 40px; width: 40px; padding-left: 5px; color: #808c9c" (click)="back_clicked()"></ion-icon>
              <img src="../../assets/imgs/prof_pic.png" height="40px" style="padding:2px; vertical-align: -webkit-baseline-middle">
            </ion-col>
          </ion-row>
          
    </div>
    <div>
      <ion-row style="padding:10px; color: #ffffff">Home >> ShipName</ion-row>
          <!--<ion-row style="color:#ffffff; padding-left: 10px;"> Show 10 Entries</ion-row>
           <ion-select [(ngModel)]="gender">
              <ion-option value="f">Female</ion-option>
              <ion-option value="m">Male</ion-option>
            </ion-select> -->
            <label style="color:#ffffff; padding-left: 10px">Show &nbsp;</label> 
            <select>
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
              <option>6</option>
              <option>7</option>
              <option>8</option>
              <option>9</option>
              <option>10</option>
            </select>
            <label style="color:#ffffff;">&nbsp; Entries</label> 
    </div>
    <div class="centerrow">
        <div > 
          
          <br>
          
          <div class="container">
            <div class="leftcol">Model</div>
            <div class="centercol">Variant</div>
            <div class="centercol">Part Number</div>
            <div class="centercol">Serial Number</div>
            <div class="rightcol">Registration</div>
          </div>
          <br>
          <div class="container" (click)="gotohome()">
              <div class="leftcol">MBT-LC</div>
              <div class="centercol">MBT-LC</div>
              <div class="centercol">MBT0001</div>
              <div class="centercol">0001</div>
              <div class="rightcol">UAR-01-WT1</div>
            </div>
            <br>
          <div class="container">
              <div class="leftcol">MBT-LC</div>
              <div class="centercol">MBT-LC</div>
              <div class="centercol">MBT0001</div>
              <div class="centercol">0002</div>
              <div class="rightcol">UAR-01-WT2</div>
            </div>
            <br>
          <div class="container">
              <div class="leftcol">MBT-LC</div>
              <div class="centercol">MBT-LC</div>
              <div class="centercol">MBT0001</div>
              <div class="centercol">0003</div>
              <div class="rightcol">UAR-01-WT3</div>
            </div>
            <br>
          <div class="container">
              <div class="leftcol">MBT-LC</div>
              <div class="centercol">MBT-LC</div>
              <div class="centercol">MBT0001</div>
              <div class="centercol">0004</div>
              <div class="rightcol">UAR-01-WT4</div>
            </div>
        </div>
        <div style="text-align:right">
            <ion-button >1</ion-button>
            <ion-button >2</ion-button>
            <ion-button >3</ion-button>
            <ion-button >4</ion-button>
            <ion-button >5</ion-button>
        </div>

    </div>
    
</div>

.scss code is:

.

full-screen {
    height: 100% !important;
    width: 100% !important;
}

.headrow{
    height: 100%;
    padding-left: 20px;
    //padding-right: 55px;
    background: #2C405A;
    color: white;
}

.centerrow{
    // height: 100%;
    // width: 60%;
    // padding-left: 20%;
    text-align: center;
    //align-content: center;

    display: flex;
    //align-items: center;
    justify-content: center;
    height: 70%;
    flex-wrap: wrap;
    div{
        width: 90%;
        
    }
}

.round-textbox{
    //--background: #f3f3f3;
    background-color: #2C405A;
    border-radius: 10px;
    padding: 2px 10px !important;
    margin-bottom: 10px;
    //border: 1px solid #efe8e8;
    text-align: center;
    color: aliceblue;
    font-size: 15px;
    height: 50px;
    width: 80% !important;
}

.container {
    display: flex;
    align-items: center;
    // align-items: center;
    // justify-content: center;
    justify-content: space-between;
    width: 100%;
  }

  .leftcol{
    border-bottom-color: 3px solid blue; 
    background-color:#ffffff; 
      height: 30px;
      text-align: center;
    border-bottom-left-radius: 10px; 
    border-top-left-radius: 10px; 
  }
  .centercol{
    border-bottom-color: 3px solid blue; 
    background-color:#ffffff;
    height: 30px;
    vertical-align: -webkit-baseline-middle;
    text-align:center;
  }
  .rightcol{
    border-bottom-color: 3px solid blue; 
    background-color:#ffffff; 
    height: 30px;
    text-align: center;
      border-bottom-right-radius: 10px;
      border-top-right-radius: 10px;
  }

  ion-content {
    --background: #ccc url("../../assets/imgs/bg.png") no-repeat center center / cover;   
}

it’s simple, you just have to work a little with the css of your page without much modification, add a class similar to this one so that the label element stands out from the row element when you click on a particular element and then add a click event:

.classButton{
    z-index: 999;
    position: relative;
    background-color: transparent;
}

That’s all, although I recommend that instead of having only div there with the names (MBT-LC) you change them to a button so that in each cell you create a new button and so you can add a click event and implement what I tell you previously

Try this Example i hope its worke for you

here is your html

<ion-content>

  <div class="full-screen" >
    <div style="height: 10%;">
        <ion-row class="headrow">
            <ion-col text-left>
                <ion-icon src="../../assets/imgs/left_arrow.svg" style="vertical-align: -webkit-baseline-middle; height: 50px; width: 50px;" (click)="back_clicked()"></ion-icon>
              <img src="../../assets/imgs/nav_logo.png" height="40px" style="vertical-align: -webkit-baseline-middle">
              <ion-label style="padding:15px; font-size: 40px; color: #ffffff; vertical-align: -webkit-baseline-middle"><span>IETM</span> <span style="font-size: 10px;">v1.0.0</span> </ion-label>
            </ion-col>
            
            <ion-col text-right>
                <ion-icon src="../../assets/imgs/home.svg" style="vertical-align: -webkit-baseline-middle; height: 40px; width: 40px; padding-left: 5px; color: #808c9c" (click)="back_clicked()"></ion-icon>
              <img src="../../assets/imgs/prof_pic.png" height="40px" style="padding:2px; vertical-align: -webkit-baseline-middle">
            </ion-col>
          </ion-row>
          
    </div>
    <div>
      <ion-row style="padding:10px; color: #ffffff">Home >> ShipName</ion-row>
          <!--<ion-row style="color:#ffffff; padding-left: 10px;"> Show 10 Entries</ion-row>
           <ion-select [(ngModel)]="gender">
              <ion-option value="f">Female</ion-option>
              <ion-option value="m">Male</ion-option>
            </ion-select> -->
            <label style="color:#ffffff; padding-left: 10px">Show &nbsp;</label> 
            <select>
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
              <option>6</option>
              <option>7</option>
              <option>8</option>
              <option>9</option>
              <option>10</option>
            </select>
            <label style="color:#ffffff;">&nbsp; Entries</label> 
    </div>
    <div class="centerrow">
        <div class="tablecell"> 

          <ion-grid>
            <ion-row>
              <ion-col>Model</ion-col>
              <ion-col>Variant</ion-col>
              <ion-col>Part Number</ion-col>
              <ion-col>Serial Number</ion-col>
              <ion-col>Registration</ion-col>
            </ion-row>
            <ion-row (click)="gotohome()">
              <ion-col>MBT-LC</ion-col>
              <ion-col>MBT-LC</ion-col>
              <ion-col>MBT0001</ion-col>
              <ion-col>0001</ion-col>
              <ion-col>UAR-01-WT1</ion-col>
            </ion-row>

            <ion-row>
              <ion-col>MBT-LC</ion-col>
              <ion-col>MBT-LC</ion-col>
              <ion-col>MBT0001</ion-col>
              <ion-col>0001</ion-col>
              <ion-col>UAR-01-WT1</ion-col>
            </ion-row>

            <ion-row>
              <ion-col>MBT-LC</ion-col>
              <ion-col>MBT-LC</ion-col>
              <ion-col>MBT0001</ion-col>
              <ion-col>0001</ion-col>
              <ion-col>UAR-01-WT1</ion-col>
            </ion-row>

            <ion-row>
              <ion-col>MBT-LC</ion-col>
              <ion-col>MBT-LC</ion-col>
              <ion-col>MBT0001</ion-col>
              <ion-col>0001</ion-col>
              <ion-col>UAR-01-WT1</ion-col>
            </ion-row>
           
          </ion-grid>
          
       
        </div>
        

    </div>

    <div style="text-align:right">
      <ion-button >1</ion-button>
      <ion-button >2</ion-button>
      <ion-button >3</ion-button>
      <ion-button >4</ion-button>
      <ion-button >5</ion-button>
  </div>
    
</div>

</ion-content>

your scss

.full-screen {
    height: 100% !important;
    width: 100% !important;
}

.headrow{
    height: 100%;
    padding-left: 20px;
    //padding-right: 55px;
    background: #2C405A;
    color: white;
}


.centerrow{
    text-align: center;
    display: table;
    height: 70%;
    width: 100%;
    div.tablecell{
        width: 100%;
        display: table-cell;
        vertical-align: middle;
    }
}

.round-textbox{
    //--background: #f3f3f3;
    background-color: #2C405A;
    border-radius: 10px;
    padding: 2px 10px !important;
    margin-bottom: 10px;
    //border: 1px solid #efe8e8;
    text-align: center;
    color: aliceblue;
    font-size: 15px;
    height: 50px;
    width: 80% !important;
}

.container {
    width: 100%;
    display: block;
  }



  ion-content {
    --background: #ccc url("../../assets/imgs/bg.png") no-repeat center center / cover;   
}

Thanks Mr.cristsaavedra.

Dear Mr.Ansari,

Greetings! thanks a lot.

If you could solve your problem, try to mark the help that most served as a solution to your problem so that it can be of better help for other developers who face this problem.

Mr.Ansari,

How can i create that divider between to text, like right side border of each text.?

try this example

<p class="rightsideBorder">
        <span>example 1</span>
        <span>example 2</span>
        <span>example 3</span>
        <span>example 4</span>
      </p>

scss here

.rightsideBorder{
        span{
            border-right: 1px solid #000;
            margin-right: 10px;
            padding-right: 5px;
        }
        span:last-child{
            border-right: 0px solid #000;
            margin-right: 0px;
        }
    }