mirror of
https://github.com/tzapu/WiFiManager.git
synced 2026-04-27 00:55:52 +03:00
[GH-ISSUE #1158] Advanced Example: Impossible to align radio buttons correctly? #993
Labels
No labels
📶 WiFi
🕸️ HTTP
Branch
DEV Help Wanted
Discussion
Documentation
ESP32
Example
Good First Issue
Hotfix
In Progress
Incomplete
Needs Feeback
Priority
QA
Question
Task
Upstream/Dependancy
bug
duplicate
enhancement
invalid
pull-request
wontfix
No milestone
No project
No assignees
1 participant
Notifications
Due date
No due date set.
Dependencies
No dependencies set.
Reference
starred/WiFiManager#993
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
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?
If i find more time i will investigate further, but i hope maybe somebody has seen this issue before?
thanks,
@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 :
@tablatronix commented on GitHub (Dec 5, 2020):
Thanks, I have not had a chance to look into this at all
@tablatronix commented on GitHub (Dec 6, 2020):
Please add screenshots
@wimmatthijs commented on GitHub (Dec 6, 2020):
Without inline styling :
with inline styling:

@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 )
@johnnysamuael commented on GitHub (Jan 4, 2021):
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 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..
@tablatronix commented on GitHub (Jan 4, 2021):
Are you sure you are still in the same scope as WM ?
@johnnysamuael commented on GitHub (Jan 4, 2021):
Yeah. I try to retrieve the value in the setup itself.
@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());
@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
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 commented on GitHub (Jan 4, 2021):
ok then there is a memory bounds or pointer issue there
not sure let me look
@wimmatthijs commented on GitHub (Jan 4, 2021):
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 :
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 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
@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?
@tablatronix commented on GitHub (Jan 5, 2021):
I would have to see the code or a min version
@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:
Screenshot:

@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