Select Multiple > Define “Size”

  • I have a select box with ‘multiple’ enabled so users can select multiple entries. The box has 10 items, but is cut off at 3 items. It’s already a small box, and now users have to scroll inside of it to see all entries.

    In HTML select it’s possible to define a size attribute:

    <select size="10" name="menu-647[]" class="wpcf7-form-control wpcf7-select" aria-invalid="false" multiple="multiple">

    However I don’t see this possibility in CF7.

    Can it be done somehow ?

    • This topic was modified 4 years, 6 months ago by johnny538.
Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    Where can we see the website in question?

    Thread Starter johnny538

    (@johnny538)

    The website is in local development.

    I’m using this in CF7:

    [select menu-647 multiple "Entry" "Entry" "Entry" "Entry" "Entry" "Entry" "Entry" "Entry"]

    You can aslo replicate it in the TryOut Editor here: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select

    With the content:

    <!DOCTYPE html>
<html>
<body>

<h1>The select element</h1>

<p>The select element is used to create a drop-down list.</p>

<form action="/action_page.php">
  <label for="cars">Choose a car:</label>
  <select multiple="multiple" name="cars" id="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

    You can see the output box is just showing 4 items in this case.

    If we can add <select size=”10″ class=””…….

    Then we can adjust the size.

    Plugin Author Takayuki Miyoshi

    (@takayukister)

    You can use the size option in a select form-tag like this:

    [select menu-647 multiple size:10 "Entry" "Entry" "Entry" "Entry" "Entry" "Entry" "Entry" "Entry"]

    Thread Starter johnny538

    (@johnny538)

    Thanks. I’ll try that.

    I looked in the documentation but could not find that info there.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Select Multiple > Define “Size”’ is closed to new replies.