Taille d'un INIPUT[type="file"] sous FireFox : Bug

Sous FireFox, les INPUT's file ne prennent pas en compte la propriété CSS Width. Bug 52500.

En réalité, tout se passe comme si votre INPUT avait réellement changé de taille (les autres éléments considèrent en tout cas qu'il n'occupe plus sa taille initiale mais la nouvelle taille CSS), mais le changement ne se fait pas sur lui : il reste avec sa taille par défaut !

Problème

Imaginons le cas suivant :

<input type="file" style="width: 50px" /><input type="submit" value="Envoyer !" />

Sous IE, pas de problème, votre input file fait bien 50pixels et le submit le suit : tout fonctionne.

Sous Opera, cela semble bon aussi.

Sous Safari, le comportement des inputs file est différent. Il n'y a pas de boite de texte, juste un boutton. Mais celui-ci a la taille souhaitée, même si cela parait bizarre vis à vis des autres navigateurs.

Sous FireFox.... le input file chevauche le input submit, qui se retrouve en dessous du bouton Parcourir !

Solution

Pas de solution CSS. Il faudra mettre un attribut SIZE sur votre input type="file" et ajuster.

En effet, celui-ci est géré par FireFox... Attention, il n'est pas calculé en pixel ou en pourcentage, mais bien en nombre de caractère que la boite de texte est sensée être capable d'afficher....

Faudra donc y aller par essais/erreurs...

Allez, bon dev à tous,

Fremy

Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :
Publié 04 février 08 03:55 par FREMYCOMPANY
Classé sous : , ,

Commentaires

Pas de commentaires
Les commentaires anonymes sont désactivés

About FREMYCOMPANY

François REMY est un jeune développeur belge plein d'entrain qui traite surtout des technologies du web et de DotNet dans ses articles.


Les 10 derniers blogs postés

- Merci par Blog de Jérémy Jeanson le 10-01-2019, 20:47

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01




Search

Go

Ce blog

Abonnements