eingabetyp = bereich dehnt sich nicht in Firefox

Hier ist ein Beispiel. Ich möchte den Schieberegler auf die gesamte Breite des übergeordneten Containers gestreckt haben. Der Code unten sieht so aus, wie ich es in Chrome möchte, aber in Firefox ist der Schieberegler nicht dehnbar. Ich kann jedoch keine Fehler auf ihrem Tracker finden, die gegen dieses Problem offen sind, vielleicht verpasse ich etwas?eingabetyp = bereich dehnt sich nicht in Firefox

#block { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
    background-color: green; 
 
    align-items: stretch; 
 
} 
 

 
input { 
 
    background-color: yellow; 
 
}

<div id=block> 
 
    <input type=range /> 
 
</div>

Quelle

2017-06-13 Grief

Bitte überprüfen und auf meine Antwort kommentieren, und lassen Sie mich wissen, wenn etwas unklar ist oder fehlt. Wenn nicht, dann wäre es großartig, wenn Sie die Antwort akzeptieren könnten, die Ihnen am meisten geholfen hat. – LGSon

A flex Behälter mit Spalte Richtung und als Standardwert von align-itemsstretch ist, wird die Flex Elemente dehnen Behälter entlang seiner Querachse zu füllen, die gleich ist wie seine Breite.

Also in Ihrem Fall sollte es so wie es ist funktionieren, obwohl in Firefox, Edge und IE das nicht der Fall ist. Sie alle benötigen width: 100% für die input vom Typ range, um den Container zu füllen.

Als Vergleich input vom Typ text und checkbox und textarea, tun Cross-Browser-strecken, aber wieder input von typ checkbox nicht in Firefox.

Ob Firefox (und Edge/IE) korrekt ist oder einen Fehler hat kann ich noch nicht sagen. Ich habe überall gesucht und kann keine direkte Antwort darauf finden, aber sobald ich das tue, werde ich diese Antwort aktualisieren.

So wie heute, empfehle ich, die Breite auf 100% einzustellen, und wenn Chrome korrekt ist, ist kein Schaden entstanden und es kann später entfernt werden.

#block { 
 
    /* width: 100%;    not needed since it is the default */ 
 
    height: 100%;    /* as its parent doesn't have a height, 
 
           this doesn't do anything */ 
 
    display: flex; 
 
    flex-direction: column; 
 
    background-color: green; 
 
    /* align-items: stretch;  this is the defalt and can be omitted */ 
 
} 
 

 
input, textarea, span { 
 
    background-color: yellow; 
 

 
    width: 100%;    /* make FF/Edge/IE stretch input range */ 
 
    
 
    margin: 0;    /* remove any default margin an element might have */ 
 
    padding: 0;    /* remove any default padding an element might have */ 
 

 
    box-sizing: border-box; /* include border an element might have in the set width */ 
 
}

<div id=block> 
 
    <input type=range /> 
 
    
 
    <!-- added these for comparison --> 
 
    <input type=checkbox /> 
 
    <input type=text value="Input text"/> 
 
    <textarea>Textarea</textarea> 
 
    <span>Span</span> 
 
    
 
</div>

Quelle

2017-06-13 13:34:37 LGSon

In der ersten Variante haben Sie vergessen, 'margin: 0' hinzuzufügen, wie es @Tobi in einer anderen Antwort getan hat. Die zweite Variante passt nicht zu meinen Bedürfnissen - ich brauche vertikales Biegen. Allerdings beantwortet es die Frage nicht - ist es ein Bug in Firefox oder was? – Grief

@Grief Aktualisierte meine Antwort – LGSon

Sie haben die Breite des <input> Tag auf 100% gesetzt zu bekommen, was Sie wollen!

#block { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
    background-color: green; 
 
    padding: 0; 
 
} 
 

 
input { 
 
    background-color: yellow; 
 
    width: 100%; 
 
    margin: 0; 
 
}

<div id=block> 
 
    <input type=range /> 
 
</div>

Quelle

2017-06-13 11:53:26 Tobi

Sie haben auch 'margin: 0' hinzugefügt, weil ohne diese Eingabe der Container überläuft. Es ist besser, das Zwischenprodukt "div" so zu machen, dass es nicht von Null verschiedene Ränder hat. Es beantwortet jedoch nicht die Frage, ist es ein Fehler in Firefox oder verwende ich das flexbox-Modell falsch? – Grief

eingabetyp = bereich dehnt sich nicht in Firefox

Antwort

Verwandte Themen