Naveen Kumar V Naveen Kumar V - 5 months ago 8
jQuery Question

HTML - SELECT tag's OPTION partially highlights text

When I select option and scroll horizontally for reading full content, it shows partial content, but deselecting and scrolling shows full content.

How to overcome this? Simple answers are appreciable!

Problem sample:

Horizontally scrolling after selecting option

enter image description here

Horizontally scrolling after deselecting option

enter image description here

EDIT 1:

What actually happening is members are dynamically added to HTML. I use Bootstrap and JQuery frameworks.



<script src="https://code.jquery.com/jquery-2.2.1.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!DOCTYPE html>


<head>
<title> Select - Option example </title>

</head>

<body>
<div class="container">
<form class="row form-horizontal" id="admin_promote_members">

<div class="form-group">
<div class="col-sm-2 col-xs-6">
<h3 style="text-align: center">Admins</h3>
<select class="form-control" id="admin_view_admins" size="10" style="overflow:auto;">
<option value="1">testing1.testing@testingtesting.comExcessTextHidesOnSelecting</option>
<option value="1">testing2.testing@testingtesting.comExcessTextHidesOnSelecting</option>
<option value="1">testing3.testing@testingtesting.comExcessTextHidesOnSelecting</option>
<option value="1">testing4.testing@testingtesting.comExcessTextHidesOnSelecting</option>
<option value="1">testing5.testing@testingtesting.comExcessTextHidesOnSelecting</option>
</select>
<div style="padding-top: 20px; text-align: center;">
<button type="button" class="btn btn-danger" id="admin_admin_demote"><text> &lt;&lt; </text>Demote</button>
</div>
</div>
</div>
</form>
</div>
</body>





EDIT 2 (SOLUTION): As @yuri suggested, chaning CSS to "option { display: table; } solved the problem.

Answer

You can try styling your <option> tags with:

option {display: table}

Fiddle

Take a look also at text-overflow, word-wrap and those text-truncating rules