表示されているリストにCSSを当てることは出来なさそうなので、
フレームワークで使われているのと同じような手法をとるくらいでしょうか。
(datalistを読み取って別の要素(ul>liとか)で表示させるような動作を作る)
DOM操作はvanilla JavaScriptでも可能なので、自力でできないことはないでしょう。
ただフレームワークがあると言うことは出来なくはないけど、面倒だよ、と言う証明でもあるので、
できる方法はあるが"他を頼る"という方が無難かと思います。
Like!
普通のchromeブラウザでドロップダウンを使うとoptionの数が多い時はスクロールされるようになるのですが, Electronで実行するとスクロールされずに画面外に出てしまいます.
これはelectron(chromium)側のバグでしょうか?
おそらくjquery系のライブラリを使えば可能だと思うのですが, 極力使わずに開発をしたいので, できればそれらを使わない解決策を教えていただきたいです.
上がchromeブラウザで表示したもので, 下がelectronで実行したものです.electronでも上のように表示してほしいです.
macOS Monterey バージョン12.5
Chrome: バージョン: 104.0.5112.79(Official Build) (arm64)
electron: 20.0.1
node: v18.6.0
index.html
<body>
<form action="#">
<input type="text" list="sample" />
</form>
<datalist id="sample">
<option value="hello world"></option>
<option value="hello world"></option>
<option value="hello world"></option>
<option value="hello world"></option>
<!-- たくさんある -->
<option value="hello world"></option>
</datalist>
</body>
main.js
const { app, BrowserWindow } = require("electron");
app.dock.hide();
const createWindow = () => {
const mainWindow = new BrowserWindow({
width: 900,
height: 600,
title: "dropdwon scroll",
});
mainWindow.loadFile("index.html");
};
app.once("ready", () => {
createWindow();
});
app.once("window-all-closed", () => {
app.quit();
});
package.json
"devDependencies": {
"electron": "^20.0.1"
}
かなり昔の記事ですが同様のバグが起きているようです. ここに書いていることを試しましたが, ダメでした.
表示されているリストにCSSを当てることは出来なさそうなので、
フレームワークで使われているのと同じような手法をとるくらいでしょうか。
(datalistを読み取って別の要素(ul>liとか)で表示させるような動作を作る)
DOM操作はvanilla JavaScriptでも可能なので、自力でできないことはないでしょう。
ただフレームワークがあると言うことは出来なくはないけど、面倒だよ、と言う証明でもあるので、
できる方法はあるが"他を頼る"という方が無難かと思います。