it-swarm.com.de

Wählen Sie Dropdown mit fester Breite aus, die den Inhalt abschneidet IE

Die Angelegenheit:

Einige Elemente in der Auswahl erfordern mehr als die angegebene Breite von 145 Pixeln, um vollständig angezeigt zu werden.

Firefox Verhalten : Wenn Sie auf "Auswahl" klicken, wird die Dropdown-Elementliste angezeigt, die an die Breite des längsten Elements angepasst ist.

IE6 & IE7 Verhalten : Wenn Sie auf "select" klicken, wird die Dropdown-Elementliste auf 145px beschränkt. Dadurch können die längeren Elemente nicht gelesen werden.

Die aktuelle Benutzeroberfläche erfordert, dass wir diese Dropdown-Liste in 145px einfügen und Host-Elemente mit längeren Beschreibungen haben. 

Irgendwelche Ratschläge zur Lösung des Problems mit dem IE?

Das oberste Element sollte 145px breit bleiben, auch wenn die Liste erweitert wird.

Vielen Dank!

Die css: 

select.center_pull {
    background:#eeeeee none repeat scroll 0 0;
    border:1px solid #7E7E7E;
    color:#333333;
    font-size:12px;
    margin-bottom:4px;
    margin-right:4px;
    margin-top:4px;
    width:145px;
}

Hier ist der select-Eingabecode (zur Zeit gibt es keine Definition für den backend_dropbox-Stil)

<select id="select_1" class="center_pull backend_dropbox" name="select_1">
<option value="-1" selected="selected">Browse options</option>
<option value="-1">------------------------------------</option>
<option value="224">Option 1</option>
<option value="234">Longer title for option 2</option>
<option value="242">Very long and extensively descriptive title for option 3</option>
</select>

Vollständige HTML-Seite für den Fall, dass Sie schnell in einem Browser testen möchten:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dropdown test</title>

<style type="text/css">
<!--
select.center_pull {
    background:#eeeeee none repeat scroll 0 0;
    border:1px solid #7E7E7E;
    color:#333333;
    font-size:12px;
    margin-bottom:4px;
    margin-right:4px;
    margin-top:4px;
    width:145px;
}
-->
</style>
</head>

<body>
<p>Select width test</p>
<form id="form1" name="form1" method="post" action="">
<select id="select_1" class="center_pull backend_dropbox" name="select_1">
<option value="-1" selected="selected">Browse options</option>
<option value="-1">------------------------------------</option>
<option value="224">Option 1</option>
<option value="234">Longer title for option 2</option>
<option value="242">Very long and extensively descriptive title for option 3</option>
</select>
</form>
</body>
</html>
55
aaandre

Für IE 8 gibt es eine einfache reine css-basierte Lösung:

select:focus {
    width: auto;
    position: relative;
}

(Sie müssen die Positionseigenschaft festlegen, wenn das Auswahlfeld einem Container mit fester Breite untergeordnet ist.)

Leider unterstützen IE 7 und weniger den: focus selector nicht.

29
rusty

Ich habe Google zu diesem Problem gemacht, aber keine beste Lösung gefunden. So Created eine Lösung, die in allen Browsern funktioniert.

rufen Sie beim Laden der Seite einfach die Funktion badFixSelectBoxDataWidthIE () auf.

function badFixSelectBoxDataWidthIE(){
    if ($.browser.msie){
      $('select').each(function(){
    if($(this).attr('multiple')== false){
      $(this)
          .mousedown(function(){
               if($(this).css("width") != "auto") {
                   var width = $(this).width();
                   $(this).data("origWidth", $(this).css("width"))
                          .css("width", "auto");
                   /* if the width is now less than before then undo */
                   if($(this).width() < width) {
        $(this).unbind('mousedown');
                       $(this).css("width", $(this).data("origWidth"));
                   }
               }
           })
           /* Handle blur if the user does not change the value */
           .blur(function(){
               $(this).css("width", $(this).data("origWidth"));

           })
           /* Handle change of the user does change the value */
           .change(function(){
               $(this).css("width", $(this).data("origWidth"));

           });
        }
      });
    }
    }
10
Anoop Sharma

Hier ist ein kleines Skript, das Ihnen helfen sollte:

http://www.icant.co.uk/forreview/tamingselect/

7
Zac

Für eine einfache, Javascript-freie Lösung reicht es möglicherweise aus, ein title-Attribut zu Ihren <Option> -Optionen hinzuzufügen, die den Text enthalten, je nach Ihren Anforderungen.

<option value="242" title="Very long and extensively descriptive text">
  Very long and extensively descriptive text
</option>

Dadurch wird der abgeschnittene Text in einem QuickInfo-Modus angezeigt, wenn Sie die Option <Option> schweben, unabhängig von der Breite der Option <Auswahl>. 

Funktioniert für IE7 +.

7
islander

Ich habe keine Angst vor Javascript, aber ich habe es mit jQuery recht klein gemacht

$('#del_select').mouseenter(function () {

    $(this).css("width","auto");

});

$('#del_select').mouseout(function () {

    $(this).css("width","170px");

}); 
3
stukerr

Sie können dieses Plugin einfach für Jquery verwenden;) 

http://plugins.jquery.com/project/skinner

$(function(){
          $('.select1').skinner({'width':'200px'});
});
3
anbi

Kleines, aber hoffentlich nützliches Update für den Code von MainMa & user558204 (Danke Jungs), der die unnötige Schleife entfernt, speichert eine Kopie von $ (this) in einer Variable in jedem Event-Handler, da er mehrfach verwendet wird verwischen und ändern Sie Ereignisse, da sie die gleiche Aktion hatten.

Ja, es ist immer noch nicht perfekt, da die Größe des Auswahlelements geändert wird und nicht nur die Dropdown-Optionen. Aber hey, es hat mich aus der Gurke geholt, ich muss (sehr, sehr leider) immer noch eine IE6-dominante Benutzerbasis im ganzen Unternehmen unterstützen.

// IE test from from: https://Gist.github.com/527683
var ie = (function () {
  var undef, v = 3, div = document.createElement('div'), all = div.getElementsByTagName('i');
  while (
    div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
    all[0]
  );
  return v > 4 ? v : undef;
} ());


function badFixSelectBoxDataWidthIE() {
  if (ie < 9) {
    $('select').not('[multiple]')
      .mousedown(function() {
        var t = $(this);
        if (t.css("width") != "auto") {
          var width = t.width();
          t.data("ow", t.css("width")).css("width", "auto");

          // If the width is now less than before then undo
          if (t.width() < width) {
            t.unbind('mousedown');
            t.css("width", t.data("ow"));
          }
        }
      })

      //blur or change if the user does change the value
      .bind('blur change', function() {
        var t = $(this);
        t.css("width", t.data("ow"));
      });
  }
}
2
TechSpud

Warum sollte jemand ein Mouseover-Ereignis in einer Dropdown-Liste haben? Hier ist eine Möglichkeit, den IE8 so zu manipulieren, wie eine Dropdown-Liste funktionieren sollte:

Lassen Sie uns zunächst sicherstellen, dass wir nur unsere Funktion in IE8 übergeben:

    var isIE8 = $.browser.version.substring(0, 2) === "8.";
    if (isIE8) {
       //fix me code
    }

Um zuzulassen, dass select außerhalb des Inhaltsbereichs expandiert, wickeln wir die Dropdown-Listen in divs mit der korrekten Struktur ein (falls nicht bereits vorhanden) und rufen dann die Hilfsfunktion auf:

        var isIE8 = $.browser.version.substring(0, 2) === "8.";
    if (isIE8) {
        $('select').wrap('<div class="wrapper" style="position:relative; display: inline-block; float: left;"></div>').css('position', 'absolute');

        //helper function for fix
        ddlFix();
    }

Nun zu den Events. Da der IE8 ein Ereignis aus irgendeinem Grund nach dem Fokussieren auslöst, schließt IE das Widget nach dem Rendern, wenn er erweitert wird. Die Problemumgehung besteht darin, an 'focusin' und 'focusout' eine Klasse zu binden, die basierend auf dem längsten Optionstext automatisch erweitert wird. Um eine konstante minimale Breite zu gewährleisten, die nicht über den Standardwert hinaus schrumpft, können Sie die aktuelle Breite der Auswahlliste ermitteln und die Min-width-Eigenschaft der Dropdown-Liste in der 'onchange' Bindung festlegen :

    function ddlFix() {
    var minWidth;

    $('select')

    .each(function () {
        minWidth = $(this).width();
        $(this).css('min-width', minWidth);
    })
    .bind('focusin', function () {
        $(this).addClass('expand');
    })
    .change(function () {
        $(this).css('width', minWidth);
    })
    .bind('focusout', function () {
        $(this).removeClass('expand');
    });
}

Stellen Sie sicher, dass Sie diese Klasse im Stylesheet hinzufügen:

 select:focus, select.expand {
    width: auto;
}
1
Ben Sewards

Ein volles jQuery-Plugin ist verfügbar. Schauen Sie sich die Demo-Seite an: http://powerkiki.github.com/ie_expand_select_width/

haftungsausschluss: Ich habe das Ding codiert, Patches sind willkommen

1
PowerKiKi
for (i=1;i<=5;i++){
   idname = "Usert" + i;
   document.getElementById(idname).style.width = "100%";

}

Ich habe auf diese Weise die Dropdown-Liste angezeigt, wenn die Breite nicht korrekt angezeigt wird.

Es funktioniert für IE6, Firefox und Chrome.

1
keong

eine ähnliche Lösung kann hier gefunden werden, indem Sie mit jquery die automatische Breite beim Scharfstellen (oder Mausklick) und die ursprüngliche Breite beim Verwischen (oder Mauszeiger) http://css-tricks.com/select-cuts-off-options einstellen -in-ie-fix/

1

Ein anderer Versuch:

  1. anstelle eines Auswahlfelds ist es ein Bearbeitungsfeld, das deaktiviert ist, sodass niemand manuell etwas eingeben oder den Inhalt nach der Auswahl ändern kann
  2. eine weitere verborgene Bearbeitung, um eine ID einer ausgewählten Option zu enthalten (siehe unten)
  3. mache eine Schaltfläche [..] und schreibe ein Skript, um dieses div anzuzeigen
  4. machen Sie ein verstecktes div mit absoluter Position unter oder nahe dem Bearbeitungsfeld
  5. machen Sie dieses div so, dass es ein select mit style size = "6" enthält (um 6 Optionen und eine Bildlaufleiste anstelle einer Dropdown-Liste anzuzeigen) und eine Schaltfläche "select" und möglicherweise "cancel"
  6. Formatieren Sie die Breite nicht, damit das Ganze die Breite der breitesten Option oder der Schaltfläche sowie möglicherweise eine Auffüllung Ihrer Wahl annimmt
  7. skript die Schaltfläche "Auswählen", um die ID der ausgewählten Option in das ausgeblendete Bearbeitungsfeld und den Wert in das sichtbare Feld zu kopieren, um auch das div wieder auszublenden.

4 einfache Javascript-Befehle insgesamt.

1
Kitet

Ich habe eine ziemlich einfache Lösung gefunden. Fügen Sie im <select> html-Element die folgenden Eigenschaften hinzu:

onmouseover="autoWidth(this)" 
onblur="resetWidth(this)" 

Immer wenn der Benutzer darauf klickt, wird die Breite automatisch erweitert und der Benutzer verlässt das Auswahlfeld. Die Breite wird auf das Original zurückgesetzt.

1
TheOnlyOne

Für mein Layout wollte ich keinen Hack (keine Vergrößerung der Breite, kein Klick mit Auto und dann das Original). Es hat mein vorhandenes Layout gebrochen. Ich wollte nur, dass es normal funktioniert wie andere Browser. 

Ich fand das genau so: -

http://www.jquerybyexample.net/2012/05/fix-for-ie-select-dropdown-mit-fixed.html

0
Steve

Ich habe noch einen weiteren Beitrag dazu. Ich habe dies vor einiger Zeit geschrieben, dass Sie hilfreich sein könnten: http://dpatrickcaldwell.blogspot.com/2011/06/giantdropdown-jquery-plugin-for-styling.html

Es ist ein Jquery-Plug-In, das eine stilisierte, ungeordnete Liste erstellt, die durch das ausgeblendete select-Element gesichert wird.

Die Quelle befindet sich auf github: https://github.com/tncbbthositg/GiantDropdown

Sie können Verhaltensweisen und Stile im UL behandeln, die Sie mit SELECT nicht erreichen können. Alles andere sollte gleich sein, da die Auswahlliste immer noch vorhanden ist. Sie wird nur ausgeblendet, wird aber von UL als Sicherungsdatenspeicher verwendet (wenn Sie möchten).

0
D. Patrick

Eine Problemumgehung, wenn Sie sich nach der Auswahl einer Option nicht für die seltsame Ansicht interessieren (d. H. Auswählen, um zu einer neuen Seite zu springen)

<!-- Limit width of the wrapping div instead of the select and use 'overflow: hidden' to hide the right part of it. -->
<div style='width: 145px; overflow: hidden; border-right: 1px solid #aaa;'>
  <select onchange='jump();'>
    <!-- '&#9660;(▼)' produces a fake dropdown indicator -->
    <option value=''>Jump to ... &#9660;</option>
    <option value='1'>http://stackoverflow.com/questions/682764/select-dropdown-with-fixed-width-cutting-off-content-in-ie</option>
    ...
  </select>
</div>
0
Mergen Wu

Hier ist eine Lösung, die tatsächlich funktioniert. 

Es legt die Breite in IE fest und stört das Seitenlayout nicht. Das Dropdown-Menü wird nicht geschlossen, wenn Sie mit der Maus über die Auswahloptionen fahren. 

Sie müssen jedoch den Wert für margin-right und die Breite ändern, um den Angaben für Ihre Auswahlfelder zu entsprechen. 

Sie können auch $('select') durch $('#Your_Select_ID_HERE') ersetzen, um nur ein bestimmtes Auswahlfeld auszuführen. Außerdem müssen Sie die Funktion fixIESelect() am Rumpf onload oder über jQuery mit DOM ready aufrufen, wie ich es in meinem folgenden Code getan habe:

//////////////////////////
// FIX IE SELECT INPUT //
/////////////////////////
window.fixIESelect_clickset = false;
function fixIESelect()
{
 if ($.browser.msie)
 {
  $('select').mouseenter(function ()
  {
   $(this).css("width","auto");
   $(this).css("margin-right","-100");
  });
  $('select').bind('click focus',function ()
  {
   window.fixIESelect_clickset = true;
  });
  $('select').mouseout(function ()
  {
   if(window.fixIESelect_clickset != true)
   {
    $(this).css("width","93px");
    window.fixIESelect_clickset = false;
   }
  });
  $('select').bind('blur change',function ()
  {
   $(this).css("width","93px");
  });
 }
}
/////////////
// ONLOAD //
////////////
$(document).ready(function()
{
 fixIESelect();
});
0
Gallagher

Eine reine css-Lösung: http://bavotasan.com/2011/style-select-box-using-only-css/

.styled-select select {
   background: transparent;
   width: 268px;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;
   }

.styled-select {
   width: 240px;
   height: 34px;
   overflow: hidden;
   background: url(http://cdn.bavotasan.com/wp-content/uploads/2011/05/down_arrow_select.jpg) no-repeat right #ddd;
   border: 1px solid #ccc;
   }
<div class="styled-select">
   <select>
      <option>Here is the first option</option>
      <option>The second option</option>
   </select>
</div>

0
Teenage

Ich wollte, dass dies mit Selects funktioniert, die ich dynamisch zur Seite hinzugefügt habe. Nach langem Experimentieren gab ich schließlich alle Selects, die ich mit der Klasse "fixedwidth" machen wollte, und fügte dann folgendes CSS hinzu:

table#System_table select.fixedwidth { width: 10em; }
table#System_table select.fixedwidth.clicked { width: auto; }

und dieser Code

<!--[if lt IE 9]>
    <script type="text/javascript">
        jQuery(document).ready(function() {
            jQuery(document).on(
              {
                'mouseenter': function(event) {
                    jQuery(this).addClass('clicked');
                    },
                'focusout change blur': function() {
                    jQuery(this).removeClass('clicked');
                    }
              }, 'select.fixedwidth');
        });
    </script>
<![endif]-->

Ein paar Dinge zu beachten:

  • Obwohl meine selects alle in einer Tabelle sind, musste ich "on" für die jQuery(document).on machen, anstatt für jQuery('table#System_table').on.
  • Obwohl in der jQuery-Dokumentation "mouseleave" anstelle von "blur" verwendet wird, habe ich festgestellt, dass in IE7 beim Verschieben der Maus in der Dropdown-Liste ein mouseleave-Ereignis, aber kein blur angezeigt würde.
0
Paul Tomblin

Die Jquery BalusC's Lösung wurde von mir verbessert. Auch verwendet: Brad Robertson Kommentar hier .

Geben Sie dies einfach in eine .js-Datei ein, verwenden Sie die breite Klasse für Ihre gewünschten Kombinationen und schmieden Sie sich nicht, um ihr eine ID zu geben. Rufen Sie die Funktion im onload (oder documentReady oder was auch immer) auf.
Als einfacher Arsch das :)
Als minimale Länge wird die von Ihnen definierte Breite verwendet.

function fixIeCombos() {
    if ($.browser.msie && $.browser.version < 9) {
    var style = $('<style>select.expand { width: auto; }</style>');
    $('html > head').append(style);

    var defaultWidth = "200";

    // get predefined combo's widths.
    var widths = new Array();
    $('select.wide').each(function() {
        var width = $(this).width();
        if (!width) {
        width = defaultWidth;
        }
        widths[$(this).attr('id')] = width;
    });

    $('select.wide')
    .bind('focus mouseover', function() {
        // We're going to do the expansion only if the resultant size is bigger
        // than the original size of the combo.
        // In order to find out the resultant size, we first clon the combo as
        // a hidden element, add to the dom, and then test the width.
        var originalWidth = widths[$(this).attr('id')];

        var $selectClone = $(this).clone();
        $selectClone.addClass('expand').hide();
        $(this).after( $selectClone );
        var expandedWidth = $selectClone.width()
        $selectClone.remove();
        if (expandedWidth > originalWidth) {
        $(this).addClass('expand').removeClass('clicked');
        }
    })
    .bind('click', function() {
        $(this).toggleClass('clicked'); 
    })
    .bind('mouseout', function() {
        if (!$(this).hasClass('clicked')) {
        $(this).removeClass('expand');
        }
    })
    .bind('blur', function() {
        $(this).removeClass('expand clicked');
    })
    }
}
0
Federico Valido

Es wurde in allen Versionen von IE, Chrome, FF und Safari getestet

// JavaScript-Code

    <script type="text/javascript">
    <!-- begin hiding
    function expandSELECT(sel) {
      sel.style.width = '';
    }
    function contractSELECT(sel) {
      sel.style.width = '100px';
    }
    // end hiding -->
    </script>

// Html code

    <select name="sideeffect" id="sideeffect"  style="width:100px;" onfocus="expandSELECT(this);" onblur="contractSELECT(this);" >
      <option value="0" selected="selected" readonly="readonly">Select</option>
    <option value="1" >Apple</option>
    <option value="2" >Orange + Banana + Grapes</option>
0
Arif

Nicht javascript-frei, ich habe auch Angst und meine Lösung erfordert eine js-Bibliothek. Sie können jedoch nur die Dateien verwenden, die Sie benötigen, anstatt sie alle zu verwenden. Vielleicht sind sie am besten für diejenigen geeignet, die bereits YUI für ihre Projekte verwenden oder welche entscheiden zu verwenden. Schauen Sie unter: http://ciitronian.com/blog/programming/yui-button-mimicking-native-select-dropdown-avoid-width-width/

In meinem Blog-Beitrag werden auch andere Lösungen beschrieben. Auf stackoverflow wird hier noch einmal verwiesen. Warum ich zurückgegangen bin, um mein eigenes SELECT-Element zu erstellen, ist aus einfachen Gründen. Ich mag keine Mouseover-Erweiterungsereignisse. Vielleicht, wenn das auch anderen hilft!

0
Hammad Tariq