tzapu/WiFiManager

Advanced Example: Impossible to align radio buttons correctly?

Open

#1,158 opened on 2020年12月5日

GitHub で見る
 (18 comments) (0 reactions) (0 assignees)C++ (6,023 stars) (1,854 forks)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
Issue 種別
bug
難度新しい貢献者にとっての実装難度です。1 は非常に小さな変更、5 は専門的な作業です。
2
推定時間経験ある貢献者が調査、実装、テスト、pull request 準備にかけるおおよその時間範囲です。
1-3 hours
活動状況Issue が今どれだけ取り組みやすいかを示します。新しい、活発、古い、ブロック中、またはメンテナー入力待ちなどです。
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.
Advanced Example: Impossible to align radio buttons correctly? · tzapu/WiFiManager#1158 | Good First Issue