[GH-ISSUE #1158] Advanced Example: Impossible to align radio buttons correctly? #993

Open
opened 2026-02-28 01:28:01 +03:00 by kerem · 18 comments
Owner

Originally created by @wimmatthijs on GitHub (Dec 5, 2020).
Original GitHub issue: https://github.com/tzapu/WiFiManager/issues/1158

In the advanced example radio buttons are used with HTML injection.
It seems to be impossible to get the labels and the radioboxes well alligned?
I've tried in-line css but to no avail, the alignement of the radiobuttons stays central, even with or without the label.
Anybody know where to look for in order to get this working properly?
Where is the CSS used in this project?

WiFiManager wm;
const char* program_selection_str = "<p>Please select progam mode:</p>"
  "<input style='display: inline-block;' type='radio' id='choice1' name='program_selection' value='1'>"
  "<label for='choice1'>Choice1</label><br>"
  "<input style='display: inline-block;' type='radio' id='choice2' name='program_selection' value='2'>"
  "<label for='choice2'>Choice2</label><br>";
WiFiManagerParameter custom_field(program_selection_str);
wm.addParameter(&custom_field);

If i find more time i will investigate further, but i hope maybe somebody has seen this issue before?

thanks,

Originally created by @wimmatthijs on GitHub (Dec 5, 2020). Original GitHub issue: https://github.com/tzapu/WiFiManager/issues/1158 In the advanced example radio buttons are used with HTML injection. It seems to be impossible to get the labels and the radioboxes well alligned? I've tried in-line css but to no avail, the alignement of the radiobuttons stays central, even with or without the label. Anybody know where to look for in order to get this working properly? Where is the CSS used in this project? ``` WiFiManager wm; const char* program_selection_str = "<p>Please select progam mode:</p>" "<input style='display: inline-block;' type='radio' id='choice1' name='program_selection' value='1'>" "<label for='choice1'>Choice1</label><br>" "<input style='display: inline-block;' type='radio' id='choice2' name='program_selection' value='2'>" "<label for='choice2'>Choice2</label><br>"; WiFiManagerParameter custom_field(program_selection_str); wm.addParameter(&custom_field); ``` If i find more time i will investigate further, but i hope maybe somebody has seen this issue before? thanks,
Author
Owner

@wimmatthijs commented on GitHub (Dec 5, 2020):

OK I found the global css description in the strings_en.h file and the issue is because all inputfields are set to width 100%
In the webserver only text inputfields are used which makes sense to give them 100% width.
quick fixes for the problem are: applying the width 100% style only to input[type="text"] in global css
or at least include the inline style needed in the advanced example

Adding folliwing inline style to the radio buttons gives a statisfying result for me:
style='width: auto; margin: 0 10px 0 10px;

Working example :

WiFiManager wm;
const char* program_selection_str = "<p>Please select progam mode:</p>"
  "<input style='width: auto; margin: 0 10px 10px 10px;' type='radio' id='choice1' name='program_selection' value='1'>"
  "<label for='choice1'>Choice1</label><br>"
  "<input style='width: auto; margin: 10px 10px 0 10px;' type='radio' id='choice2' name='program_selection' value='2'>"
  "<label for='choice2'>Choice2</label><br>";
WiFiManagerParameter custom_field(program_selection_str);
wm.addParameter(&custom_field);
<!-- gh-comment-id:739323901 --> @wimmatthijs commented on GitHub (Dec 5, 2020): OK I found the global css description in the strings_en.h file and the issue is because all inputfields are set to width 100% In the webserver only text inputfields are used which makes sense to give them 100% width. quick fixes for the problem are: applying the width 100% style only to input[type="text"] in global css or at least include the inline style needed in the advanced example Adding folliwing inline style to the radio buttons gives a statisfying result for me: `style='width: auto; margin: 0 10px 0 10px;` Working example : ``` WiFiManager wm; const char* program_selection_str = "<p>Please select progam mode:</p>" "<input style='width: auto; margin: 0 10px 10px 10px;' type='radio' id='choice1' name='program_selection' value='1'>" "<label for='choice1'>Choice1</label><br>" "<input style='width: auto; margin: 10px 10px 0 10px;' type='radio' id='choice2' name='program_selection' value='2'>" "<label for='choice2'>Choice2</label><br>"; WiFiManagerParameter custom_field(program_selection_str); wm.addParameter(&custom_field); ```
Author
Owner

@tablatronix commented on GitHub (Dec 5, 2020):

Thanks, I have not had a chance to look into this at all

<!-- gh-comment-id:739372844 --> @tablatronix commented on GitHub (Dec 5, 2020): Thanks, I have not had a chance to look into this at all
Author
Owner

@tablatronix commented on GitHub (Dec 6, 2020):

Please add screenshots

<!-- gh-comment-id:739452868 --> @tablatronix commented on GitHub (Dec 6, 2020): Please add screenshots
Author
Owner

@wimmatthijs commented on GitHub (Dec 6, 2020):

Without inline styling :

image

with inline styling:
image

<!-- gh-comment-id:739515187 --> @wimmatthijs commented on GitHub (Dec 6, 2020): **Without inline styling :** ![image](https://user-images.githubusercontent.com/42993778/101283726-98c03c00-37dc-11eb-9fd7-ef645864928a.png) **with inline styling:** ![image](https://user-images.githubusercontent.com/42993778/101283735-ac6ba280-37dc-11eb-9c09-cc63d769607e.png)
Author
Owner

@tablatronix commented on GitHub (Dec 18, 2020):

Give this a try ( you will still need to add a break before your input, as it will be inline still )

<!-- gh-comment-id:748278391 --> @tablatronix commented on GitHub (Dec 18, 2020): Give this a try ( you will still need to add a break before your input, as it will be inline still )
Author
Owner

@johnnysamuael commented on GitHub (Jan 4, 2021):

OK I found the global css description in the strings_en.h file and the issue is because all inputfields are set to width 100%
In the webserver only text inputfields are used which makes sense to give them 100% width.
quick fixes for the problem are: applying the width 100% style only to input[type="text"] in global css
or at least include the inline style needed in the advanced example

Adding folliwing inline style to the radio buttons gives a statisfying result for me:
style='width: auto; margin: 0 10px 0 10px;

Working example :

WiFiManager wm;
const char* program_selection_str = "<p>Please select progam mode:</p>"
  "<input style='width: auto; margin: 0 10px 10px 10px;' type='radio' id='choice1' name='program_selection' value='1'>"
  "<label for='choice1'>Choice1</label><br>"
  "<input style='width: auto; margin: 10px 10px 0 10px;' type='radio' id='choice2' name='program_selection' value='2'>"
  "<label for='choice2'>Choice2</label><br>";
WiFiManagerParameter custom_field(program_selection_str);
wm.addParameter(&custom_field);

Hey, how do i get the return value from the radio button? when i used strcpy(retval, custom_radiobtn.getValue()); it threw a stack trace exception. @wimmatthijs

<!-- gh-comment-id:754029522 --> @johnnysamuael commented on GitHub (Jan 4, 2021): > OK I found the global css description in the strings_en.h file and the issue is because all inputfields are set to width 100% > In the webserver only text inputfields are used which makes sense to give them 100% width. > quick fixes for the problem are: applying the width 100% style only to input[type="text"] in global css > or at least include the inline style needed in the advanced example > > Adding folliwing inline style to the radio buttons gives a statisfying result for me: > `style='width: auto; margin: 0 10px 0 10px;` > > Working example : > > ``` > WiFiManager wm; > const char* program_selection_str = "<p>Please select progam mode:</p>" > "<input style='width: auto; margin: 0 10px 10px 10px;' type='radio' id='choice1' name='program_selection' value='1'>" > "<label for='choice1'>Choice1</label><br>" > "<input style='width: auto; margin: 10px 10px 0 10px;' type='radio' id='choice2' name='program_selection' value='2'>" > "<label for='choice2'>Choice2</label><br>"; > WiFiManagerParameter custom_field(program_selection_str); > wm.addParameter(&custom_field); > ``` Hey, how do i get the return value from the radio button? when i used strcpy(retval, custom_radiobtn.getValue()); it threw a stack trace exception. @wimmatthijs
Author
Owner

@tablatronix commented on GitHub (Jan 4, 2021):

hmm, maybe make sure its a string first? I will test, but it should be the same as other params..

<!-- gh-comment-id:754032334 --> @tablatronix commented on GitHub (Jan 4, 2021): hmm, maybe make sure its a string first? I will test, but it should be the same as other params..
Author
Owner

@tablatronix commented on GitHub (Jan 4, 2021):

Are you sure you are still in the same scope as WM ?

<!-- gh-comment-id:754057808 --> @tablatronix commented on GitHub (Jan 4, 2021): Are you sure you are still in the same scope as WM ?
Author
Owner

@johnnysamuael commented on GitHub (Jan 4, 2021):

Yeah. I try to retrieve the value in the setup itself.

<!-- gh-comment-id:754058333 --> @johnnysamuael commented on GitHub (Jan 4, 2021): Yeah. I try to retrieve the value in the setup itself.
Author
Owner

@johnnysamuael commented on GitHub (Jan 4, 2021):

Every other parameter type seems to work perfectly. Radio button's Value is returned as null when i directly print it in serial using Serial.print(custom_radiobtn.getValue());

<!-- gh-comment-id:754060249 --> @johnnysamuael commented on GitHub (Jan 4, 2021): Every other parameter type seems to work perfectly. Radio button's Value is returned as null when i directly print it in serial using Serial.print(custom_radiobtn.getValue());
Author
Owner

@johnnysamuael commented on GitHub (Jan 4, 2021):

WM: Handle root
*WM: Scan done
*WM: Johnynet
*WM: -50
*WM: Selva
*WM: -90
*WM: Sent config page
*WM: Request redirected to captive portal
*WM: Handle root
*WM: Request redirected to captive portal
*WM: Handle root
*WM: WiFi save
*WM: Parameter
*WM:
*WM:
*WM: Sent wifi save page
*WM: Connecting to new AP
*WM: Connecting as wifi client...
*WM: Status:
*WM: 0
*WM: [ERROR] WiFi.begin res:
*WM: 6
*WM: Connection result:
*WM: 3

--------------- CUT HERE FOR EXCEPTION DECODER ---------------

Exception (28):
epc1=0x40210c32 epc2=0x00000000 epc3=0x00000000 excvaddr=0x00000000 depc=0x00000000

stack>>>

ctx: cont
sp: 3ffefa40 end: 3ffefcb0 offset: 0190
3ffefbd0: 40201980 00000001 3ffee690 3ffee800
3ffefbe0: 3fffdad0 3ffee690 3ffee6d0 402010a2
3ffefbf0: 00000000 00000000 3ffe8794 00000000
3ffefc00: 6e686f4a 74656e79 88efef00 6167656a
3ffefc10: 6f746e61 88efef00 00000000 00000000
3ffefc20: 0000ccd5 4020c040 00000000 4020c040
3ffefc30: 00000000 4020c040 00000000 4020c040
3ffefc40: 00000000 4020c040 00000000 4020c040
3ffefc50: 00000000 00000001 ffffffff fe000001
3ffefc60: 3ffe88df 00000000 fe010035 00000000
3ffefc70: 00000000 0000000a 3fff065c 00000000
3ffefc80: 00000000 00000000 00000000 3ffe860c
3ffefc90: feefeffe 00000000 3ffee7c0 40208afc
3ffefca0: feefeffe feefeffe 3ffe84e4 40100c09
<<<stack<<<

--------------- CUT HERE FOR EXCEPTION DECODER ---------------

ets Jan 8 2013,rst cause:2, boot mode:(3,6)

<!-- gh-comment-id:754062462 --> @johnnysamuael commented on GitHub (Jan 4, 2021): WM: Handle root *WM: Scan done *WM: Johnynet *WM: -50 *WM: Selva *WM: -90 *WM: Sent config page *WM: Request redirected to captive portal *WM: Handle root *WM: Request redirected to captive portal *WM: Handle root *WM: WiFi save *WM: Parameter *WM: *WM: *WM: Sent wifi save page *WM: Connecting to new AP *WM: Connecting as wifi client... *WM: Status: *WM: 0 *WM: [ERROR] WiFi.begin res: *WM: 6 *WM: Connection result: *WM: 3 --------------- CUT HERE FOR EXCEPTION DECODER --------------- Exception (28): epc1=0x40210c32 epc2=0x00000000 epc3=0x00000000 excvaddr=0x00000000 depc=0x00000000 >>>stack>>> ctx: cont sp: 3ffefa40 end: 3ffefcb0 offset: 0190 3ffefbd0: 40201980 00000001 3ffee690 3ffee800 3ffefbe0: 3fffdad0 3ffee690 3ffee6d0 402010a2 3ffefbf0: 00000000 00000000 3ffe8794 00000000 3ffefc00: 6e686f4a 74656e79 88efef00 6167656a 3ffefc10: 6f746e61 88efef00 00000000 00000000 3ffefc20: 0000ccd5 4020c040 00000000 4020c040 3ffefc30: 00000000 4020c040 00000000 4020c040 3ffefc40: 00000000 4020c040 00000000 4020c040 3ffefc50: 00000000 00000001 ffffffff fe000001 3ffefc60: 3ffe88df 00000000 fe010035 00000000 3ffefc70: 00000000 0000000a 3fff065c 00000000 3ffefc80: 00000000 00000000 00000000 3ffe860c 3ffefc90: feefeffe 00000000 3ffee7c0 40208afc 3ffefca0: feefeffe feefeffe 3ffe84e4 40100c09 <<<stack<<< --------------- CUT HERE FOR EXCEPTION DECODER --------------- ets Jan 8 2013,rst cause:2, boot mode:(3,6)
Author
Owner

@tablatronix commented on GitHub (Jan 4, 2021):

ok then there is a memory bounds or pointer issue there
not sure let me look

<!-- gh-comment-id:754160352 --> @tablatronix commented on GitHub (Jan 4, 2021): ok then there is a memory bounds or pointer issue there not sure let me look
Author
Owner

@wimmatthijs commented on GitHub (Jan 4, 2021):

OK I found the global css description in the strings_en.h file and the issue is because all inputfields are set to width 100%
In the webserver only text inputfields are used which makes sense to give them 100% width.
quick fixes for the problem are: applying the width 100% style only to input[type="text"] in global css
or at least include the inline style needed in the advanced example
Adding folliwing inline style to the radio buttons gives a statisfying result for me:
style='width: auto; margin: 0 10px 0 10px;
Working example :

WiFiManager wm;
const char* program_selection_str = "<p>Please select progam mode:</p>"
  "<input style='width: auto; margin: 0 10px 10px 10px;' type='radio' id='choice1' name='program_selection' value='1'>"
  "<label for='choice1'>Choice1</label><br>"
  "<input style='width: auto; margin: 10px 10px 0 10px;' type='radio' id='choice2' name='program_selection' value='2'>"
  "<label for='choice2'>Choice2</label><br>";
WiFiManagerParameter custom_field(program_selection_str);
wm.addParameter(&custom_field);

Hey, how do i get the return value from the radio button? when i used strcpy(retval, custom_radiobtn.getValue()); it threw a stack trace exception. @wimmatthijs

getValue(); doesnt work for radio buttons, this only works for standardinput fields i believe.
Take a look at the advanced example.

You should be using this method to get any value from the checkbox :


String getParam(String name){
  //read parameter from server, for customhmtl input
  String value;
  if(wm.server->hasArg(name)) {
    value = wm.server->arg(name);
  }
  return value;
}

not sure if that solved the issue?

FYI : i'm running checkboxes now and not radiobuttons so i don't have a functioning example at the moment

<!-- gh-comment-id:754217983 --> @wimmatthijs commented on GitHub (Jan 4, 2021): > > OK I found the global css description in the strings_en.h file and the issue is because all inputfields are set to width 100% > > In the webserver only text inputfields are used which makes sense to give them 100% width. > > quick fixes for the problem are: applying the width 100% style only to input[type="text"] in global css > > or at least include the inline style needed in the advanced example > > Adding folliwing inline style to the radio buttons gives a statisfying result for me: > > `style='width: auto; margin: 0 10px 0 10px;` > > Working example : > > ``` > > WiFiManager wm; > > const char* program_selection_str = "<p>Please select progam mode:</p>" > > "<input style='width: auto; margin: 0 10px 10px 10px;' type='radio' id='choice1' name='program_selection' value='1'>" > > "<label for='choice1'>Choice1</label><br>" > > "<input style='width: auto; margin: 10px 10px 0 10px;' type='radio' id='choice2' name='program_selection' value='2'>" > > "<label for='choice2'>Choice2</label><br>"; > > WiFiManagerParameter custom_field(program_selection_str); > > wm.addParameter(&custom_field); > > ``` > > Hey, how do i get the return value from the radio button? when i used strcpy(retval, custom_radiobtn.getValue()); it threw a stack trace exception. @wimmatthijs getValue(); doesnt work for radio buttons, this only works for standardinput fields i believe. Take a look at the advanced example. You should be using this method to get any value from the checkbox : ``` String getParam(String name){ //read parameter from server, for customhmtl input String value; if(wm.server->hasArg(name)) { value = wm.server->arg(name); } return value; } ``` not sure if that solved the issue? FYI : i'm running checkboxes now and not radiobuttons so i don't have a functioning example at the moment
Author
Owner

@tablatronix commented on GitHub (Jan 5, 2021):

You are using a customhtml param which means it has no id and and no getvalue available, this probably can be fixed to prevent crashes, not sure why its doing that yet( havent looked )

You can use the above method and check args your self, or add a param child class to do it, add your own getValue

OR use 2 inputs, but the name is an issue, i you remove it from the template ( not sure its needed as of now name = id and is aliases, I think some elements and some browsers might need name to be id instead or send forms HTTP envs as name ?

I am working on this atm, reworking some of the html a little bit

<!-- gh-comment-id:754651966 --> @tablatronix commented on GitHub (Jan 5, 2021): You are using a customhtml param which means it has no id and and no getvalue available, this probably can be fixed to prevent crashes, not sure why its doing that yet( havent looked ) You can use the above method and check args your self, or add a param child class to do it, add your own getValue OR use 2 inputs, but the name is an issue, i you remove it from the template ( not sure its needed as of now name = id and is aliases, I think some elements and some browsers might need name to be id instead or send forms HTTP envs as name ? I am working on this atm, reworking some of the html a little bit
Author
Owner

@wimmatthijs commented on GitHub (Jan 5, 2021):

@johnnysamuael
I had this same issue when i tried to add a runtime parameter in the const char* HTML code.
Could this be the problem?

<!-- gh-comment-id:754659960 --> @wimmatthijs commented on GitHub (Jan 5, 2021): @johnnysamuael I had this same issue when i tried to add a runtime parameter in the const char* HTML code. Could this be the problem?
Author
Owner

@tablatronix commented on GitHub (Jan 5, 2021):

I would have to see the code or a min version

<!-- gh-comment-id:754678659 --> @tablatronix commented on GitHub (Jan 5, 2021): I would have to see the code or a min version
Author
Owner

@gotfredsen commented on GitHub (Feb 22, 2022):

I took one of the WiFiManager examples and modified with the above code from @wimmatthijs, thought I should share it here:

#include <WiFiManager.h> // https://github.com/tzapu/WiFiManager
WiFiManager wm;
WiFiManagerParameter custom_mqtt_server("server", "mqtt server", "", 40);

const char* config_str = "<p>Please select circuit configuration:</p>"
                                    "<input style='width: auto; margin: 0 10px 0 10px;' type='radio' id='choice1' name='config_selection' value='STD' checked='checked' ><label for='choice1'>Standard</label><br>"
                                    "<input style='width: auto; margin: 0 10px 0 10px;' type='radio' id='choice2' name='config_selection' value='GS'><label for='choice2'>Ground Station</label><br>"
                                    "<input style='width: auto; margin: 0 10px 0 10px;' type='radio' id='choice3' name='config_selection' value='FS'><label for='choice3'>Flight Station</label><br>"
                                    "<input style='width: auto; margin: 0 10px 0 10px;' type='radio' id='choice4' name='config_selection' value='RELAY'><label for='choice4'>LoRa Relay</label><br>";
WiFiManagerParameter config_field(config_str);

void setup() {
  WiFi.mode(WIFI_STA); // explicitly set mode, esp defaults to STA+AP
  // put your setup code here, to run once:
  Serial.begin(115200);

  //reset settings - wipe credentials for testing
  wm.resetSettings();
  wm.addParameter(&custom_mqtt_server);
  wm.addParameter(&config_field);
  wm.setConfigPortalBlocking(false);
  wm.setSaveParamsCallback(saveParamsCallback);

  //automatically connect using saved credentials if they exist
  //If connection fails it starts an access point with the specified name
  if (wm.autoConnect("AutoConnectAP")) {
    Serial.println("connected...yeey :)");
  }
  else {
    Serial.println("Configportal running");
  }
}

void loop() {
  wm.process();
  // put your main code here, to run repeatedly:
}

void saveParamsCallback () {
  Serial.println("Get Params:");
  Serial.print(custom_mqtt_server.getID());
  Serial.print(" : ");
  Serial.println(custom_mqtt_server.getValue());
  Serial.print("Configuration Selected: ");
  Serial.println(getParam("config_selection"));
}

String getParam(String name) {
  //read parameter from server, for customhmtl input
  String value;
  if (wm.server->hasArg(name)) {
    value = wm.server->arg(name);
  }
  return value;
}

Screenshot:
IMG_5AE6332D17C9-1

<!-- gh-comment-id:1047708779 --> @gotfredsen commented on GitHub (Feb 22, 2022): I took one of the WiFiManager examples and modified with the above code from @wimmatthijs, thought I should share it here: ```c #include <WiFiManager.h> // https://github.com/tzapu/WiFiManager WiFiManager wm; WiFiManagerParameter custom_mqtt_server("server", "mqtt server", "", 40); const char* config_str = "<p>Please select circuit configuration:</p>" "<input style='width: auto; margin: 0 10px 0 10px;' type='radio' id='choice1' name='config_selection' value='STD' checked='checked' ><label for='choice1'>Standard</label><br>" "<input style='width: auto; margin: 0 10px 0 10px;' type='radio' id='choice2' name='config_selection' value='GS'><label for='choice2'>Ground Station</label><br>" "<input style='width: auto; margin: 0 10px 0 10px;' type='radio' id='choice3' name='config_selection' value='FS'><label for='choice3'>Flight Station</label><br>" "<input style='width: auto; margin: 0 10px 0 10px;' type='radio' id='choice4' name='config_selection' value='RELAY'><label for='choice4'>LoRa Relay</label><br>"; WiFiManagerParameter config_field(config_str); void setup() { WiFi.mode(WIFI_STA); // explicitly set mode, esp defaults to STA+AP // put your setup code here, to run once: Serial.begin(115200); //reset settings - wipe credentials for testing wm.resetSettings(); wm.addParameter(&custom_mqtt_server); wm.addParameter(&config_field); wm.setConfigPortalBlocking(false); wm.setSaveParamsCallback(saveParamsCallback); //automatically connect using saved credentials if they exist //If connection fails it starts an access point with the specified name if (wm.autoConnect("AutoConnectAP")) { Serial.println("connected...yeey :)"); } else { Serial.println("Configportal running"); } } void loop() { wm.process(); // put your main code here, to run repeatedly: } void saveParamsCallback () { Serial.println("Get Params:"); Serial.print(custom_mqtt_server.getID()); Serial.print(" : "); Serial.println(custom_mqtt_server.getValue()); Serial.print("Configuration Selected: "); Serial.println(getParam("config_selection")); } String getParam(String name) { //read parameter from server, for customhmtl input String value; if (wm.server->hasArg(name)) { value = wm.server->arg(name); } return value; } ``` Screenshot: ![IMG_5AE6332D17C9-1](https://user-images.githubusercontent.com/2776277/155126973-03adb479-353c-413a-aa79-be9d38450aa5.jpeg)
Author
Owner

@tablatronix commented on GitHub (Feb 22, 2022):

Thanks, yeah i was working on adding to the css for this and no idea what happened or if I even saved the code..
Ill take another look

<!-- gh-comment-id:1047846359 --> @tablatronix commented on GitHub (Feb 22, 2022): Thanks, yeah i was working on adding to the css for this and no idea what happened or if I even saved the code.. Ill take another look
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
starred/WiFiManager#993
No description provided.