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?
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
Last Comment
Richard Korts
You can't format the options. There are hacks using jquery, css ... but by default it is not possible.
ASKER
Can you reference hacks in jquery or css?
This is a key issue in make the design slick.
Thank you
This is a key issue in make the design slick.
Thank you
ASKER CERTIFIED SOLUTION
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.
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/
http://jsfiddle.net/ZTs42/2/
Very nice.
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
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