Style aux form

[Koxx3]

Is there any way to add styles to align elements correctly ?
i didn't find in the documentation 😅

[Hieromon]

Each element placed on a custom web page has a div element with a .noorder class as the parent element. You can qualify the style of the particular elements by using CSS selector with the .nooder class.
You allow the sketch to override the style of selected elements by declaring the CSS using ACStyle element within your custom web page definition.

For example, the CSS to align the label columns of a custom web page is following:

.noorder {
    width: 100%
}

.noorder label {
    display: inline-block;
    width: 10.5em;
    cursor: pointer;
    padding: 5px
}

.noorder input[type='number'] {
    width: 4em;
    margin: 3px 0.3em 0 0;
    padding: 3px
}

The JSON for a custom web page declaration to enable this CSS in a sketch using the ACStyle element looks like this:

{
  "uri": "/elements",
  "title": "SmartElec config",
  "menu": true,
  "element": [
    {
      "name": "cs",
      "type": "ACStyle",
      "value": ".noorder{width:100%}.noorder label{display:inline-block;width:10.5em;cursor:pointer;padding:5px}.noorder input[type='number']{width:4em;margin:3px 0.3em 0 0;padding:3px}"
    },
    {
      "name": "cap",
      "type": "ACText",
      "value": "E-scooter characteristics",
      "style": "color:navy"
    },
    {
      "name": "wheel",
      "type": "ACInput",
      "label": "Wheel size",
      "apply": "number"
    },
    {
      "name": "motors",
      "type": "ACInput",
      "label": "Motor number of poles",
      "apply": "number"
    },
    {
      "name": "throttle",
      "type": "ACCheckbox",
      "label": "Throttle regeneration",
      "value": "throttle",
      "labelposition": "infront",
      "checked": true
    },
    {
      "name": "sep",
      "type": "ACElement",
      "value": "<hr style=\"height:1px;border-width:0;color:gray;background-color:#52a6ed\">",
      "posterior": "par"
    },
    {
      "name": "load",
      "type": "ACSubmit",
      "value": "Load",
      "uri": "/load"
    },
    {
      "name": "save",
      "type": "ACSubmit",
      "value": "Save",
      "uri": "/save"
    }
  ]  
}

[DanMan32]

I believe you forgot to include the "Check" checkbox to the right of the buttons in Knoxx3's display example.

I too am trying to figure out how to align elements in my display.
In my case I have labels on the left and output information next to them to their right. I was hoping I could get the output to be column justified.
Currently I have each data as a concatenated string with descriptive text on the left and the data after it, padded in the middle with spaces to place the data in the correct column position but the spaces get trimmed out.
Also wanting to add an extra line between the caption and the data.

One of the displayed information is actually a temperature setting. I was thinking of submit buttons to raise and lower the temperature setting but since the setting is a 2 decimal float, that could be tedious.

I also wanted an auto-refresh but I read a previous discussion post where you gave the OTA page as an example. That seemed tedious just for a page refresh.

[Koxx3]

thanks a lot for this answer. i'll try that !

[Hieromon]

@Koxx3 This topic you raised has converted into Discussions as it is expected to bring on useful information to other users. We can further discuss the appearance modification with CSS for custom web pages.
Thank you for your contribution.

[FRANAIRBUS]

@DanMan32 @Koxx3 @Hieromon

After many days of trial and error I have achieved this in case it helps someone.

I think I should sign up for a ccs w3 master class ;)

.noorder input[type='text']
it is for ACImput
"apply": "text",

.noorder input[type='number']
it is for ACImput
"apply": "number",

.noorder input[type='button']
is for ACSubmit

Example 1:

    {
      "name": "style",
      "type": "ACStyle",
      "value": "
      
               .noorder {
                margin: auto
              }

              .noorder label {
               display: inline-block;
               width: 9em;
               margin: 5px 0 0 0;
               cursor: pointer;
               padding: 5px           
              }

               .noorder input[type='number'] {
               display: inline-block;
               width: 40px;
               height: 25px;
               margin: 5px 0 0 12.5em;
               cursor: pointer;
               padding: 5px;
               text-align: center;
               background-color: #EBD7FF 
              }

              .noorder input[type='button'] {          
               background-color: #4A2E7C 
              }"
    },

Example 2:

    {
      "name": "style",
      "type": "ACStyle",
      "value": "

               .noorder {
                margin: auto
              }

               .noorder label {
               display: inline-block;
               width: 10.5em;
               cursor: pointer;
               padding: 5px
              }

              .noorder input[type='text'] {
               display: inline;
               width: 200px;
               height: 25px;
               margin: 5px 0.3em 0 0;
               cursor: pointer;
               padding: 5px;

               background-color: #EBD7FF 
              }

              .noorder input[type='button'] {
               
               background-color: #4A2E7C 
              }"                                   
    },
    

With this you can change colors and alignments of each custom web page and buttons.

Even so, it is not exactly as I would like and it is due to lack of knowledge on my part. but it might help other people

On the other hand, I can't change the background color of the menu without touching the library, not even with.

mylabels.h

#ifdef AUTOCONNECT_MENUCOLOR_BACKGROUND
#undef AUTOCONNECT_MENUCOLOR_BACKGROUND
#define AUTOCONNECT_MENUCOLOR_BACKGROUND  "#1a237e"
#endif // !AUTOCONNECT_MENUCOLOR_BACKGROUND

I'm doing something wrong, I can only change it in
src/AutoConnectLabels.h