From 3b33f088788ea5f7d3f5b64d557427b8a8623a3d Mon Sep 17 00:00:00 2001
From: Hieromon Ikasamo <Hieromon@users.noreply.github.com>
Date: Thu, 28 Jul 2022 22:32:10 +0900
Subject: [PATCH] Fixed broken layout.

---
 examples/mqttRSSI/mqttRSSI.ino              | 8 ++++----
 examples/mqttRSSI_FS/data/mqtt_setting.json | 8 ++++----
 examples/mqttRSSI_NA/mqttRSSI_NA.ino        | 4 ++--
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/examples/mqttRSSI/mqttRSSI.ino b/examples/mqttRSSI/mqttRSSI.ino
index 906f38fe..10a7f2a4 100644
--- a/examples/mqttRSSI/mqttRSSI.ino
+++ b/examples/mqttRSSI/mqttRSSI.ino
@@ -82,15 +82,15 @@ static const char AUX_mqtt_setting[] PROGMEM = R"raw(
       },
       {
         "name": "header",
-        "type": "ACText",
-        "value": "<h2>MQTT Broker settings</h2>",
-        "style": "text-align:center;color:#2f4f4f"
+        "type": "ACElement",
+        "value": "<h2 style='text-align:center;color:#2f4f4f;margin-top:10px;margin-bottom:10px'>MQTT Broker settings</h2>"
       },
       {
         "name": "caption",
         "type": "ACText",
         "value": "Publish WiFi signal strength via MQTT, publishing the RSSI value of the ESP module to the ThingSpeak public channel.",
-        "style": "font-family:serif;color:#053d76"
+        "style": "font-family:serif;color:#053d76",
+        "posterior": "par"
       },
       {
         "name": "mqttserver",
diff --git a/examples/mqttRSSI_FS/data/mqtt_setting.json b/examples/mqttRSSI_FS/data/mqtt_setting.json
index 9ea809d3..9ddcf73c 100644
--- a/examples/mqttRSSI_FS/data/mqtt_setting.json
+++ b/examples/mqttRSSI_FS/data/mqtt_setting.json
@@ -10,15 +10,15 @@
     },
     {
       "name": "header",
-      "type": "ACText",
-      "value": "<h2>MQTT Broker settings</h2>",
-      "style": "text-align:center;color:#2f4f4f"
+      "type": "ACElement",
+      "value": "<h2 style='text-align:center;color:#2f4f4f;margin-top:10px;margin-bottom:10px'>MQTT Broker settings</h2>"
     },
     {
       "name": "caption",
       "type": "ACText",
       "value": "Publish WiFi signal strength via MQTT, publishing the RSSI value of the ESP module to the ThingSpeak public channel.",
-      "style": "font-family:serif;color:#053d76"
+      "style": "font-family:serif;color:#053d76",
+      "posterior": "par"
     },
     {
       "name": "mqttserver",
diff --git a/examples/mqttRSSI_NA/mqttRSSI_NA.ino b/examples/mqttRSSI_NA/mqttRSSI_NA.ino
index 3f1f7d1e..bc28fc68 100644
--- a/examples/mqttRSSI_NA/mqttRSSI_NA.ino
+++ b/examples/mqttRSSI_NA/mqttRSSI_NA.ino
@@ -64,8 +64,8 @@ const char* AUX_CLEAR_URI   = "/mqtt_clear";
 
 // Declare AutoConnectElements for the page asf /mqtt_setting
 ACStyle(style, "label+input,label+select{position:sticky;left:140px;width:204px!important;box-sizing:border-box;}");
-ACText(header, "<h2>MQTT Broker settings</h2>", "text-align:center;color:#2f4f4f");
-ACText(caption, "Publish WiFi signal strength via MQTT, publishing the RSSI value of the ESP module to the ThingSpeak public channel.", "font-family:serif;color:#053d76");
+ACElement(header, "<h2 style='text-align:center;color:#2f4f4f;margin-top:10px;margin-bottom:10px'>MQTT Broker settings</h2>");
+ACText(caption, "Publish WiFi signal strength via MQTT, publishing the RSSI value of the ESP module to the ThingSpeak public channel.", "font-family:serif;color:#053d76", "", AC_Tag_P);
 ACInput(mqttserver, "", "Server", "^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\\-]*[a-zA-Z0-9])\\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\\-]*[A-Za-z0-9])$", "MQTT broker server");
 ACInput(apikey, "", "Uer API Key");
 ACInput(channelid, "", "Channel ID", "^[0-9]{6}$");