[update] React and Angular guides (styles)

docs/guides/integration_with_angular.md

@@ -89,9 +89,9 @@ import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation}
     encapsulation: ViewEncapsulation.None,
     selector: "todo", // a template name used in the "app.component.ts" file as <todo />
     styleUrls: ["./todo.component.css"], // include the css file
-    template:  `<main class="component_container">
+    template:  `<main class = "component_container">
                     <div #toolbar_container></div>
-                    <div #todo_container style="height: calc(100% - 56px);"></div>
+                    <div #todo_container class = "widget"></div>
                 </main>`
 })
 
@@ -132,19 +132,24 @@ To display To Do List correctly, you need to provide the corresponding styles. F
 
 /* specify styles for initial page */
 html,
-body {
-    margin: 0;
-    padding: 0;
+body{
     height: 100%;
+    padding: 0;
+    margin: 0;
     background-color: #f7f7f7;
 }
 
-/* specify styles for the To Do List container */
+/* specify styles for To Do List and Toolbar container*/
 .component_container {
     height: 100%; 
     max-width: 800px; 
     margin: 0 auto;
 }
+
+/* specify styles for To Do List container */
+.widget {
+    height: calc(100% - 56px);
+}
 ~~~
 
 #### Loading data
@@ -204,9 +209,9 @@ import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation}
     encapsulation: ViewEncapsulation.None,
     selector: "todo", 
     styleUrls: ["./todo.component.css"], 
-    template:  `<main class="component_container">
+    template:  `<main class = "component_container">
                     <div #toolbar_container></div>
-                    <div #todo_container style="height: calc(100% - 56px);"></div>
+                    <div #todo_container class = "widget"></div>
                 </main>`
 })
 
@@ -250,9 +255,9 @@ import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation}
     encapsulation: ViewEncapsulation.None,
     selector: "todo", 
     styleUrls: ["./todo.component.css"], 
-    template:  `<main class="component_container">
+    template:  `<main class = "component_container">
                     <div #toolbar_container></div>
-                    <div #todo_container style="height: calc(100% - 56px);"></div>
+                    <div #todo_container class = "widget"></div>
                 </main>`
 })
 

docs/guides/integration_with_react.md

@@ -113,13 +113,41 @@ export default function ToDoComponent(props) {
         };
     }, []);
 
-    return  <div>
+    return  <div className="component_container">
                 <div ref={toolbar_container}></div>
-                <div ref={todo_container} style={{ height: "calc(100% - 56px)" }}></div>
+                <div ref={todo_container} className="widget"></div>
             </div>
 }
 ~~~
 
+#### Adding styles
+
+To display To Do List correctly, you need to provide the corresponding styles. You can use the **index.css** file to specify important styles for To Do List and its containers:
+
+~~~css title="index.css"
+/* specify styles for initial page */
+html,
+body,
+#root {
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    background-color: #f7f7f7;
+}
+
+/* specify styles for To Do List and Toolbar container*/
+.component_container {
+    height: 100%; 
+    max-width: 800px; 
+    margin: 0 auto;
+}
+
+/* specify styles for To Do List container*/
+.widget {
+    height: calc(100% - 56px);
+}
+~~~
+
 #### Loading data
 
 To add data into the To Do List, you need to provide a data set. You can create the ***data.js*** file in the ***src/*** directory and add some data into it:
@@ -210,9 +238,9 @@ export default function ToDoComponent(props) {
         };
     }, []);
 
-    return  <div>
+    return  <div className="component_container">
                 <div ref={toolbar_container}></div>
-                <div ref={todo_container} style={{ height: "calc(100% - 56px)" }}></div>
+                <div ref={todo_container} className="widget"></div>
             </div>
 }
 ~~~
@@ -248,9 +276,9 @@ export default function ToDoComponent(props) {
         };
     }, []);
 
-    return  <div>
+    return  <div className="component_container">
                 <div ref={toolbar_container}></div>
-                <div ref={todo_container} style={{ height: "calc(100% - 56px)" }}></div>
+                <div ref={todo_container} className="widget"></div>
             </div>
 }
 ~~~