ปรับช่อง search เวลาย่อ และตำแหน่งตรงกัน

trainee
1 parent 008c44b8
Showing 2 changed files with 34 additions and 23 deletions Show diff stats
src/app/dashboard/dashboard.component.html
src/app/dashboard/dashboard.component.ts
@@ -5,38 +5,39 @@
 <div class="portlet-body">
   <div class="tabbable-custom nav-justified">
     <ul class="nav nav-tabs">
-      <li class="active sbold font">
-        <a href="#tab1" data-toggle="tab" aria-expanded="true">Active</a>
+      <li class=" sbold font">
+        <a href="#tab1" data-toggle="tab" aria-expanded="false">Active</a>
       </li>
-      <li class="sbold">
-        <a href="#tab2" data-toggle="tab" aria-expanded="false">page 2</a>
+      <li class="active sbold">
+        <a href="#tab2" data-toggle="tab" aria-expanded="true">page 2</a>
       </li>
       <li class="sbold">
         <a href="#tab3" data-toggle="tab" aria-expanded="false">page 3</a>
       </li>
     </ul>
     <div class="tab-content">
-      <div class="panel tab-pane active" id="tab1">
+      <div class="panel tab-pane" id="tab1">
         <div class="caption">
           <h1 class="icon-bubble font-green-sharp">
             <span class="caption-subject font-green-sharp sbold font"> Active</span>
-            <div class="input-icon right" style="margin-left: 820px; margin-top: -20px;" >
-              <i class="icon-magnifier">
-              </i>
-              <input 
-              type="text" 
-              placeholder="Search.." 
-              class="form-control sbold font"    
-              [(ngModel)]="FilterSearch">
-            </div>
+              <!-- <input type="text" placeholder="Search.." class="form-control sbold font"> -->
           </h1>
+
+          <div class="input-group" style="float: right; margin-top: 11px;">
+              <div class="input-icon right">
+                  <i class="icon-magnifier">
+                  </i>
+                  <input type="text" placeholder="Search.." class="form-control sbold font" [(ngModel)]="FilterSearch">
+                </div>
+          </div>
+
           <hr>
           <br>
         </div>
         <div class="panel-body">
           <div class="row">
-              <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12" *ngFor="let item of resultData">
-            <!-- <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12" *ngFor="let item of resultData | filter:FilterSearch: 'team'"> เรียกได้แค่อย่างเดียว -->
+              <!-- <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12" *ngFor="let item of resultData"> -->
+            <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12" *ngFor="let item of resultData | filter:FilterSearch: 'team'"> 
               <a class="dashboard-stat dashboard-stat-v2 red "
                   href="{{item.link}}" 
                   target="_blank"
@@ -77,12 +78,16 @@
         <div class="caption">
           <h1 class="icon-bubble font-grey-gallery">
             <span class="caption-subject font-grey-gallery sbold font"> On Hold</span>
-            <div class="input-icon right" style="margin-left: 820px; margin-top: -20px;" >
-              <i class="icon-magnifier">
-              </i>
-              <input type="text" placeholder="Search.." class="form-control sbold font">
-            </div>
           </h1>
+
+          <div class="input-group" style="float: right; margin-top: 11px;">
+              <div class="input-icon right">
+                  <i class="icon-magnifier">
+                  </i>
+                  <input type="text" placeholder="Search.." class="form-control sbold font" [(ngModel)]="FilterSearch">
+                </div>
+          </div>
+
           <hr>
           <br>
         </div>
@@ -122,7 +127,10 @@
         </div>
       </div>
-      <div class="panel tab-pane" id="tab2">page 2</div>
+      <div class="panel tab-pane active" id="tab2">
+          <input #box type="text" placeholder="Search.." class="form-control sbold font" (keyup)="onKey($event)"><br><br>
+          <p>{{box.value}}</p>
+      </div>
       <div class="panel tab-pane" id="tab3">page 3</div>
     </div>  
   </div>
@@ -11,7 +11,10 @@ import { async } from &#39;rxjs/internal/scheduler/async&#39;;
 })
 export class DashboardComponent implements OnInit {
-  FilterSearch = '';
+  Search = '';
+  
+  
+
   getColorDay(days){