diff --git a/libs/barista-components/highlight/src/highlight.ts b/libs/barista-components/highlight/src/highlight.ts
index 85d29f410c..dd3e672b57 100644
--- a/libs/barista-components/highlight/src/highlight.ts
+++ b/libs/barista-components/highlight/src/highlight.ts
@@ -30,6 +30,7 @@ import {
   Optional,
   ViewChild,
   ViewEncapsulation,
+  AfterContentInit,
 } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { take } from 'rxjs/operators';
@@ -77,7 +78,12 @@ function escapeRegExp(text: string): string {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DtHighlight
-  implements AfterContentChecked, AfterViewInit, OnChanges, OnDestroy {
+  implements
+    AfterContentChecked,
+    AfterContentInit,
+    AfterViewInit,
+    OnChanges,
+    OnDestroy {
   /**
    * The caseSensitive input can be set to search for case sensitive occurrences.
    * Per default the search is case insensitive.
@@ -146,6 +152,16 @@ export class DtHighlight
     });
   }
 
+  ngAfterContentInit(): void {
+    // Initially we need to run and force highlight once
+    // to move the text content value into the visible span
+    // Otherwise some layouts will be tripped up, as the visible span
+    // would be 0x0 pixels large.
+    const textContent = this._getTextContent();
+    this._textContent = textContent;
+    this._highlight(true);
+  }
+
   ngOnDestroy(): void {
     this._isInViewportSubscription.unsubscribe();
   }
@@ -164,14 +180,13 @@ export class DtHighlight
   }
 
   /** The highlight function triggers the highlighting process if we are in a browser context. */
-  private _highlight(): void {
+  private _highlight(force: boolean = false): void {
     // Make sure to only update the highlight if it is in the viewport.
     // This is needed because the highlight component can possibly be
     // rendered a lot if it is used for example in a big data table or autocomplete.
-    if (!this._isInViewport || !this._document) {
+    if (!force && (!this._isInViewport || !this._document)) {
       return;
     }
-
     // As we create the highlight nodes with browser native functions we do not depend on Angular's CD.
     // So we can run this code outside the zone to boost performance.
     this._zone.runOutsideAngular(() => {
@@ -181,7 +196,6 @@ export class DtHighlight
 
       // Remove the old nodes.
       removeNodeChildren(transformedEl);
-
       if (textContent !== null && Boolean(term && term.length)) {
         const flags = this._caseSensitive ? 'gm' : 'gmi';
         const regExp = new RegExp(`(${escapeRegExp(term)})`, flags);
diff --git a/libs/examples/src/autocomplete/autocomplete-default-example/autocomplete-default-example.ts b/libs/examples/src/autocomplete/autocomplete-default-example/autocomplete-default-example.ts
index d74c0ab601..362d3d3c2b 100644
--- a/libs/examples/src/autocomplete/autocomplete-default-example/autocomplete-default-example.ts
+++ b/libs/examples/src/autocomplete/autocomplete-default-example/autocomplete-default-example.ts
@@ -22,5 +22,20 @@ import { Component } from '@angular/core';
 })
 export class DtExampleAutocompleteDefault {
   value: string;
-  options: string[] = ['One', 'Two', 'Three'];
+  options: string[] = [
+    'first item',
+    'second item',
+    'third item',
+    'fourth item',
+    'fifth item',
+    'sixth item',
+    'seventh item',
+    'eighth item',
+    'ninth item',
+    'tenth item',
+    'eleventh item',
+    'twelfth item',
+    'some very long item',
+    'some even much longer item',
+  ];
 }
diff --git a/libs/examples/src/filter-field/filter-field-default-example/filter-field-default-example.ts b/libs/examples/src/filter-field/filter-field-default-example/filter-field-default-example.ts
index 8f2b63c2a0..9acd28a90e 100644
--- a/libs/examples/src/filter-field/filter-field-default-example/filter-field-default-example.ts
+++ b/libs/examples/src/filter-field/filter-field-default-example/filter-field-default-example.ts
@@ -25,30 +25,24 @@ export class DtExampleFilterFieldDefault {
   private DATA = {
     autocomplete: [
       {
-        name: 'AUT',
-        autocomplete: [{ name: 'Linz' }, { name: 'Vienna' }, { name: 'Graz' }],
-      },
-      {
-        name: 'USA',
+        name: 'items',
         autocomplete: [
-          { name: 'San Francisco' },
-          { name: 'Los Angeles' },
-          { name: 'New York' },
-          { name: 'Custom', suggestions: [], validators: [] },
+          { name: 'first item' },
+          { name: 'second item' },
+          { name: 'third item' },
+          { name: 'fourth item' },
+          { name: 'fifth item' },
+          { name: 'sixth item' },
+          { name: 'seventh item' },
+          { name: 'eighth item' },
+          { name: 'ninth item' },
+          { name: 'tenth item' },
+          { name: 'eleventh item' },
+          { name: 'twelfth item' },
+          { name: 'some very long item' },
+          { name: 'some even much longer item' },
         ],
       },
-      {
-        name: 'Requests per minute',
-        range: {
-          operators: {
-            range: true,
-            equal: true,
-            greaterThanEqual: true,
-            lessThanEqual: true,
-          },
-          unit: 's',
-        },
-      },
     ],
   };