diff --git a/navalplanner-webapp/src/main/java/org/navalplanner/web/orders/materials/AssignedMaterialsToOrderElementController.java b/navalplanner-webapp/src/main/java/org/navalplanner/web/orders/materials/AssignedMaterialsToOrderElementController.java
index 1e9191668..702397b85 100644
--- a/navalplanner-webapp/src/main/java/org/navalplanner/web/orders/materials/AssignedMaterialsToOrderElementController.java
+++ b/navalplanner-webapp/src/main/java/org/navalplanner/web/orders/materials/AssignedMaterialsToOrderElementController.java
@@ -58,6 +58,7 @@ import org.zkoss.zul.Treecell;
 import org.zkoss.zul.Treeitem;
 import org.zkoss.zul.TreeitemRenderer;
 import org.zkoss.zul.Treerow;
+import org.zkoss.zul.Vbox;
 import org.zkoss.zul.api.Textbox;
 import org.zkoss.zul.impl.MessageboxDlg;
 
@@ -86,10 +87,14 @@ public class AssignedMaterialsToOrderElementController extends
 
     private Tab tbAssignedMaterials;
 
+    private Vbox assignmentsBox;
+
     @Override
     public void doAfterCompose(Component comp) throws Exception {
         super.doAfterCompose(comp);
         comp.setVariable("assignedMaterialsController", this, true);
+        Executions.createComponents("/orders/_assignmentsBox.zul",
+                assignmentsBox, new HashMap<String, String>());
     }
 
     public void openWindow(OrderElement orderElement) {
diff --git a/navalplanner-webapp/src/main/webapp/orders/_assignmentsBox.zul b/navalplanner-webapp/src/main/webapp/orders/_assignmentsBox.zul
new file mode 100644
index 000000000..a13ddb149
--- /dev/null
+++ b/navalplanner-webapp/src/main/webapp/orders/_assignmentsBox.zul
@@ -0,0 +1,50 @@
+<panel title="${i18n:_('Materials')}" border="normal">
+    <panelchildren>
+        <newdatasortablegrid id="gridMaterials"
+            fixedLayout="false"
+            model="@{assignedMaterialsController.assignedMaterials}">
+            <columns>
+                <newdatasortablecolumn label="${i18n:_('Code')}" />
+                <newdatasortablecolumn label="${i18n:_('Date')}" />
+                <newdatasortablecolumn label="${i18n:_('Units')}" />
+                <newdatasortablecolumn label="${i18n:_('Unit type')}" />
+                <newdatasortablecolumn label="${i18n:_('Unit price')}" />
+                <newdatasortablecolumn label="${i18n:_('Total price')}" />
+                <newdatasortablecolumn label="${i18n:_('Category')}" />
+                <newdatasortablecolumn label="${i18n:_('Status')}" />
+                <newdatasortablecolumn label="" />
+            </columns>
+            <rows>
+                <row self="@{each='assignedMaterial'}" value="@{assignedMaterial}">
+                    <textbox value="@{assignedMaterial.material.code}"
+                        constraint="no empty:${i18n:_('cannot be null or empty')}"
+                        readonly="true" />
+                    <datebox value="@{assignedMaterial.estimatedAvailability}" />
+                    <doublebox value="@{assignedMaterial.units}"
+                        onChange="assignedMaterialsController.updateTotalPrice(self.parent)" />
+                    <listbox mold="select" model="@{unitTypes}"
+                        selectedItem="@{assignedMaterial.material.unitType}" disabled="true" />
+                    <doublebox value="@{assignedMaterial.unitPrice}"
+                        onChange="assignedMaterialsController.updateTotalPrice(self.parent)" />
+                    <doublebox value="@{assignedMaterial.totalPrice}"
+                        onChange="assignedMaterialsController.updateUnitPrice(self.parent)" />
+                    <label value="@{assignedMaterial.material.category.name}" width="150px" />
+                    <listbox mold="select" model="@{materialStatus}"
+                        selectedItem="@{assignedMaterial.status}"/>
+                    <hbox>
+                        <button sclass="icono"
+                            image="/common/img/ico_borrar1.png"
+                            hoverImage="/common/img/ico_borrar.png"
+                            tooltiptext="${i18n:_('Delete')}"
+                            onClick="assignedMaterialsController.showRemoveMaterialAssignmentDlg(self.parent.parent.value)">
+                        </button>
+                        <button label="${i18n:_('Split')}"
+                            tooltiptext="${i18n:_('Split assignment')}"
+                            onClick="assignedMaterialsController.showSplitMaterialAssignmentDlg(self.parent.parent.value)">
+                        </button>
+                    </hbox>
+                </row>
+            </rows>
+        </newdatasortablegrid>
+    </panelchildren>
+</panel>
\ No newline at end of file
diff --git a/navalplanner-webapp/src/main/webapp/orders/components/_listOrderElementMaterials.zul b/navalplanner-webapp/src/main/webapp/orders/components/_listOrderElementMaterials.zul
index 344f50047..377ea78dd 100644
--- a/navalplanner-webapp/src/main/webapp/orders/components/_listOrderElementMaterials.zul
+++ b/navalplanner-webapp/src/main/webapp/orders/components/_listOrderElementMaterials.zul
@@ -60,58 +60,7 @@
                     </vbox>
 
                     <!-- Materials -->
-                    <vbox>
-                        <panel title="${i18n:_('Materials')}"
-                            border="normal">
-                            <panelchildren>
-                                <newdatasortablegrid id="gridMaterials"
-                                    fixedLayout="false"
-                                    model="@{assignedMaterialsController.assignedMaterials}">
-                                    <columns>
-                                        <newdatasortablecolumn label="${i18n:_('Code')}" />
-                                        <newdatasortablecolumn label="${i18n:_('Date')}" />
-                                        <newdatasortablecolumn label="${i18n:_('Units')}" />
-                                        <newdatasortablecolumn label="${i18n:_('Unit type')}" />
-                                        <newdatasortablecolumn label="${i18n:_('Unit price')}" />
-                                        <newdatasortablecolumn label="${i18n:_('Total price')}" />
-                                        <newdatasortablecolumn label="${i18n:_('Category')}" />
-                                        <newdatasortablecolumn label="${i18n:_('Status')}" />
-                                        <newdatasortablecolumn label="" />
-                                    </columns>
-                                    <rows>
-                                        <row self="@{each='assignedMaterial'}" value="@{assignedMaterial}">
-                                            <textbox value="@{assignedMaterial.material.code}"
-                                                constraint="no empty:${i18n:_('cannot be null or empty')}"
-                                                readonly="true" />
-                                            <datebox value="@{assignedMaterial.estimatedAvailability}" />
-                                            <doublebox value="@{assignedMaterial.units}"
-                                                onChange="assignedMaterialsController.updateTotalPrice(self.parent)" />
-                                            <listbox mold="select" model="@{unitTypes}"
-                                                selectedItem="@{assignedMaterial.material.unitType}" disabled="true" />
-                                            <doublebox value="@{assignedMaterial.unitPrice}"
-                                                onChange="assignedMaterialsController.updateTotalPrice(self.parent)" />
-                                            <doublebox value="@{assignedMaterial.totalPrice}"
-                                                onChange="assignedMaterialsController.updateUnitPrice(self.parent)" />
-                                            <label value="@{assignedMaterial.material.category.name}" width="150px" />
-                                            <listbox mold="select" model="@{materialStatus}"
-                                                selectedItem="@{assignedMaterial.status}"/>
-                                            <hbox>
-                                                <button sclass="icono"
-                                                    image="/common/img/ico_borrar1.png"
-                                                    hoverImage="/common/img/ico_borrar.png"
-                                                    tooltiptext="${i18n:_('Delete')}"
-                                                    onClick="assignedMaterialsController.showRemoveMaterialAssignmentDlg(self.parent.parent.value)">
-                                                </button>
-                                                <button label="${i18n:_('Split')}"
-                                                    tooltiptext="${i18n:_('Split assignment')}"
-                                                    onClick="assignedMaterialsController.showSplitMaterialAssignmentDlg(self.parent.parent.value)">
-                                                </button>
-                                            </hbox>
-                                        </row>
-                                    </rows>
-                                </newdatasortablegrid>
-                            </panelchildren>
-                        </panel>
+                    <vbox id="assignmentsBox">
                     </vbox>
                 </hbox>
             </tabpanel>