SELECT multiple="multiple" not behaving as expected

HTML & CSS
1

Hello, everyone,

I’ve got a form in which I have placed the form elements within individual DIV tags. I’m trying to use SELECT multiple="multiple" size="5", but it’s only displaying ONE option (this is in IE10 and FF and Chrome.)

I’ve kind of hackishly fixed it by giving it a style=“height:80px;” attribute.

I’m not happy with that kind of coding. Any suggestions as to what might cause only one option to appear, even though I set the size to 5?

The div that it is in has a height, so the div isn’t “crushing” it to just one option.

V/r,

:slight_smile:

2

Hello Wolf,

Codepen please. Something we can use as a baseline.

3

You should just be able to do something like this and display the options.

<select name="whatever" multiple>
 option
 option
 option
 option
</select>
4

I’ll try some pseudo-code, here.

<div style="display:table-cell; width:49%; overflow:auto; float:left; height:400px;">
  <label for="aoc">What is your Area of Command?</label>
  <select name="aoc" id="aoc" style="display:block; width:300px;" multiple="multiple" size="5">
    <option value="TC1">TC1</option>
    <option value="TC2">TC2</option>
    <option value="TC3">TC3</option>
    <option value="TC4">TC4</option>
    <option value="TC5">TC5</option>
    <option value="TC10">TC10</option>
    <option value="TC11">TC11</option>
    <option value="TC12">TC12</option>
  </select>
</div>

This will display only one option, even if the size is set to 5.

V/r,

:slight_smile:

5

http://codepen.io/ryanreese09/pen/YPjZaa

6

I just stuck that code in jsbin.com and it displayed five entries for me in Chrome so it definitely works - my best guess would be that it is something else in the page interfering.

7

Yup, you nailed it. I couldn’t think of what else could have been doing this, at first. Then I checked a CSS file.

Someone else slipped a fixed height to all SELECT tags into the CSS file - when I synched down, it wasn’t noticeable until I tried using the MULTIPLE attribute.

Said someone else has been thoroughly scolded. Sorry for bringing this up. Should have checked the CSS files, first.

:slight_smile:

8

I hope it’s not the new guy that you guys have been looking for :stuck_out_tongue: .

9

Heh… no, we’re still waiting for those positions to be filled. This was someone who has been here for a while, and should have known better.

:slight_smile:

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.