Add show and hide whether checkbox is active or not

src/app/pages/chat/group-messages/group-messages.page.scss

@@ -146,9 +146,17 @@
     margin-top: 4px;
   }
 
-   ion-col .type-message{
+  .type-message{
+    display: flex;
     border: 1px solid #ebebeb;
     border-radius: 25px;
     padding-left: 15px;
+    align-items: center;
+    overflow: auto;
+
+    ion-textarea{
+      margin: 0 !important;
+      align-self: center;
+    }
   }
  }

src/app/pages/chat/messages/messages.page.scss

@@ -151,10 +151,18 @@
     margin-top: 4px;
   }
 
-   ion-col .type-message{
+   .type-message{
+    display: flex;
     border: 1px solid #ebebeb;
     border-radius: 25px;
     padding-left: 15px;
+    align-items: center;
+    overflow: auto;
+
+    ion-textarea{
+      margin: 0 !important;
+      align-self: center;
+    }
   }
  }
 
@@ -169,4 +177,5 @@
     float: left;
     color:#99e47b;
     padding-left: 10px;
- }
+ }
+ 

src/app/pages/chat/messages/messages.page.ts

@@ -11,6 +11,8 @@ import { ContactsPage } from '../new-group/contacts/contacts.page';
 })
 export class MessagesPage implements OnInit {
 
+  message = '';
+  
   constructor(
     public popoverController: PopoverController,
     private modalController: ModalController,

src/app/pages/chat/new-group/new-group.page.html

@@ -19,12 +19,12 @@
     <div class="item-container">
       <ion-input placeholder="Título"></ion-input>
     </div>
-    <ion-item class="ion-no-padding item-container-no-border" lines="none">
-      <ion-checkbox color="primary"></ion-checkbox>
+    <div class="item-container-no-border">
+      <ion-checkbox (ionChange)="_ionChange($event)" color="primary"></ion-checkbox>
       <ion-label>Grupo Ultra-secreto</ion-label>
-    </ion-item>
+    </div>
 
-    <div class="container-div">
+    <div *ngIf="showDuration" class="container-div">
       <div class="ion-item-class-2">
         <div class="ion-icon-class">
           <ion-icon slot="start" src="assets/images/icons-duration.svg"></ion-icon>

src/app/pages/chat/new-group/new-group.page.scss

@@ -107,21 +107,19 @@ ion-content{
         border-radius: 5px;
         padding-left: 10px;
       }
+
       .item-container-no-border{
+        display: flex;
         width: 360px;
-        margin: 15px auto;
+        margin: 25px auto;
         border-radius: 5px;
-        padding-left: 10px;
-      }
-      .item-container-no-border ion-checkbox{
-          margin-top: 10px;
+        align-items: center;
       }
 
       .item-container-no-border ion-label{
           padding-left: 10px;
           font-size: 12px;
           color: #000;
-          margin-top: 0 !important;
       }
   }
 

src/app/pages/chat/new-group/new-group.page.ts

@@ -9,6 +9,7 @@ import { ContactsPage } from './contacts/contacts.page';
 })
 export class NewGroupPage implements OnInit {
   showLoader: boolean;
+  showDuration: boolean;
 
   constructor(
     private modalController: ModalController, 
@@ -18,6 +19,9 @@ export class NewGroupPage implements OnInit {
 
   ngOnInit() {
 
+  }
+  _ionChange(event){
+    this.showDuration = event.detail.checked;
   }
   close(){
     this.modalController.dismiss();