troubleshooting Question

Need multi line options in <select>

Avatar of Richard Korts
Richard KortsFlag for United States of America asked on
CSSHTML
12 Comments1 Solution152 ViewsLast Modified:
Trying to find a way to allow a <select> element to have <option> items span multiple lines.

Found this & it looks great: http://jsfiddle.net/ZTs42/2/

Can't get it to work on my situation.

In head section, I have these:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.3.0/jquery.selectBoxIt.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.3.0/jquery.selectBoxIt.min.js"></script>

and this css:

.selectboxit-container .selectboxit, .selectboxit-container .selectboxit-options {
                  width: 400px; /* Width of the dropdown button */
                  border-radius:0;
                  max-height:100px;
            }

            .selectboxit-options .selectboxit-option .selectboxit-option-anchor {
                  white-space: normal;
                  min-height: 30px;
                  height: auto;
            }

This in HTML: (first few options only shown)

<select name="sprop">
                        <option value="">--- Select a Property ---</option>
                                                      <option value="10644" >2300 East Valley Parkway, Space 152, Escondido, 92027-SN: 76018345, test date 02/22/2020</option>
                                                      <option value="10645" >2300 East Valley Parkway, Space 152, Escondido, 92027-SN: AB7593, test date 02/22/2020</option>
                                                      <option value="10647" >2300 East Valley Parkway, Space 152, Escondido, 92027-SN: 98765432, test date 02/22/2020</option>
                                                      <option value="10648" >2300 East Valley Parkway, Space 152, Escondido, 92027-SN: 123ABC465, test date 02/22/2020</option>
                                                      <option value="10646" >2300 East Valley Parkway, Houston, 92027-SN: 98765432, test date 02/22/2020</option>
                                                      <option value="10620" >2300 East Valley Parkway, Space 152, Escondido, 92027-SN: 76018345, test date 02/21/2020</option>
I am almost certain I have to attach a class to the select element but the I don't see it in the jsfiddle.

I did NOT include the jQuery because I don't need the alert.

What's wrong?
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 12 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 12 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros