[sympa-fr] CCS non responsive pour les abonnements comprenant des attributs personnalisés

[Gautier Auburtin <adresse@cachée>]

Bonjour,

J'ai constaté que l'abonnement à une liste comprenant des attributs personnalisés (custom attributes) posait de réelles difficultés pour les téléphones.

En effet, le formulaire de saisie des attributs (2e étape, de confirmation, après la saisie de l'adresse email) n'est pas responsive.

Or, beaucoup d'utilisateurs utilisent leur téléphone pour s'abonner (environ 15 %)

Concrètement, on ne voit pas les libellés des champs et la saisie est incohérente, voire absente (ce qui est étrange s'agissant des champs obligatoires, soit dit en passant)

Voici une copie d'écran :

SI on trifouille la CSS, on améliore un peu mais guère mieux

J'aimerais savoir si vous avez déjà rencontré ce problème et si oui comment vous l'avez résolu.

Bizarrement, la classe CSS responsive pour le tableau est spécifiée mais n'a pas de propriété.

Chez bootstrap, on utilise une barre de scroll : ça fonctionne, au moins, même si ce n'est pas terrible,

Mais avec quelques aménagements en plus, ça pourrait fonctionner : encore faut-il savoir commenté éditer la CSS et de fait, préférer qu'elle soit nativement responsive ;-)

Voici le code Html concerné :

Bien cordialement,

Gautier Auburtin

    <table class="responsive">

    <tbody><tr><td class="text_right" style=""><label for=""custom_attribute.nom">Nom" :<br>
    <i></i>
    </label></td><td>

    <input name="custom_attribute.nom" id="custom_attribute.nom" value="" size="40" type="text">
     *
    <!-- (k.id:nom) (m:) (k.type:string) --></td></tr>
    <tr><td class="text_right" style=""><label for=""custom_attribute.prenom">Prénom" :<br>
    <i></i>
    </label></td><td>

    <input name="custom_attribute.prenom" id="custom_attribute.prenom" value="" size="40" type="text">
     *
    <!-- (k.id:prenom) (m:) (k.type:string) --></td></tr>
    <tr><td class="text_right" style=""><label for=""custom_attribute.naissance">Date" de naissance : JJ/MM/AA :<br>
    <i>Précisez (contrôle d'identité à l'entrée)</i>
    </label></td><td>

    <input name="custom_attribute.naissance" id="custom_attribute.naissance" value="" size="40" type="text">
     *
    <!-- (k.id:naissance) (m:) (k.type:string) --></td></tr>
    <tr><td class="text_right" style=""><label for=""custom_attribute.origine">Votre" rattachement (précisez) : :<br>
    <i>ex. : Entreprise, Collectivité locale, Ecole, Organisme, Université ...</i>
    </label></td><td>

    <input name="custom_attribute.origine" id="custom_attribute.origine" value="" size="40" type="text">
     *
    <!-- (k.id:origine) (m:) (k.type:string) --></td></tr>
    </tbody>
    </table>

Gautier Auburtin
Chargé d'urbanisation numérique

Campus Condorcet
20 avenue George Sand - 93210 Saint-Denis La Plaine
01 55 93 93 89

www.campus-condorcet.fr
Abonnez-vous à la Lettre d'information