質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

5回答

10645閲覧

セレクトボックスの表示が上に表示されてしまう

退会済みユーザー

退会済みユーザー

総合スコア0

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/08/22 04:21

編集2019/08/26 01:04
コード<th>都道府県</th> <td>  <select class="input-sm half_width" style="width: 90%;"> <option value="0" selected="selected"><span name="">都道府県を選択してください</span></option> <option value="1">北海道</option> <option <option value="47">沖縄県</option> </select> </td> <th>国</th>  <td>  <select style="width: 90%;"> <option value="0" selected="selected">日本</option> <option value="1" ></option>      </select> </td>

都道府県のプルダウンリストがどうして下ではなく上向きに表示されてしまうのか、わからないです。
自動でそうなってしまっているんでしょうか?
下表示に変えたいのですが、どうしたらいいでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/08/22 04:22

状況が良く分かりません。 HTMLもなるべく構文ミスのないもの、半端ではないものを提示してください。
m.ts10806

2019/08/22 04:24

ブラウザの仕様的に「こうなれば上にでる」はありますが、それが質問者さんの状況と同じか分かる情報がないので、画面キャプチャなどご提示ください。
退会済みユーザー

退会済みユーザー

2019/08/22 04:27

実行結果です。みれますでしょうか?
m.ts10806

2019/08/22 04:30

下に出ますが。
m.ts10806

2019/08/22 04:31

画面キャプチャご提示ください。
退会済みユーザー

退会済みユーザー

2019/08/22 04:34

設定でキャプチャできないのですがどうしたらいいでしょうか?
azuapricot

2019/08/22 04:34

画面幅が小さいと上に出るっていう質問ぽいですな
yxt003

2019/08/22 04:34

セレクトボックスは基本的には下に出るが、はみ出す場合は上に出る仕様じゃなかったですか?
退会済みユーザー

退会済みユーザー

2019/08/22 04:34

都道府県のセレクトボックスは上に表示されているはずなのですが、下になってますか?
退会済みユーザー

退会済みユーザー

2019/08/22 04:36

そうなんですね!ありがとうございます。その場合は下に表示はむずかしいでしょうか?
m.ts10806

2019/08/22 04:37

画面上かなーり下にあってセレクトボックスが出ても画面からはみであるような場合は上に出るというブラウザの仕様はありますが、充分な幅があれば下です。 >設定でキャプチャできない プリントスクリーン機能(Windows)で私はいけましたけど、その設定って何でしょうか。
azuapricot

2019/08/22 04:37

セレクトボックスを使いたいときはそういう仕様らしいのでどうしても下固定にしたいなら自分で頑張って作るしかないかもしれませんねー
退会済みユーザー

退会済みユーザー

2019/08/22 04:38

私用ではないので、できなくしてあります。
退会済みユーザー

退会済みユーザー

2019/08/22 04:39

幅は変えられないのですが、その場合は widthなどで調整するしかないでしょうか?
退会済みユーザー

退会済みユーザー

2019/08/22 04:40

りょうかいしました。
guest

回答5

0

使用機種、OS、ブラウザの種類とバージョンによるでしょう
基本的にはブラウザが最適な見せ方を判断して表示します
例示のcodepenのページもブラウザや表示している高さによって
上に出たり下に出たりまちまちでした

投稿2019/08/22 04:36

編集2019/08/22 04:39
yambejp

総合スコア114757

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

CSSフレームワークでは見た目を整えるためULなど別タグに置き換えていますが
例:Materialize-select
こちらもselectと同じく画面からはみ出ないように上に出たり下に出たり調整してくれています。

常時下に出ていては、画面下部で起動したときにすべての選択項目が見れなくなるとかそういう事情はあるのではないでしょうか。

どうしてもというのでしたらiPhoneなどで用いられているドラムロール式という手がないわけではないですが、これはこれで選択肢が多ければ多いほど、画面内で見ることのできる選択肢が少なくなります。
セレクトボックスの多用はなるべくやめるべきという意見もあります。

要は、多い選択肢をなるべく画面内で全て見せるというブラウザ側の配慮です。

セレクトボックスは確かに選択肢を隠すことができてレイアウトの余裕を持たせることはできるかもしれませんが、使う側からすると選択肢が見えないというのは使い勝手の悪さを感じるところでもあります。

選択項目の内容や要件から表示の仕方を工夫する必要はありそうです。

投稿2019/08/22 05:23

m.ts10806

総合スコア80848

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ど~~~~~~~~~~~~~しても下に出したい!っていうなら size入れるしかないんじゃないかなと

HTML

1<select size="5" class="input-sm half_width" name="m_item__testing_type" style="width: 90%;">

イメージ説明

投稿2019/08/22 04:41

編集2019/08/22 04:42
azuapricot

総合スコア2341

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/08/22 05:35

ありがとうございます。sizeを入れたら下にスクロールできるようになりましたが、jsfiddle.net上ではキャプチャとおなじようになりましたが、エクリプス上で試しましたところ、tdが下に表示が少ししかされず、セレクトボックスを押したときの範囲が、拡大しませんでした。ググってみたのですが、解決方法がわからないのですが、何が原因でしょうか?thにもサイズ指定もしていないです。
azuapricot

2019/08/22 05:43

スクリーンショットなど質問に追記できるなら追記しましょう。 データとかちゃんとはいってますよね?
退会済みユーザー

退会済みユーザー

2019/08/22 05:46

スクショができないように設定されていてはれないです。コードはすべて上記とおなじですね。
azuapricot

2019/08/22 05:48

スクショができないように設定されていてってどういうことですか? フリーのキャプチャソフトとかでも無理ですか?SnippingToolとか。
退会済みユーザー

退会済みユーザー

2019/08/22 05:49

SnippingToolはダウンロードしないように上から言われてまして、、
azuapricot

2019/08/22 05:55

えーめんどくさい現場ですね・・・・。 size を入れる前は問題なくプルダウン出来ていたけど sizeを入れたらプルダウンできなくなったってことでしょーか
退会済みユーザー

退会済みユーザー

2019/08/22 05:59

下にスクロールはできるのですが、幅が1項目分しか表示されていない状態です。。
azuapricot

2019/08/22 06:06

sizeを入れる前と入れたあとで挙動が変わったかそうじゃないかわかります?
退会済みユーザー

退会済みユーザー

2019/08/22 06:14

sizeを入れる前は項目が上にのびて表示されましたが、sizeを入れてからは上に表示されることはなくなりましたが、項目が広がってひょうじされなくなりました。ほとんど1項目しか表示されず、一番下までいくのに何度も矢印をクリックするしかない状態です。
退会済みユーザー

退会済みユーザー

2019/08/23 02:33

ul liタグに変更して試してみたりしてみましたが、デザインがセレクトボックスとで合わなかったりとかなり調整がむずかしかったです。ほかでsizeでためすと下に表示されましたが、なぜsizeが意図したとおりに動かないのかわからないです。
guest

0

ベストアンサー

すいません、全角のスペースが消えたら下に表示されるようになりました。全角のスペースがはいっていたためでした。いろいろおしえて頂きありがとうございました。

投稿2019/08/23 08:58

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

自動でそうなってしまっているんでしょうか?

そうです。コメントや回答にもあるように「仕様」です。
基本的に下側ですが、要素の位置により下側だと表示しきれない場合には、上側に出ます。
※要素が下側にあるのに、さらに下側に出ると、不便ですよね。その対策だと思われます。


下表示に変えたいのですが、どうしたらいいでしょうか?

要素の下側に他の要素やスペース等を作るしかないかと思います。

投稿2019/08/22 09:12

yoshinavi

総合スコア3523

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問