From 93fb9bf1928b16c5c377fe3a4c02698c95ee714f Mon Sep 17 00:00:00 2001
From: Wolfgang Hottgenroth <wolfgang.hottgenroth@icloud.com>
Date: Sat, 23 Jun 2018 22:45:19 +0200
Subject: [PATCH] floating

---
 src/app/app.component.css                     |  8 +++++++
 src/app/app.component.html                    | 21 ++++++++-----------
 .../led-button-group2.component.ts            |  2 +-
 3 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/app/app.component.css b/src/app/app.component.css
index e69de29..090c3cf 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -0,0 +1,8 @@
+ledbutton2 {
+    float: left;
+    display: block;
+}
+
+p.clear {
+    clear: both;
+}
\ No newline at end of file
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 0a6e8bf..ac92b97 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -8,22 +8,19 @@
                 Wohnzimmer
               </mat-panel-title>
             </mat-expansion-panel-header>
-            <table id="maintable">
-                <tr>
-                  <td>
                     <ledbutton2 topic="led/test1" label="Küche Deckenlampe"></ledbutton2>
-                  </td>
-                  <td>
                     <ledbutton2 topic="led/test2" label="Keller normal"></ledbutton2>
-                  </td>
-                  <td>
                     <ledbutton2 topic="led/test3" label="Keller hell"></ledbutton2>
-                  </td>
-                  <td>
                     <ledbutton2 topic="led/test4" label="test4"></ledbutton2>
-                  </td>
-                </tr>
-              </table>
+                    <ledbutton2 topic="led/test1" label="Küche Deckenlampe"></ledbutton2>
+                    <ledbutton2 topic="led/test2" label="Keller normal"></ledbutton2>
+                    <ledbutton2 topic="led/test3" label="Keller hell"></ledbutton2>
+                    <ledbutton2 topic="led/test4" label="test4"></ledbutton2>
+                    <ledbutton2 topic="led/test1" label="Küche Deckenlampe"></ledbutton2>
+                    <ledbutton2 topic="led/test2" label="Keller normal"></ledbutton2>
+                    <ledbutton2 topic="led/test3" label="Keller hell"></ledbutton2>
+                    <ledbutton2 topic="led/test4" label="test4"></ledbutton2>
+                    <p class="clear"></p>
               </mat-expansion-panel>
           <mat-expansion-panel>
             <mat-expansion-panel-header>
diff --git a/src/app/led-button-group2/led-button-group2.component.ts b/src/app/led-button-group2/led-button-group2.component.ts
index 7111197..038bd4b 100644
--- a/src/app/led-button-group2/led-button-group2.component.ts
+++ b/src/app/led-button-group2/led-button-group2.component.ts
@@ -5,7 +5,7 @@ import { MqttclientService } from '../mqttclient.service'
   selector: 'ledbutton2',
   template: `
   <div [ngStyle]="{ 'text-align': 'center', 'background-color':'lightgrey', 'border-radius':'10px', 
-                    'width': '150px', 'padding':'5px',
+                    'width': '150px', 'padding':'5px', 'margin': '5px',
                     'font-family': 'sans-serif' }">
     {{label}}<br/>
     <button mat-mini-fab color="primary" (click)="clickOff()" [ngStyle]="{'font-size':'100%'}">off</button>