Dropdown-Liste mit fester Breite schneidet Inhalt im IE ab

Question

Dropdown-Liste mit fester Breite schneidet Inhalt im IE ab

Gefragt el 25 de Marsch, 2009: Wann wurde die Frage gestellt
189959 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Das Problem:

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

Firefox-Verhalten Klicken Sie auf die Auswahl, um die Liste der Dropdown-Elemente anzuzeigen, die an die Breite des längsten Elements angepasst ist.

IE6- und IE7-Verhalten Klicken Sie auf die Auswahl, um die Dropdown-Liste der Elemente anzuzeigen, die auf eine Breite von 145 px beschränkt ist, so dass es unmöglich ist, die längeren Elemente zu lesen.

Die aktuelle UI erfordert, dass wir diese Dropdown in 145px passen und haben es Host-Elemente mit längeren Beschreibungen.

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

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

Ich danke Ihnen!

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 Code für die Select-Eingabe (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>

Gefragt el 25 de Marsch, 2009 von aaandre

1 Stimmen

Diese Frage wurde bereits auf Stack Overflow beantwortet: stackoverflow.com/questions/73960/dropdownlist-width-in-ie

Kommentiert el 25 de Marsch, 2009 von Ron DeVera

0 Stimmen

Vielen Dank für diesen Hinweis. Diese Lösung erfordert die Einbeziehung von massiven Javascript-Bibliotheken, etwas, das ich versuche, zu vermeiden.

Kommentiert el 26 de Marsch, 2009 von aaandre

0 Stimmen

Schauen Sie, ob dies das ist, was Sie vielleicht wollen... dropdown-breite-problem.blogspot.com

Kommentiert el 23 de Juli, 2011 von Nicht registrierter Benutzer

Answer 1

5 Antworten

Answer 2

29voto

rusty Punkte 342

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

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

(Sie müssen die Eigenschaft position festlegen, wenn die Selectbox Teil eines Containers mit fester Breite ist).

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

Beantwortet el 22 de Dezember, 2010 von rusty (342 Punkte )

Answer 3

10voto

Anoop Sharma Punkte 193

Ich habe Google über dieses Problem, aber nicht finden, jede beste Lösung, so erstellt eine Lösung, die gut funktioniert in allen Browsern.

rufen Sie einfach die Funktion badFixSelectBoxDataWidthIE() beim Laden der Seite 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"));

           });
        }
      });
    }
    }

Beantwortet el 30 de Dezember, 2010 von Anoop Sharma (193 Punkte )

Answer 4

7voto

islander Punkte 71

Für eine einfache, Javascript-freie Lösung könnte es je nach Ihren Anforderungen ausreichen, ein title-Attribut zu Ihren <option>s hinzuzufügen, das den Text enthält.

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

Dadurch wird der abgeschnittene Text als Tooltip angezeigt, wenn der Mauszeiger über die <Option> bewegt wird, unabhängig von der Breite der <Auswahl>.

Funktioniert für IE7+.

Beantwortet el 10 de Februar, 2011 von islander (71 Punkte )

Answer 5

7voto

Zac Punkte 12104

Hier ist ein kleines Skript, das Ihnen dabei helfen sollte:

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

Beantwortet el 25 de Marsch, 2009 von Zac (12104 Punkte )

Answer 6

3voto

stukerr Punkte 716

Leider nicht javascriptfrei, aber ich konnte es mit jQuery ziemlich klein machen

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

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

});

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

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

});

Beantwortet el 17 de Juli, 2009 von stukerr (716 Punkte )

Dropdown-Liste mit fester Breite schneidet Inhalt im IE ab

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Dropdown-Liste mit fester Breite schneidet Inhalt im IE ab

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: