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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

リストボックス

ユーザーがリストから1つ以上のアイテムを選択できるようにするGUI要素です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

0回答

2693閲覧

React Material-UIのNativeSelectの高さ変更方法について

Takumi-Y

総合スコア0

Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

リストボックス

ユーザーがリストから1つ以上のアイテムを選択できるようにするGUI要素です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2021/08/15 16:04

編集2022/01/12 10:55

前提・実現したいこと

React、Javascript初心者なので、必要な情報が足りないかもしれません。
すみませんが、足りない情報があればご教示お願い致します。

ReactでMaterial-UIのNativeSelectについて質問があります。

親要素いっぱいにSelectのリストを表示したいです。
現在は高さが固定されていてスクロールバーが出てしまいます。

NativeSelectではなくても構わないので、
ドロップダウンのような形式ではなくNativeSelectのような初めからリストが表示されていて、
複数選択できるようなものがあればご紹介いただきますとうれしいです。

該当のソースコード

React

1import React from 'react'; 2import { makeStyles, useTheme } from '@material-ui/core/styles'; 3import InputLabel from '@material-ui/core/InputLabel'; 4import FormControl from '@material-ui/core/FormControl'; 5import Select from '@material-ui/core/Select'; 6 7const useStyles = makeStyles((theme) => ({ 8 formControl: { 9 margin: theme.spacing(1), 10 minWidth: 120, 11 maxWidth: 300, 12 }, 13 chips: { 14 display: 'flex', 15 flexWrap: 'wrap', 16 }, 17 chip: { 18 margin: 2, 19 }, 20 noLabel: { 21 marginTop: theme.spacing(3), 22 }, 23 selectArea: { 24 height: '100%', 25 }, 26})); 27 28const names = [ 29 'Oliver Hansen', 30 'Van Henry', 31 'April Tucker', 32 'Ralph Hubbard', 33 'Omar Alexander', 34 'Carlos Abbott', 35 'Miriam Wagner', 36 'Bradley Wilkerson', 37 'Virginia Andrews', 38 'Kelly Snyder', 39]; 40 41export default function MultipleSelect() { 42 const classes = useStyles(); 43 const theme = useTheme(); 44 const [personName, setPersonName] = React.useState([]); 45 46 const handleChangeMultiple = (event) => { 47 const { options } = event.target; 48 const value = []; 49 for (let i = 0, l = options.length; i < l; i += 1) { 50 if (options[i].selected) { 51 value.push(options[i].value); 52 } 53 } 54 setPersonName(value); 55 }; 56 57 return ( 58 <div> 59 <FormControl className={classes.formControl}> 60 <InputLabel shrink htmlFor="select-multiple-native"> 61 Native 62 </InputLabel> 63 <Select 64 className={classes.selectArea} {* ←height:100%を指定しました。 *} 65 multiple 66 native 67 value={personName} 68 onChange={handleChangeMultiple} 69 inputProps={{ 70 id: 'select-multiple-native', 71 size: 28, {* ←頂いた内容を反映しました。 *} 72 }} 73 > 74 {names.map((name) => ( 75 <option key={name} value={name}> 76 {name} 77 </option> 78 ))} 79 </Select> 80 </FormControl> 81 </div> 82 ); 83}

試したこと

公式ページのデモやprops一覧を参考にしているのですが、高さの変更方法がわからなくて詰まっています。

補足情報

初めての質問なので、不足している情報等あれば教えてください。

よろしくお願いします。

現在の画面のキャプチャを取ったので掲載します。
イメージ説明

変更後:
イメージ説明

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

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

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

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

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

hoshi-takanori

2021/08/15 22:47

Select の inputProps に size を指定すれば良いかも。 inputProps={{ id: 'select-multiple-native', size: 10, }}
Takumi-Y

2021/08/16 01:16

hoshi-takanoriさん ありがとうございます! inputPropsにsizeを指定することでできました! しかし色々試してみたのですが、親要素に対して100%の高さ指定ができず…。 sizeは文字数?の単位以外に指定できないのでしょうか?
hoshi-takanori

2021/08/16 01:45

Select の size は項目数にして、親要素を overflow-y: scroll するとか…。
Takumi-Y

2021/08/16 02:58

hosi-takanoriさん <Select>のheightを100%に指定したところ、思っていた表示になりました! 本当にありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問