Advanced Example: Impossible to align radio buttons correctly? #1158

wimmatthijs · 2020-12-05T16:22:23Z

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,

The text was updated successfully, but these errors were encountered:

wimmatthijs · 2020-12-05T17:24:23Z

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);

tablatronix · 2020-12-05T19:51:55Z

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

tablatronix · 2020-12-06T04:26:01Z

Please add screenshots

wimmatthijs · 2020-12-06T15:04:10Z

Without inline styling :

with inline styling:

tablatronix · 2020-12-18T19:27:24Z

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

johnnysamuael · 2021-01-04T15:07:12Z

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

tablatronix · 2021-01-04T15:12:21Z

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

tablatronix · 2021-01-04T15:57:22Z

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

johnnysamuael · 2021-01-04T15:58:21Z

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

johnnysamuael · 2021-01-04T16:01:50Z

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());

johnnysamuael · 2021-01-04T16:05:36Z

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)

tablatronix · 2021-01-04T19:10:19Z

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

wimmatthijs · 2021-01-04T21:04:47Z

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

tablatronix · 2021-01-05T13:58:19Z

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

wimmatthijs · 2021-01-05T14:12:47Z

@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?

tablatronix · 2021-01-05T14:45:03Z

I would have to see the code or a min version

gotfredsen · 2022-02-22T11:39:12Z

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:

tablatronix · 2022-02-22T14:21:34Z

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

tablatronix added 🕸️ HTTP HTTP Related issue enhancement Feature Request Good First Issue PR for newbs labels Dec 5, 2020

tablatronix added this to the dev milestone Dec 5, 2020

tablatronix pushed a commit that referenced this issue Dec 18, 2020

#1158

0b68256

tablatronix mentioned this issue Jun 13, 2021

Q: Is it possible to have a dropdown menu in config portal? #1104

Closed

4 tasks

drvpn mentioned this issue Jun 21, 2022

Any Way to add Custom Fields to be saved #78

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Advanced Example: Impossible to align radio buttons correctly? #1158

Advanced Example: Impossible to align radio buttons correctly? #1158

wimmatthijs commented Dec 5, 2020 •

edited

Loading

wimmatthijs commented Dec 5, 2020 •

edited

Loading

tablatronix commented Dec 5, 2020

tablatronix commented Dec 6, 2020

wimmatthijs commented Dec 6, 2020 •

edited

Loading

tablatronix commented Dec 18, 2020

johnnysamuael commented Jan 4, 2021

tablatronix commented Jan 4, 2021 •

edited

Loading

tablatronix commented Jan 4, 2021

johnnysamuael commented Jan 4, 2021

johnnysamuael commented Jan 4, 2021

johnnysamuael commented Jan 4, 2021

tablatronix commented Jan 4, 2021

wimmatthijs commented Jan 4, 2021

tablatronix commented Jan 5, 2021

wimmatthijs commented Jan 5, 2021

tablatronix commented Jan 5, 2021

gotfredsen commented Feb 22, 2022 •

edited

Loading

tablatronix commented Feb 22, 2022

Advanced Example: Impossible to align radio buttons correctly? #1158

Advanced Example: Impossible to align radio buttons correctly? #1158

Comments

wimmatthijs commented Dec 5, 2020 • edited Loading

wimmatthijs commented Dec 5, 2020 • edited Loading

tablatronix commented Dec 5, 2020

tablatronix commented Dec 6, 2020

wimmatthijs commented Dec 6, 2020 • edited Loading

tablatronix commented Dec 18, 2020

johnnysamuael commented Jan 4, 2021

tablatronix commented Jan 4, 2021 • edited Loading

tablatronix commented Jan 4, 2021

johnnysamuael commented Jan 4, 2021

johnnysamuael commented Jan 4, 2021

johnnysamuael commented Jan 4, 2021

tablatronix commented Jan 4, 2021

wimmatthijs commented Jan 4, 2021

tablatronix commented Jan 5, 2021

wimmatthijs commented Jan 5, 2021

tablatronix commented Jan 5, 2021

gotfredsen commented Feb 22, 2022 • edited Loading

tablatronix commented Feb 22, 2022

wimmatthijs commented Dec 5, 2020 •

edited

Loading

wimmatthijs commented Dec 5, 2020 •

edited

Loading

wimmatthijs commented Dec 6, 2020 •

edited

Loading

tablatronix commented Jan 4, 2021 •

edited

Loading

gotfredsen commented Feb 22, 2022 •

edited

Loading