Naveen Kumar V Naveen Kumar V - 1 year ago 36
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


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

<script src=""></script>
<link href="" rel="stylesheet"/>
<script src=""></script>

<!DOCTYPE html>

<title> Select - Option example </title>


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

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

Answer Source

You can try styling your <option> tags with:

option {display: table}


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