Выравнивание текста в выбранных опциях - PullRequest
Новая
       2

Выравнивание текста в выбранных опциях

3 голосов
/ 19 февраля 2012

Мне нужно выровнять текст внутри выпадающего списка (выбрать / опция).Мне удалось заставить его работать в Firefox 10, но не в Chromiun 16.

Firefox и Chrome:

firefox chrome

Проблема с Chromiun заключается в том, чтовозвращаемая ширина элемента всегда равна нулю: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
    <select id="the_select" onchange="setWidth();">
        <option value="1">Red 12,098</option>
        <option value="2">Green 234</option>
        <option value="3">Blue 2,120</option>
        </select>
    <select id="stub" style="">
        <option id="o"></option>
        </select>
</body>
</html>
<script type="text/javascript">
    function setWidth() {
        $('#stub').css('display', 'block');
        var width, selectedWidth, maxWidth = 0;
        var optionText
        var extraPixels = 15;
        var $o = $('#the_select option');
        $o.each(function(){ 
            optionText = $(this).text();
            width = $('#o').html(optionText).width();
            if (width > maxWidth) maxWidth = width + extraPixels;
            if ($(this).prop('selected')) {
                selectedWidth = width;
                }
            });
        $('#the_select').css('word-spacing', maxWidth - selectedWidth + 'px');
        $o.each(function(){
            optionText = $(this).text();
            width = $('#o').html(optionText).width();
            extraPixels = maxWidth - width;
            $(this).css('word-spacing', extraPixels + 'px');
            });
        $('#stub').css('display', 'none');
        }
    $(document).ready(setWidth);
    </script>

Как заставить его работать и в Chrome?

1 Ответ

1 голос
/ 20 февраля 2012

Эта версия работает в Firefox 10 и Chromium 16. Она не работает в IE 9, потому что свойство css word-spacing не действует внутри <select>. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
    <select id="the_select" onchange="justify();">
        <option value="1">Red 234</option>
        <option value="2">Green 12,098</option>
        <option value="3">Blue 2,120</option>
        </select>
    <select id="stub" style="display:none;"><option></option></select>
</body>
</html>
<script type="text/javascript">
    function justify() {
        $('#stub').css('display', 'block');
        var selectedWidth, maxWidth = 0;
        var width = [];
        var extraPixels = 15;
        $('#the_select option').each(function(){
            $('#stub option').html($(this).html());
            width.push($('#stub').outerWidth());
            if (width[width.length - 1] > maxWidth) 
                maxWidth = width[width.length - 1] + extraPixels;
            if ($(this).prop('selected')) 
                selectedWidth = width[width.length - 1];
            });
        $('#stub').css('display', 'none');
        $('#the_select')
            .css('word-spacing', maxWidth - selectedWidth + 'px')
            .css('width', maxWidth + 'px');
        $('#the_select option').each(function(){
            extraPixels = maxWidth - width.shift();
            $(this).css('word-spacing', extraPixels + 'px');
            });
        }
    $(document).ready(justify);
    </script>
...