Fix issue ashish-chopra#49 reading-label container overlaps elements below it (with example) [bug]

Author: anabrierson

projects/ngx-gauge/src/gauge/gauge.html

@@ -1,12 +1,11 @@
-<div class="reading-block" #reading [style.fontSize]="size * 0.22 + 'px'" [style.lineHeight]="size + 'px'">
+<div class="reading-block" #reading [style.fontSize]="size * 0.22 + 'px'">
   <!-- This block can not be indented correctly, because line breaks cause layout spacing, related problem: https://pt.stackoverflow.com/q/276760/2998 -->
   <u class="reading-affix" [ngSwitch]="_prependChild != null"><ng-content select="ngx-gauge-prepend" *ngSwitchCase="true"></ng-content><ng-container *ngSwitchCase="false">{{prepend}}</ng-container></u><ng-container [ngSwitch]="_valueDisplayChild != null"><ng-content *ngSwitchCase="true" select="ngx-gauge-value"></ng-content><ng-container *ngSwitchCase="false">{{value | number}}</ng-container></ng-container><u class="reading-affix" [ngSwitch]="_appendChild != null"><ng-content select="ngx-gauge-append" *ngSwitchCase="true"></ng-content><ng-container *ngSwitchCase="false">{{append}}</ng-container></u>
 </div>
-<div class="reading-label" 
-     [style.fontSize]="size / 13 + 'px'" 
-     [style.lineHeight]="(5 * size / 13) + size + 'px'" 
+<div class="reading-label" #rLabel
+     [style.fontSize]="size / 13 + 'px'"
      [ngSwitch]="_labelChild != null">
   <ng-content select="ngx-gauge-label" *ngSwitchCase="true"></ng-content>
   <ng-container *ngSwitchCase="false">{{label}}</ng-container>
 </div>
-<canvas #canvas></canvas>
+<canvas #canvas></canvas>

projects/ngx-gauge/src/gauge/gauge.ts

@@ -55,6 +55,8 @@ export type NgxGaugeCap = 'round' | 'butt';
 export class NgxGauge implements AfterViewInit, OnChanges, OnDestroy {
 
     @ViewChild('canvas', { static: true }) _canvas: ElementRef;
+    @ViewChild('rLabel', {static: true}) _label: ElementRef;
+    @ViewChild('reading', {static: true}) _reading: ElementRef;
 
     @ContentChild(NgxGaugeLabel, {static: false}) _labelChild: NgxGaugeLabel;
     @ContentChild(NgxGaugePrepend, {static: false}) _prependChild: NgxGaugePrepend;
@@ -139,7 +141,7 @@ export class NgxGauge implements AfterViewInit, OnChanges, OnDestroy {
                     ov = changes['value'].previousValue;
                 }
                 this._update(nv, ov);
-            } 
+            }
             if (isCanvasPropertyChanged) {
                 this._destroy();
                 this._init();
@@ -152,6 +154,10 @@ export class NgxGauge implements AfterViewInit, OnChanges, OnDestroy {
         this._renderer.setElementStyle(this._elementRef.nativeElement, 'height', cssUnit(this._size));
         this._canvas.nativeElement.width = this.size;
         this._canvas.nativeElement.height = this.size;
+        this._renderer.setElementStyle(this._label.nativeElement,
+          'transform', 'translateY(' + (this.size / 3 * 2 - this.size / 13 / 4) + 'px)');
+        this._renderer.setElementStyle(this._reading.nativeElement,
+          'transform', 'translateY(' + (this.size / 2 - this.size * 0.22 / 2) + 'px)');
     }
 
     ngAfterViewInit() {
@@ -308,4 +314,4 @@ export class NgxGauge implements AfterViewInit, OnChanges, OnDestroy {
         this._create(nv, ov);
     }
 
-}
+}

src/app/app.component.html

@@ -17,7 +17,7 @@ <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Document
     <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
   </li>
 </ul>
-<ngx-gauge [value]="currentValue"></ngx-gauge> 
+<ngx-gauge [value]="currentValue" [label]="'Label'"></ngx-gauge>
 <button (click)="changeValue()">change</button>
 <input type="checkbox" #checkbox>
 <router-outlet></router-outlet>