tzapu/WiFiManager

Advanced Example: Impossible to align radio buttons correctly?

Open

#1,158 opened on Dec 5, 2020

View on GitHub
 (18 comments) (0 reactions) (0 assignees)C++ (6,023 stars) (1,854 forks)batch import
:spider_web: HTTPGood First Issueenhancement

Description

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,

Contributor guide

Tech stack
chtmlcss
Domain
frontendtooling
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
basic HTML/CSSArduino/ESP8266 development setupfamiliarity with WiFiManager library
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Investigate the alignment issue with radio buttons in the advanced example. First, review the issue comments (18 total) to see if any user has provided a CSS fix or workaround. The HTML injection occurs in the `program selection str` variable in the sketch; the problem is likely due to the default styling applied by the WiFiManager captive portal. Look at the library's CSS files (e.g., in `WiFiManager.cpp` or `web page.h`) where the captive portal styles are defined. Try adding `style='vertical align: middle;'` to the `<input>` and `<label>` elements to align them properly. Also check if the library has an option to use custom CSS or override styles. Reproduce the issue in the Arduino IDE and test the fix.
Advanced Example: Impossible to align radio buttons correctly? · tzapu/WiFiManager#1158 | Good First Issue