starred/WiFiManager

Fork 0

mirror of https://github.com/tzapu/WiFiManager.git synced 2026-04-28 01:25:49 +03:00

[GH-ISSUE #1112] Add parameter separators #950

New issue

Closed

opened 2026-02-28 01:27:49 +03:00 by kerem · 11 comments

kerem commented

2026-02-28 01:27:49 +03:00

Owner

Originally created by @Lithimlin on GitHub (Aug 20, 2020).
Original GitHub issue: https://github.com/tzapu/WiFiManager/issues/1112

Is it possible to add (named) separators between sets of parameters? Pages with a lot of parameters tend to get cluttered quickly. Separators, especially named ones, would greatly improve the readability.
Is it maybe already possible to add separators using a special custom string?

Originally created by @Lithimlin on GitHub (Aug 20, 2020). Original GitHub issue: https://github.com/tzapu/WiFiManager/issues/1112 Is it possible to add (named) separators between sets of parameters? Pages with a lot of parameters tend to get cluttered quickly. Separators, especially named ones, would greatly improve the readability. Is it maybe already possible to add separators using a special custom string?

kerem closed this issue

2026-02-28 01:27:49 +03:00

kerem commented

2026-02-28 01:27:49 +03:00

Author

Owner

@tablatronix commented on GitHub (Aug 20, 2020):

no, but good idea, in the alpha version the inputs already have labels now though

@tablatronix commented on GitHub (Aug 20, 2020): no, but good idea, in the alpha version the inputs already have labels now though

kerem commented

2026-02-28 01:27:49 +03:00

Author

Owner

@Lithimlin commented on GitHub (Aug 20, 2020):

Even then it is nice to put parameters into categories sometimes.

I just tried adding come custom CSS to the Head, however, that did not work out so nicely and instead it was shown at the top of the page.

I tried using CSS/HTML code from this stackoverflow post and then adding the "class=\"seperator\""as a cutsom HTLM for the Parameter. Any advice on how to do it correctly?

@Lithimlin commented on GitHub (Aug 20, 2020): Even then it is nice to put parameters into categories sometimes. I just tried adding come custom CSS to the Head, however, that did not work out so nicely and instead it was shown at the top of the page. I tried using CSS/HTML code from this [stackoverflow post](https://stackoverflow.com/questions/2812770/add-centered-text-to-the-middle-of-a-hr-like-line) and then adding the `"class=\"seperator\""`as a cutsom HTLM for the Parameter. Any advice on how to do it correctly?

kerem commented

2026-02-28 01:27:49 +03:00

Author

Owner

@Lithimlin commented on GitHub (Aug 20, 2020):

Here's the code to be more clear:

const char * customHead = ".separator {display: flex;align-items: center;text-align: center;} \
\n.separator::before, .separator::after {content:'';flex:1;border-bottom:1px solid #000;} \
\n.separator::before {margin-right:.25em;}\n.separator::after {margin-left:.25em;}";
wm.setCustomHeadElement(customHead);

And for the parameter:

class SeparatorParameter : public WiFiManagerParameter {
public:
  SeparatorParameter(const char *id, const char *label)
    : WiFiManagerParameter("") {
    init(id, label, "", 0, "class=\"separator\"", WFM_LABEL_BEFORE);
  }
};

@Lithimlin commented on GitHub (Aug 20, 2020): Here's the code to be more clear: ``` const char * customHead = ".separator {display: flex;align-items: center;text-align: center;} \ \n.separator::before, .separator::after {content:'';flex:1;border-bottom:1px solid #000;} \ \n.separator::before {margin-right:.25em;}\n.separator::after {margin-left:.25em;}"; wm.setCustomHeadElement(customHead); ``` And for the parameter: ``` class SeparatorParameter : public WiFiManagerParameter { public: SeparatorParameter(const char *id, const char *label) : WiFiManagerParameter("") { init(id, label, "", 0, "class=\"separator\"", WFM_LABEL_BEFORE); } }; ```

kerem commented

2026-02-28 01:27:49 +03:00

Author

Owner

@tablatronix commented on GitHub (Aug 20, 2020):

Yeah that is what I would do, add a class, then add that to your params.

use like a :before css psuedo class to add a HR before the param

Not sure why it woudn't work, might have a syntax issue there, try saving the html and see what wrong

@tablatronix commented on GitHub (Aug 20, 2020): Yeah that is what I would do, add a class, then add that to your params. use like a :before css psuedo class to add a HR before the param Not sure why it woudn't work, might have a syntax issue there, try saving the html and see what wrong

kerem commented

2026-02-28 01:27:49 +03:00

Author

Owner

@Lithimlin commented on GitHub (Aug 21, 2020):

I'm not sure what you mean by "saving the HTML". You mean the one of the captive portal config page?

@Lithimlin commented on GitHub (Aug 21, 2020): I'm not sure what you mean by "saving the HTML". You mean the one of the captive portal config page?

kerem commented

2026-02-28 01:27:49 +03:00

Author

Owner

@tablatronix commented on GitHub (Aug 21, 2020):

Yeah look at the source see whats wrong

@tablatronix commented on GitHub (Aug 21, 2020): Yeah look at the source see whats wrong

kerem commented

2026-02-28 01:27:49 +03:00

Author

Owner

@Lithimlin commented on GitHub (Aug 24, 2020):

I've come so far to say that it's not easily possible without changing things in the library.
In strings_en.h, there are the constants HTTP_FORM_LABEL[] and HTTP_FORM_PARAM[]:

const char HTTP_FORM_LABEL[]       PROGMEM = "<label for='{i}'>{t}</label>";
const char HTTP_FORM_PARAM_HEAD[]  PROGMEM = "<hr><br/>";
const char HTTP_FORM_PARAM[]       PROGMEM = "<br/><input id='{i}' name='{n}' maxlength='{l}' value='{v}' {c}>";

The class="separator" would need to go in the label and the input would need to be ignored. As far as I can see though, you cannot manipulate the label for parameters, just the input.

I also figured out why the style didn't apply: There was a <style>[...]</style> wrapper missing. The final code for that, including stuff for the invert class, looks like this for me:

const char customHead[] = "<style>"
  ".separator {display: flex;align-items: center;text-align: center;}"
  ".separator::before, .separator::after {content:''; flex: 1; border-bottom: 1px solid #000;}"
  ".separator::before {margin-right: .25em;}"
  ".separator::after {margin-left: .25em;}"
  "body.invert .separator::before{border-bottom: 1px solid #FFF;}"
  "body.invert .separator::after {border-bottom: 1px solid #FFF;}"
  "</style>";
  wm.setCustomHeadElement(customHead);

@Lithimlin commented on GitHub (Aug 24, 2020): I've come so far to say that it's not easily possible without changing things in the library. In `strings_en.h`, there are the constants `HTTP_FORM_LABEL[]` and `HTTP_FORM_PARAM[]`: ```cpp const char HTTP_FORM_LABEL[] PROGMEM = "<label for='{i}'>{t}</label>"; const char HTTP_FORM_PARAM_HEAD[] PROGMEM = "<hr><br/>"; const char HTTP_FORM_PARAM[] PROGMEM = "<br/><input id='{i}' name='{n}' maxlength='{l}' value='{v}' {c}>"; ``` The `class="separator"` would need to go in the label and the input would need to be ignored. As far as I can see though, you cannot manipulate the label for parameters, just the input. I also figured out why the style didn't apply: There was a `<style>[...]</style>` wrapper missing. The final code for that, including stuff for the invert class, looks like this for me: ```cpp const char customHead[] = "<style>" ".separator {display: flex;align-items: center;text-align: center;}" ".separator::before, .separator::after {content:''; flex: 1; border-bottom: 1px solid #000;}" ".separator::before {margin-right: .25em;}" ".separator::after {margin-left: .25em;}" "body.invert .separator::before{border-bottom: 1px solid #FFF;}" "body.invert .separator::after {border-bottom: 1px solid #FFF;}" "</style>"; wm.setCustomHeadElement(customHead); ```

kerem commented

2026-02-28 01:27:49 +03:00

Author

Owner

@Lithimlin commented on GitHub (Aug 24, 2020):

Another thing I want to add is that if I try to add a SeparatorParameter somewhere, it and the following parameters are not added to the _params list in the WiFiManager which I don't really understand.

@Lithimlin commented on GitHub (Aug 24, 2020): Another thing I want to add is that if I try to add a `SeparatorParameter` somewhere, it and the following parameters are not added to the `_params` list in the `WiFiManager` which I don't really understand.

kerem commented

2026-02-28 01:27:49 +03:00

Author

Owner

@Lithimlin commented on GitHub (Aug 24, 2020):

Setting the value length in the init to 4 (or something greater than 0) helped, but as mentioned before, now I still have the input box that I don't need and cannot apply the separator class to the label

@Lithimlin commented on GitHub (Aug 24, 2020): Setting the value length in the `init` to 4 (or something greater than 0) helped, but as mentioned before, now I still have the input box that I don't need and cannot apply the separator class to the label

kerem commented

2026-02-28 01:27:50 +03:00

Author

Owner

@Lithimlin commented on GitHub (Aug 25, 2020):

I have found a solution:

class SeparatorParameter : public WiFiManagerParameter {
public:
  SeparatorParameter(const char *label)
    : WiFiManagerParameter() {
    char *custom = new char[55];
    strcpy(custom, "<div class=\"separator\">");
    strcat(custom, label);
    strcat(custom, "</div>");
    init(NULL, NULL, NULL, 1, custom, WFM_LABEL_BEFORE);
  }
};

This uses only the customHtml field and will not create an input box since the id field is NULL

@Lithimlin commented on GitHub (Aug 25, 2020): I have found a solution: ```cpp class SeparatorParameter : public WiFiManagerParameter { public: SeparatorParameter(const char *label) : WiFiManagerParameter() { char *custom = new char[55]; strcpy(custom, "<div class=\"separator\">"); strcat(custom, label); strcat(custom, "</div>"); init(NULL, NULL, NULL, 1, custom, WFM_LABEL_BEFORE); } }; ``` This uses only the `customHtml` field and will not create an input box since the `id` field is `NULL`

kerem commented

2026-02-28 01:27:50 +03:00

Author

Owner

@tablatronix commented on GitHub (Aug 25, 2020):

still do not know why you have a problem with adding custom class to one input and have a seperator after that, using the custom attr for that input, should not affect labels

@tablatronix commented on GitHub (Aug 25, 2020): still do not know why you have a problem with adding custom class to one input and have a seperator after that, using the custom attr for that input, should not affect labels