diff --git a/projects/common/element-components/button.component.ts b/projects/common/element-components/button.component.ts
index b02d161c30243eae711da91c734ff69bf962212a..5570d72c33e70fd92a8390880672bc5dab017121 100644
--- a/projects/common/element-components/button.component.ts
+++ b/projects/common/element-components/button.component.ts
@@ -6,8 +6,8 @@ import { ButtonElement } from '../unit';
   selector: 'app-button',
   template: `
     <button mat-button
-            [style.width.px]="elementModel.width"
-            [style.height.px]="elementModel.height"
+            [style.width.%]="100"
+            [style.height.%]="100"
             [style.background-color]="elementModel.backgroundColor"
             [style.color]="elementModel.fontColor"
             [style.font-family]="elementModel.font"
diff --git a/projects/common/element-components/checkbox.component.ts b/projects/common/element-components/checkbox.component.ts
index 4354ce87689d72870bef9948cc1f59c29630b3a9..1554408cd29fbf51f1c019fe41e91334cfa1ac9b 100644
--- a/projects/common/element-components/checkbox.component.ts
+++ b/projects/common/element-components/checkbox.component.ts
@@ -7,8 +7,8 @@ import { FormElementComponent } from '../form-element-component.directive';
   template: `
     <mat-checkbox #checkbox class="example-margin"
                   [formControl]="elementFormControl"
-                  [style.width.px]="elementModel.width"
-                  [style.height.px]="elementModel.height"
+                  [style.width.%]="100"
+                  [style.height.%]="100"
                   [style.background-color]="elementModel.backgroundColor"
                   [style.color]="elementModel.fontColor"
                   [style.font-family]="elementModel.font"
diff --git a/projects/common/element-components/dropdown.component.ts b/projects/common/element-components/dropdown.component.ts
index 349db5e9ecd12b3cc112fe9dac428b74b1b6902c..7774b74a059a64a4847c4ebd32d83ed6dcd41c07 100644
--- a/projects/common/element-components/dropdown.component.ts
+++ b/projects/common/element-components/dropdown.component.ts
@@ -6,8 +6,8 @@ import { FormElementComponent } from '../form-element-component.directive';
   selector: 'app-dropdown',
   template: `
       <mat-form-field appearance="fill"
-                      [style.width.px]="elementModel.width"
-                      [style.height.px]="elementModel.height"
+                      [style.width.%]="100"
+                      [style.height.%]="100"
                       [style.background-color]="elementModel.backgroundColor">
           <mat-label [style.color]="elementModel.fontColor"
                      [style.font-family]="elementModel.font"
diff --git a/projects/common/element-components/number-field.component.ts b/projects/common/element-components/number-field.component.ts
index d9199ac18d4e4ebe15503a07c36ce25af68e800a..a5f5cebd1f59ab3a169c9d9cf54caeaa0dfa1d19 100644
--- a/projects/common/element-components/number-field.component.ts
+++ b/projects/common/element-components/number-field.component.ts
@@ -5,8 +5,8 @@ import { FormElementComponent } from '../form-element-component.directive';
 @Component({
   selector: 'app-number-field',
   template: `
-    <mat-form-field [style.width.px]="elementModel.width"
-                    [style.height.px]="elementModel.height"
+    <mat-form-field [style.width.%]="100"
+                    [style.height.%]="100"
                     [style.background-color]="elementModel.backgroundColor"
                     [style.color]="elementModel.fontColor"
                     [style.font-family]="elementModel.font"
diff --git a/projects/common/element-components/radio-button-group.component.ts b/projects/common/element-components/radio-button-group.component.ts
index 43c9ef789a3aa80a53d701d1f53c5da0b78a609d..db537c866495270ead100246c042e6db741fe2dd 100644
--- a/projects/common/element-components/radio-button-group.component.ts
+++ b/projects/common/element-components/radio-button-group.component.ts
@@ -5,8 +5,8 @@ import { FormElementComponent } from '../form-element-component.directive';
 @Component({
   selector: 'app-radio-button-group',
   template: `
-      <div [style.width.px]="elementModel.width"
-           [style.height.px]="elementModel.height"
+      <div [style.width.%]="100"
+           [style.height.%]="100"
            [style.background-color]="elementModel.backgroundColor"
            [style.color]="elementModel.fontColor"
            [style.font-family]="elementModel.font"
diff --git a/projects/common/element-components/text-area.component.ts b/projects/common/element-components/text-area.component.ts
index 95b7b9e54e2f0b35d86834f3abdd501088b6075a..08c0d7ed61bb12e5484c47eb23f86b64f8c935b3 100644
--- a/projects/common/element-components/text-area.component.ts
+++ b/projects/common/element-components/text-area.component.ts
@@ -5,20 +5,20 @@ import { FormElementComponent } from '../form-element-component.directive';
 @Component({
   selector: 'app-text-area',
   template: `
-      <mat-form-field [style.width.px]="elementModel.width"
-                      [style.height.px]="elementModel.height"
-                      [style.background-color]="elementModel.backgroundColor"
-                      [style.color]="elementModel.fontColor"
-                      [style.font-family]="elementModel.font"
-                      [style.font-size.px]="elementModel.fontSize"
-                      [style.font-weight]="elementModel.bold ? 'bold' : ''"
-                      [style.font-style]="elementModel.italic ? 'italic' : ''"
-                      [style.text-decoration]="elementModel.underline ? 'underline' : ''">
-      <textarea matInput [formControl]="elementFormControl"
-                placeholder="{{elementModel.label}}"
-                [style.resize]="elementModel.resizeEnabled ? 'both' : 'none'">
-        </textarea>
-      </mat-form-field>
+    <mat-form-field [style.width.%]="100"
+                    [style.height.%]="100"
+                    [style.background-color]="elementModel.backgroundColor"
+                    [style.color]="elementModel.fontColor"
+                    [style.font-family]="elementModel.font"
+                    [style.font-size.px]="elementModel.fontSize"
+                    [style.font-weight]="elementModel.bold ? 'bold' : ''"
+                    [style.font-style]="elementModel.italic ? 'italic' : ''"
+                    [style.text-decoration]="elementModel.underline ? 'underline' : ''">
+    <textarea matInput [formControl]="elementFormControl"
+              placeholder="{{elementModel.label}}"
+              [style.resize]="elementModel.resizeEnabled ? 'both' : 'none'">
+      </textarea>
+    </mat-form-field>
   `
 })
 export class TextAreaComponent extends FormElementComponent {
diff --git a/projects/common/element-components/text-field.component.ts b/projects/common/element-components/text-field.component.ts
index 5fc6eee6bbcb10468bf0f5664a007c769f6afa37..8ddf562191679a60455da39959fe406e020e7e60 100644
--- a/projects/common/element-components/text-field.component.ts
+++ b/projects/common/element-components/text-field.component.ts
@@ -5,8 +5,8 @@ import { FormElementComponent } from '../form-element-component.directive';
 @Component({
   selector: 'app-text-field',
   template: `
-    <mat-form-field [style.width.px]="elementModel.width"
-                    [style.height.px]="elementModel.height"
+    <mat-form-field [style.width.%]="100"
+                    [style.height.%]="100"
                     [style.background-color]="elementModel.backgroundColor"
                     [style.color]="elementModel.fontColor"
                     [style.font-family]="elementModel.font"
diff --git a/projects/common/element-components/text.component.ts b/projects/common/element-components/text.component.ts
index d39283edd4ba781895c76d3412ea829b00661543..510198361672a9636e8a5a5779210e0bdf94f28e 100644
--- a/projects/common/element-components/text.component.ts
+++ b/projects/common/element-components/text.component.ts
@@ -5,18 +5,18 @@ import { ElementComponent } from '../element-component.directive';
 @Component({
   selector: 'app-text',
   template: `
-      <div [style.width.px]="elementModel.width"
-           [style.height.px]="elementModel.height"
-           [style.background-color]="elementModel.backgroundColor"
-           [style.color]="elementModel.fontColor"
-           [style.font-family]="elementModel.font"
-           [style.font-size.px]="elementModel.fontSize"
-           [style.font-weight]="elementModel.bold ? 'bold' : ''"
-           [style.font-style]="elementModel.italic ? 'italic' : ''"
-           [style.text-decoration]="elementModel.underline ? 'underline' : ''"
-           [style.white-space]="'pre-wrap'">
-          {{elementModel.text}}
-      </div>
+    <div [style.width.%]="100"
+         [style.height.%]="100"
+         [style.background-color]="elementModel.backgroundColor"
+         [style.color]="elementModel.fontColor"
+         [style.font-family]="elementModel.font"
+         [style.font-size.px]="elementModel.fontSize"
+         [style.font-weight]="elementModel.bold ? 'bold' : ''"
+         [style.font-style]="elementModel.italic ? 'italic' : ''"
+         [style.text-decoration]="elementModel.underline ? 'underline' : ''"
+         [style.white-space]="'pre-wrap'">
+        {{elementModel.text}}
+    </div>
   `
 })
 export class TextComponent extends ElementComponent {