Long Label overlapping Input

Please try to add this styles to your styles.scss file:

.md-form label {
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: red;
}

It might be also a good idea to use new mdbInput directive and new validation methods:

https://mdbootstrap.com/docs/angular/forms/validation/

mdbInputDirective is deprecated and will be removed in the future versions

@Arkadiusz Idzikowski

With your code added, the label now jumps into the next line earlier

If I add a few more numbers the "..." appears

If I remove a few numbers the "..." leaves a space between itself and the label?

In conlusion:

• The label still overlaps the input/jumps into the next line instead of the last few characters being replaced by the "..."
• The display of the "..." leaves a space

Regards, Lukas

(I'am sorry that my spelling isn't 100% right)

@Arkadiusz Idzikowski

Part of the component.html

 <div class="row" *ngFor="let code of module.customcodes;let i=index">
  <div class="col-5">
    <div class="md-form mt-0">
      <input mdbInputDirective type="text" name="codekey{{i}}" [(ngModel)]="code.key" id="codekey{{i}}" class="form-control"
        [validateSuccess]="false" required>
      <label for="codekey{{i}}" class="">{{ Y.L('Key') }}</label>
    </div>
  </div>
  <div class="col-5">
    <div class="md-form mt-0">
      <input mdbInput type="text" name="codvalue{{i}}" [(ngModel)]="code.value" id="codvalue{{i}}" class="form-control"
        [validateSuccess]="false" required>
      <label for="codvalue{{i}}" class="">Value for {{ code.key }}</label>
    </div>
  </div>
  <div class="col-2">
    <div class="md-form mt-2">
        <button class="btn btn-primary btn-sm" color="primary" (click)="module.customcodes.splice(i,1)">
        <i class="fa fa-trash white-icon"></i></button>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-6">
    <button class="btn btn-primary" (click)="module.customcodes.push({'key':'new key', 'value':''})">
      <i class="fa fa-plus"></i>
    </button>
  </div>
</div>

component.ts

import { Component, OnInit, Input } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { AmwsessionService } from '../../../../../mycore/services/amwsession.service';
import { isNullOrUndefined } from 'util';
import { LanguageserviceService } from 'app/mycore/services/languageservice.service';
import { ModuleRecorder } from 'app/mycore/interfacesmysetupinterface';

@Component({
  selector: 'example-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss']
})
export class ExampleComponent implements OnInit {
  @Input() module: ModuleRecorder;

  constructor(private route: ActivatedRoute,
    public Y: LanguageserviceService, public amsession: AmwsessionService,
    private router: Router) { }

  ngOnInit() {

    if (isNullOrUndefined(this.module.customcodes)) {
      this.module.customcodes = [];
    }
  }

}

Browser: Firefox Version: 68.0.2 (64-Bit)

Dear @Lukas Koch

As a workaround try to change your styles.scss to this:

.md-form label {
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  color: red;
  white-space: nowrap;
}

The white-space property specifies how white-space inside an element is handled. This should help in your example, where "Value for" is a fixed content

Best Regards, Bartosz.