fix(demo): bootstrap 4 demos card text formatting incorrectly. (#1656)

* Fix Bootstrap 4 and card text #1637 Moved card class to a surrounding div so text formats correctly with Bootstrap 4 * Fix Bootstrap 4 and card text #1637 Moved card class to a surrounding div so text formats correctly with Bootstrap 4
valor-software · Feb 28, 2017 · d8f42df · d8f42df
1 parent 2b3fb8d
commit d8f42df
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/demo/src/app/components/+datepicker/demos/datepicker-demo.component.html b/demo/src/app/components/+datepicker/demos/datepicker-demo.component.html
@@ -12,7 +12,9 @@
 </style>
 
 <div>
-  <pre class="card card-block card-header">Selected date is: <em *ngIf="dt">{{ getDate() | date:'fullDate'}}</em></pre>
+  <div class="card">
+    <pre class="card-block card-header">Selected date is: <em *ngIf="dt">{{ getDate() | date:'fullDate'}}</em></pre>
+  </div>
   <h4>Inline</h4>
   <div style="display:inline-block; min-height:290px;">
     <datepicker [(ngModel)]="dt" [minDate]="minDate" [showWeeks]="true" [dateDisabled]="dateDisabled"></datepicker>

diff --git a/demo/src/app/components/+rating/demos/basic/basic.html b/demo/src/app/components/+rating/demos/basic/basic.html
@@ -1,3 +1,4 @@
 <rating [(ngModel)]="rate" [max]="max" [readonly]="isReadonly"></rating>
-
-<pre class="card card-block card-header" style="margin:15px 0;">Rate: <b>{{rate}}</b> </pre>
+<div class="card">
+    <pre class="card-block card-header" style="margin:15px 0;">Rate: <b>{{rate}}</b> </pre>
+</div>
diff --git a/demo/src/app/components/+rating/demos/dynamic/dynamic.html b/demo/src/app/components/+rating/demos/dynamic/dynamic.html
@@ -4,8 +4,9 @@
 <span class="label"
       [ngClass]="{'label-warning': percent<30, 'label-info': percent>=30 && percent<70, 'label-success': percent>=70}"
       [ngStyle]="{display: (overStar && !isReadonly) ? 'inline' : 'none'}">{{percent}}%</span>
-
-<pre class="card card-block card-header" style="margin:15px 0;">Rate: <b>{{rate}}</b>;  Readonly is: <i>{{isReadonly}}</i>;  Hovering over: <b>{{overStar || "none"}}</b></pre>
+<div class="card">
+    <pre class="card-block card-header" style="margin:15px 0;">Rate: <b>{{rate}}</b>;  Readonly is: <i>{{isReadonly}}</i>;  Hovering over: <b>{{overStar || "none"}}</b></pre>
+</div>
 
 <button type="button" class="btn btn-sm btn-danger" (click)="rate = 0"
         [disabled]="isReadonly">Clear