HTML选择剪切文本

Question

Ok, as usual, I come here as a last resort after pulling what's left of my hair out and not finding the solution online.

Have a simple table with one row and three cells. Inside two cells are fieldsets (I like the look) containing a <select> and two buttons. Everything looks as I want it, except that the text for the options are cut off.

I've tried resizing the select, but can't find any reference on resizing the option itself.

What am I doing wrong?

The HTML:

 <div id='tabs-1' style='width: 95%;'> <table style='width: 98%; margin-left: auto; margin-right: auto;'> <tr> <td style='width: 33%;text-align: center;'> <fieldset style='height: 300px;width: 90%;'> <legend>Manual</legend> <br> <div style='text-align: center;'> <a href="#" onclick='getPage("SheriffManual")' target="_self"> <img src="images/manualIcon.jpg" alt='Manual' height="65"> <br> Sheriff's Policy and Procedure </a> </div> </fieldset> </td> <td style='width: 33%;text-align: center;'> <fieldset style='height: 300px;width: 90%;'> <legend>Memorandum</legend> <br> <div style='width: 100%;" text-align: center;'> <select style='width: 90%;' size="8" id='selSheriffMemorandum' name="selSheriffMemorandum" value=""> <option value='memorandum/MINIMUM APPLICANT STANDARDS FOR DETENTION, PEACE OFFICERS AND TELECOMMUN.pdf'>Minumum Applicant Standards</option> <option value='memorandum/Memorandum EMPLOYEE SMOKING AREAS.pdf'>Employee Smoking Areas</option> </select> <br><br> <div style='float: left; margin-left: 75px;'> <button>View</button> </div> <div style='float: right; margin-right: 75px;'> <button>Download</button> </div> </div> </fieldset> </td> <td style='width: 33%;text-align: center;'> <fieldset style='height: 300px;width: 90%;'> <legend>Directives</legend> <br> <select size='8' style='width: 90%' id='selSheriffDirectives' name='selSheriffDirectives' value=''> <option value='directives/SHERIFFS DIRECTIVE NO 2015-09-01 WORK PLACE VIOLENCE.pdf'>Workplace Violence</option> <option value='directives/Directive ANNUAL TUBERCULOSIS SCREENING.pdf'>Annual Tuberculosis Screening</option> <option value='directives/Sheriffs Directive No. 02-03 - Bereavement Leave.pdf'>Bereavement Leave</option> <option value='directives/SHERIFFS DIRECTIVE Mental Health Pre-Screening and Diversion NO 2015-01.pdf'>Mental Health Pre-Screening</option> </select> <br><br> <div style='float: left; margin-left: 75px;'> <button>View</button> </div> <div style='float: right; margin-right: 75px;'> <button>Download</button> </div> </fieldset> </td> </tr> </table> </div> 

The result:

UPDATE: I took out all the CSS and javascript for the page, and the select renders as expected. After putting everything back in, I realized that it was jquery.ui.js causing the problems -- I'm using jquery's tabs and it's setting the <select> option width the same as the tab widths. Now I just have to find out what/how I need to override jquery.

Answer 1

How about adding a scrollbar to your select elements?

<select style='width: 90%; overflow: scroll' size="8" id='selSheriffMemorandum' name="selSheriffMemorandum" value="">
...
</select>

Answer 2

Change the height or padding of <option>

option {
    height:8px;
    padding:8px;
}

Answer 3

Turns out there's a simple fix (courtesy of Select box truncating text when body font size changed via javascript on document ready in IE 9 ):

$('select').append(' ');

Forces the select to be redrawn.