save

src/app/shared/chat/group-messages/group-contacts/group-contacts.page.html

@@ -1,7 +1,7 @@
 <ion-header  class="ion-no-border">
   <ion-toolbar class="header-toolbar">
-    <div class="main-header">
-      <div class="title-content">
+    <div class="main-header width-100">
+      <div class="title-content width-100">
         <div class="back-icon">
           <ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
         </div>
@@ -41,7 +41,7 @@
       </ion-list>
     </div>
 
-    <ion-virtual-scroll [items]="users | filter:textSearch: 'name'" approxItemHeight="70px" [headerFn]="separateLetter">
+    <ion-virtual-scroll [items]="users" approxItemHeight="70px" [headerFn]="separateLetter">
   
       <div class="item-divider" *virtualHeader="let header">
         <ion-label>{{header}}</ion-label>
@@ -49,8 +49,8 @@
 
       <div *virtualItem="let user" class="item-checkbox">
         <ion-checkbox (ionChange)="selectedContact(user)" color="primary"></ion-checkbox>
-         <p>{{user.name}}</p>
-        <ion-icon name="ellipse"></ion-icon>
+        <ion-label>{{user.name}}</ion-label>
+        <div class="icon"><ion-icon name="ellipse"></ion-icon></div>
       </div>
       
     </ion-virtual-scroll>

src/app/shared/chat/group-messages/group-contacts/group-contacts.page.scss

@@ -3,11 +3,8 @@
     --opacity: 1;
  
    .main-header{
-     width: 100%; /* 400px */
      height: 100%;
      font-family: Roboto;
-     border-top-left-radius: 25px;
-     border-top-right-radius: 25px;
      background-color: #fff;
      overflow:hidden;
      padding: 30px 20px 0px 20px;
@@ -26,7 +23,6 @@
        padding-left: 20px;
      }
        .title-content{
-         width: 360px;
          margin: 0px auto;
          overflow: auto;
          padding: 0 !important;
@@ -62,28 +58,28 @@
      border-radius: 5px;
    }
    .search ion-searchbar{
-     /* border: 1px solid green; */
      width: 100%;
      margin: 0 !important;
      padding: 0 !important;
      --border-radius: 5px;
      --box-shadow: none;
-     overflow: auto;
+     overflow: hidden;
      --icon-color:#0d89d1;
    }
- 
  }
+
  ion-content{
    --background:transparent;
  }
+
  .main-content{
    width: 100%;
    height: 100%;
    font-family: Roboto;
    margin: 0 auto;
    background-color: #fff;
-   overflow:auto;
    padding: 0 0 0 0;
+   overflow:auto;
 
     .members-label{
       margin: 10px 20px 10px 20px !important;
@@ -111,8 +107,6 @@
        display: flex;
        margin: 10px 20px 10px 20px !important;
        overflow: auto;
-       align-items: center;
- 
      }
  
      .item-checkbox ion-checkbox, .members-checkbox ion-checkbox{
@@ -121,20 +115,16 @@
          float: left;
      }
  
-     .item-checkbox p, .members-checkbox p{
-         display: block;
-         margin: 0 !important;
-         width: 330px;
+     .item-checkbox ion-label, .members-checkbox p{
          padding-left: 10px;
          font-size: 15px;
          color: #0d89d1;
          float: left;
+         flex-grow: 1;
      }
-     .item-checkbox ion-icon, .members-checkbox ion-icon{
+     .icon, .members-checkbox ion-icon{
        font-size: 10px;
-       float: left;
        color:#99e47b;
-       margin-left: 10px;
      }
    }