Avatar of Richard Korts
Richard Korts
Flag for United States of America asked on

How to line break in an <option> element

I have a select element where options are built from parts of a database table rows. The content is typically up to 100 characters in length.

We are trying to build a responsive interface using bootstrap. On the phone version (class="col-xs-n"), the select pulldown extends FAR to the right of the viewable area; to see items requires moving to the right on the phone, a messy and non-professional look.

The customer requires that most of the content (at least 80%) needs to be in each <option>xxx</option> element.

I have tried inserting a line break (<br>) in the middle of the string, doing that only shows the portion AFTER the <br> in the option pulldown.

There must be a way to do this or another technique for showing a pulldown list with VERY lengthy option content.

Suggestions?
CSSHTMLBootstrap

Avatar of undefined
Last Comment
Richard Korts

8/22/2022 - Mon
Daniel Pineault

You can't format the options.  There are hacks using jquery, css ... but by default it is not possible.
Richard Korts

ASKER
Can you reference hacks in jquery or css?

This is a key issue in make the design slick.

Thank you
ASKER CERTIFIED SOLUTION
Daniel Pineault

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Richard Korts

ASKER
Thanks, I think this one looks real good, allows limiting the width & considers both lines as part of the same option, excellent.

http://jsfiddle.net/ZTs42/2/
Your help has saved me hundreds of hours of internet surfing.
fblack61
Daniel Pineault

Very nice.
Richard Korts

ASKER
In looking at this, http://jsfiddle.net/ZTs42/2/

I do not see how the classes defined in the CSS get applied to the select element in the html. I think I will need to apply a class to the select element.

Or does it somehow auto apply these to ALL select boxes on the page?

I added these to the <head> section

<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>

Thanks