Inline elements

[DanMan32]

How can one place elements next to each other?
I've read several ways to do it in HTML where elements can be grouped together that you want inline, but not sure how to code that using Autoconnect elements, especially if one wants several groups on a page

[Hieromon]

A placing way choice for horizontally arranging the AutoConnect elements must match the line feed characteristics of the HTML generated by AutoConnect. AutoConnect will not actively be involved in the layout of custom Web pages generated from AutoConnectElements. However, each element has an attribute to arrange placement on a custom web page horizontally or vertically.

All elements of AutoConnectElement have attributes to explicitly specify the placement direction. All elements of AutoConnectElement have an attribute to explicitly specify the placement direction. It is described in the documentation as the post. Also, how to specify post in JSON is explained here.

Custom web pages are converted to HTML as unstyled DIV blocks, so you can define nested DIV blocks to place AutoConnect elements horizontally. Therefore the DIV block that instructs the horizontal arrangement using inline-block can be implemented by ACElement as follows:

#include <Arduino.h>
#include <WiFi.h>
#include <WebServer.h>
#include <AutoConnect.h>

const char ELEMENTS[] PROGMEM = R"(
{
  "uri": "/elements",
  "title": "Elements",
  "menu": true,
  "element": [
    {
      "name": "header",
      "type": "ACText",
      "value": "Horizontal Placement"
    },
    {
      "name": "sep",
      "type": "ACElement",
      "value": "<hr>"
    },
    {
      "name": "check",
      "type": "ACCheckBox",
      "value": "check",
      "label": "Check",
      "labelPosition": "infront",
      "arrange": "horizontal",
      "posterior": "none"
    },
    {
      "name": "d1o",
      "type": "ACElement",
      "value": "<div style='display:inline-block;vertical-align:middle'>"
    },
    {
      "name": "radio",
      "type": "ACRadio",
      "value": [
        "Button-1",
        "Button-2",
        "Button-3"
      ],
      "label": "Radio",
      "arrange": "vertical",
      "checked": 1,
      "posterior": "none"
    },
    {
      "name": "d1c",
      "type": "ACElement",
      "value": "</div>"
    },
    {
      "name": "d2o",
      "type": "ACElement",
      "value": "<div style='display:inline-block;vertical-align:middle'>"
    },
    {
      "name": "select",
      "type": "ACSelect",
      "option": [
        "Option-1",
        "Option-2",
        "Option-3"
      ],
      "label": "Select",
      "selected": 2,
      "posterior": "none"
    },
    {
      "name": "d2c",
      "type": "ACElement",
      "value": "</div>"
    }
  ]
}
)";

AutoConnect portal;

void setup() {
  portal.load(ELEMENTS);
  portal.begin();
}

void loop() {
  portal.handleClient();
}