Django: Länge des Input-Feldes für ImageField

Django, Flask, Bottle, WSGI, CGI…
Antworten
Piet Lotus
User
Beiträge: 80
Registriert: Dienstag 14. November 2006, 10:40

Hallo zusammen,
ich habe ein automatisch gerendertes ImageField aus einer Model-Klasse auf meiner Oberfläche. Leider gelingt es mir nicht das Eingabefeld und den automatisch dazu gerenderten "Durchsuchen"-Knopf auf die Länge der anderen Oberflächenelement zu ziehen. Die Länge des Konstrukts "Eingabefeld+Durchsuchen"-Knopf bleibt konstant. Wie kann ich das Eingabefeld länger oder kürzer machen?
Hier beispielhaft meine HTML-Datei:

Code: Alles auswählen

<table>
...
<tr><th><label for="id_anhang">Anhang:</label></th><td><input type="file" name="anhang" id="id_anhang" /></td></tr>
...
</table>
Hier ein Auszug aus meiner CSS-Datei. Damit habe ich den Hintergrund des einbettenden td-Tags, bzw. den Hintergrund des Eingabe-Feldes schwarz setzen können. Leider wirkt sich die Weite nicht aus....

Code: Alles auswählen

table tr td {
	width: 100%;
	background: #000;
}

table tr td input{
	width: 100%;
	background: #000;
}
Auch ein Ändern des Widgets-Attribut in meiner Form-Klasse brachte keinen Erfolg.Das verlängerte mir zwar das Eingabefeld, aber ich sehe jetzt keinen "Durchsuchen"-Knopf mehr... Auch hier ein beispielhafter Auszug:

Code: Alles auswählen

class TestForm(ModelForm):
    class Meta:
        model = Test
        widgets = {
                       'anhang': TextInput(attrs={'size': 10}),
                      }
Kann mir jemand helfen?
Besten Dank schon mal und frohe Pfingsten
Piet
deets

Das File-Field ist ziemlich sperrig bezueglich stylings. Ein Trick der oft verwandt wird: man packt es in ein DIV mit definierter Groesse, und einem style overflow=hidden. Dann macht man das input-feld so gross (schriftgroesse zB), dass der Button so gross wird, dass er das gesamt DIV ausfuellt. Dann styled man das Feld mit einer opacity=.0, so dass es unsichbar wird. Und legt ein weiteres Element, zB ein Bild, *unter* das INPUT-feld. Dadurch sieht man das Bild, aber wenn man draufdueckt, kommt der File-Dialog.

Sowas solltest du aber auch alles online finden, bzw. teilweise gibt's dafuer glaube ich schon fertige jquery-plugins.
Piet Lotus
User
Beiträge: 80
Registriert: Dienstag 14. November 2006, 10:40

Hallo deets,
danke für deine Infos. Ich versuche mal eine jQuery-Lösung.
Viele Grüße
Piet
Antworten