tzapu/WiFiManager

Advanced Example: Impossible to align radio buttons correctly?

Open

#1,158 创建于 2020年12月5日

在 GitHub 查看
 (18 评论) (0 反应) (0 负责人)C++ (6,023 star) (1,854 fork)batch import
:spider_web: HTTPGood First Issueenhancement

描述

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,

贡献者指南

技术栈
chtmlcss
领域
frontendtooling
议题类型
bug
难度面向新贡献者的预计实现难度，1 表示很小改动，5 表示专家级工作。
2
预计时间有经验贡献者完成调查、实现、测试并准备 pull request 的粗略时间范围。
1-3 hours
活动状态议题当前的可参与程度：新鲜、活跃、陈旧、阻塞或等待维护者输入。
stale
清晰度议题是否清楚说明期望改动、验收标准和下一步。
mostly clear
前置要求
basic HTML/CSSArduino/ESP8266 development setupfamiliarity with WiFiManager library
新手友好度1-100 的估计分数，表示该议题对首次贡献者的友好程度。
60
研究方向
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.