We help IT Professionals succeed at work.

How to line break in an <option> element

Richard Korts
Richard Korts asked
on
6 Comments
1 solution
Medium Priority
45 Views
Last Modified: 2020-03-09
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?
Comment
Watch Question

View Solution Only

Daniel PineaultPresident / Owner CARDA Consultants Inc.
CERTIFIED EXPERT
Distinguished Expert 2018

Commented:
You can't format the options.  There are hacks using jquery, css ... but by default it is not possible.
Richard KortsBusiness Owner / Chief Developer

Author

Commented:
Can you reference hacks in jquery or css?

This is a key issue in make the design slick.

Thank you
President / Owner CARDA Consultants Inc.
CERTIFIED EXPERT
Distinguished Expert 2018
Commented:
This is not something I've tried, but here's on thread that discusses some hacks, refer to https://stackoverflow.com/questions/2864238/line-break-in-html-select-option
Richard KortsBusiness Owner / Chief Developer

Author

Commented:
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/
Daniel PineaultPresident / Owner CARDA Consultants Inc.
CERTIFIED EXPERT
Distinguished Expert 2018

Commented:
Very nice.
Richard KortsBusiness Owner / Chief Developer

Author

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