web-dev-qa-db-fra.com

Comment étendre la largeur de l'option «sélectionner» une fois que l'utilisateur souhaite sélectionner une option

C'est peut-être une question facile, peut-être pas. J'ai une boîte de sélection où je code en dur avec largeur. Dites 120 pixels.

<select style="width: 120px">
  <option>REALLY LONG TEXT, REALLY LONG TEXT, REALLY LONG TEXT</option>
  <option>ABC</option>
</select>

Je veux pouvoir montrer la deuxième option pour que l'utilisateur puisse voir toute la longueur du texte.

Comme tout le reste. Cela fonctionne bien dans Firefox, mais ne fonctionne pas avec Internet Explorer6.

jquerycsshtml-selectcontent-length
26
Berlin Brown

Si vous avez l'option préexistante dans un fixe avec <select>, et si vous ne souhaitez pas modifier la largeur par programme, vous risquez de ne pas avoir de chance à moins d'être un peu créatif.

  • Vous pouvez essayer de définir l'attribut title sur chaque option. Il s'agit d'un code HTML non standard (si vous vous souciez de cette infraction mineure ici), mais IE (et Firefox également) affichera le texte entier dans une fenêtre contextuelle de la souris lors du survol de la souris).
  • Vous pouvez utiliser JavaScript pour afficher le texte dans certains DIV positionnés lorsque l'utilisateur sélectionne quelque chose. À mon humble avis, c'est la manière pas si agréable de le faire, car cela nécessite JavaScript pour fonctionner, et cela ne fonctionne que après que quelque chose ait été sélectionné - avant qu'il n'y ait un changement de valeur, aucun événement ne se déclenche pour la boîte de sélection.
  • Vous n'utilisez pas du tout une boîte de sélection, mais implémentez sa fonctionnalité en utilisant d'autres balises et CSS . Pas mon préféré, mais je voulais le mentionner.

Si vous ajoutez une option longue plus tard via JavaScript, regardez ici: Comment mettre à jour dynamiquement la case HTML "select" dans IE

12
Tomalak

J'ai résolu mon problème avec le code suivant:

<div style="width: 180px; overflow: hidden;">
   <select style="width: auto;" name="abc" id="10">
     <option value="-1">AAAAAAAAAAA</option>
     <option value="123">123</option>
   </select>
</div>

J'espère que cela aide!

À la vôtre, Cychan

14
cychan

Cela imite la plupart des comportements que vous recherchez:

  <!--

     I found this works fairly well.

  -->

  <!-- On page load, be sure that something else has focus. -->
  <body onload="document.getElementById('name').focus();">
  <input id=name type=text>

  <!-- This div is for demonstration only.  The parent container may be anything -->
  <div style="height:50; width:100px; border:1px solid red;">

  <!-- Note: static width, absolute position but no top or left specified, Z-Index +1 -->
  <select
   style="width:96px; position:absolute; z-index:+1;"
   onactivate="this.style.width='auto';"
   onchange="this.blur();"
   onblur="this.style.width='96px';">
  <!-- "activate" happens before all else and "width='auto'" expands per content -->
  <!-- Both making a selection and moving to another control should return static width -->

  <option>abc</option>
  <option>abcdefghij</option>
  <option>abcdefghijklmnop</option>
  <option>abcdefghijklmnopqrstuvwxyz</option>

  </select>

  </div>

  </body>

  </html>

Cela remplacera une partie du comportement des touches.

5
Doug Peil

Je l'ai corrigé dans ma page bootstrap en définissant la largeur minimale et la largeur maximale sur la même valeur dans la sélection, puis en définissant la sélection: focus sur auto.

select {
  min-width: 120px;
  max-width: 120px;
}
select:focus {
  width: auto;
}
<select style="width: 120px">
  <option>REALLY LONG TEXT, REALLY LONG TEXT, REALLY LONG TEXT</option>
  <option>ABC</option>
</select>
3
iansoccer9

Placez-le dans un div et donnez-lui un identifiant

<div id=myForm>

puis créez un css vraiment très simple pour l'accompagner.

#myForm select { 
width:200px; }

#myForm select:focus {
width:auto; }

C'est tout ce dont vous avez besoin.

3
tpham211

Très vieille question mais voici la solution. Ici, vous avez un extrait de travail utilisant jquery. Il utilise un auxiliaire temporaire select dans lequel l'option sélectionnée dans la sélection principale est copiée, de sorte que l'on peut évaluer la vraie largeur que le select principal devrait avoir.

$('select').change(function(){
  var text = $(this).find('option:selected').text()
  var $aux = $('<select/>').append($('<option/>').text(text))
  $(this).after($aux)
  $(this).width($aux.width())
  $aux.remove()
}).change()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option>ABC</option>
  <option>REALLY LONG TEXT, REALLY LONG TEXT, REALLY LONG TEXT</option>
</select>
2
João Pimentel Ferreira

Une solution simple que j'ai utilisée pour un site existant en IE (en utilisant jQuery, mais je peux poster avec du code eventListener si vous ne connaissez vraiment pas bien JS)) est la Suivant:

if (jQuery.browser.msie) {
  jQuery('#mySelect').focus(function() {
    jQuery(this).width('auto');
  }).bind('blur change', function() {
    jQuery(this).width('100%');
  });
};

Bien sûr, utilisez une variable (var cWidth = jQuery('#mySelect').width();) pour stocker la largeur précédente, mais c'est tout ce qui était nécessaire pour que la nôtre fonctionne comme prévu.

1
Eric

Échantillon

function PopulateDropdown() {
    $.ajax({
        type: "POST",
        url: "../CommonWebService.asmx/GetData",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            $("select[id^='MyDropDown']").empty();
            $.each(msg.d, function () {
                $("select[id^='MyDropDownSelect']").append($("<option></option>").val(this['IdIndexDataType']).html(this['DataTypeName']));
            }); 
            $("select[id^='MyDropDown']").css("width", "auto");  
        },
        error: function (e1) {
            alert("Error - " + e1.toString());
        }
    });
}

Le code ci-dessous résoudra votre problème de largeur de liste déroulante en ajoutant ce code après l'insertion des données dans la liste déroulante.

$("select[id^='MyDropDown']").css("width", "auto");
1
Doni

J'ai amélioré la solution du cychan, pour être comme ça:

<html>
<head>

<style>
    .wrapper{
        display: inline;
        float: left; 
        width: 180px; 
        overflow: hidden; 
    }
    .selectArrow{
        display: inline;
        float: left;
        width: 17px;
        height: 20px;
        border:1px solid #7f9db9;
        border-left: none;
        background: url('selectArrow.png') no-repeat 1px 1px;
    }
    .selectArrow-mousedown{background: url('selectArrow-mousedown.png') no-repeat 1px 1px;}
    .selectArrow-mouseover{background: url('selectArrow-mouseover.png') no-repeat 1px 1px;}
</style>
<script language="javascript" src="jquery-1.3.2.min.js"></script>

<script language="javascript">
    $(document).ready(function(){
        $('#w1').wrap("<div class='wrapper'></div>");
        $('.wrapper').after("<div class='selectArrow'/>");
        $('.wrapper').find('select').mousedown(function(){
            $(this).parent().next().addClass('selectArrow-mousedown').removeClass('selectArrow-mouseover');
        }).
        mouseup(function(){
            $(this).parent().next().removeClass('selectArrow-mousedown').addClass('selectArrow-mouseover');
        }).
        hover(function(){
            $(this).parent().next().addClass('selectArrow-mouseover');
        }, function(){
            $(this).parent().next().removeClass('selectArrow-mouseover');
        });

        $('.selectArrow').click(function(){
            $(this).prev().find('select').focus();
        });

        $('.selectArrow').mousedown(function(){
            $(this).addClass('selectArrow-mousedown').removeClass('selectArrow-mouseover');
        }).
        mouseup(function(){
            $(this).removeClass('selectArrow-mousedown').addClass('selectArrow-mouseover');
        }).
        hover(function(){
            $(this).addClass('selectArrow-mouseover');
        }, function(){
            $(this).removeClass('selectArrow-mouseover');
        });
    });

</script>
</head>
<body>
    <select id="w1">
       <option value="0">AnyAnyAnyAnyAnyAnyAny</option>
       <option value="1">AnyAnyAnyAnyAnyAnyAnyAnyAnyAnyAnyAnyAnyAny</option>
    </select>

</body>
</html>

Les fichiers PNG utilisés dans les classes CSS sont téléchargés ici ...

Et vous avez toujours besoin de JQuery .....

0
Saeed

vous pouvez essayer de résoudre en utilisant css uniquement. en ajoutant une classe pour sélectionner

select{ width:80px;text-overflow:'...';-ms-text-overflow:Ellipsis;position:absolute; z-index:+1;}
select:focus{ width:100%;}

pour plus de référence Style de zone de liste dans un élément particulier (option) HTML

Zone de liste de sélection multiple

0
Web Designer cum Promoter

D'accord, cette option est assez hackish mais devrait fonctionner.

$(document).ready( function() {
$('#select').change( function() {
    $('#hiddenDiv').html( $('#select').val() );
    $('#select').width( $('#hiddenDiv').width() );
 }
 }

Ce qui nécessiterait bien sûr une div cachée.

<div id="hiddenDiv" style="visibility:hidden"></div>

ohh et vous aurez besoin de jQuery

0
Pim Jager