Nous utilisons des cookies pour vous garantir la meilleure expérience sur notre site. Si vous continuez à utiliser ce dernier, nous considèrerons que vous acceptez l'utilisation des cookies. J'ai compris ! ou En savoir plus !.
banniere

Le portail francophone de la géomatique


Toujours pas inscrit ? Mot de passe oublié ?
Nom d'utilisateur    Mot de passe              Toujours pas inscrit ?   Mot de passe oublié ?

Annonce

Rencontres QGIS 2025

Participez à la sélection du programme !

#1 Fri 31 January 2025 21:52

liege67
Participant assidu
Lieu: Liège
Date d'inscription: 10 Apr 2014
Messages: 193

Taille formulaire de sélection sur smartphone

bonjour

avec un CSS adapté pour les smartphones (avec écran haute résolution), je n'ai aucune maitrise sur la taille d'affichage d'une liste de valeurs à sélectionner. Est-ce possible de gérer cet affichage ou est-ce un affichage par défaut ?
voir mes illus

merci

jean marc

le CSS y compris la variante  /* Requêtes de média pour les écrans de smartphone */

#selector-container {
    position: absolute;
    top: 13px; /* Ajuste la distance par rapport au haut de la fenêtre */
    left: 50px; /* Ajuste la distance par rapport au bord gauche de la fenêtre */
    z-index: 1005; /* Assure que le sélecteur reste au-dessus de la carte */
    background-color: rgba(255, 255, 255, 0.8); /* Fond semi-transparent */
    padding: 10px; /* Padding interne */
    border-radius: 5px; /* Coins arrondis */
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); /* Ombre portée */
    font-family: Arial, sans-serif; /* Famille de police par défaut */
    font-size: 11px; /* Taille de police par défaut */
    color: #000; /* Couleur de texte par défaut */
}

#selector-container label {
    margin-right: 5px; /* Espace entre le label et le sélecteur */
    color: #000; /* Couleur de texte du label */
    font-weight: bold; /* Poids de police du label */
}

#selector-container select {
    padding: 5px; /* Padding interne du sélecteur */
    font-size: 10px; /* Taille de police du sélecteur */
    color: #000; /* Couleur de texte du sélecteur */
    background-color: #fff; /* Couleur de fond du sélecteur */
    border: 1px solid #ccc; /* Bordure du sélecteur */
    border-radius: 3px; /* Coins arrondis du sélecteur */
    outline: none; /* Supprime l'effet de contour */
    width: 200px; /* Largeur du sélecteur */   
}

/* Requêtes de média pour les écrans de smartphone */
@media only screen and (max-width: 600px), only screen and (max-device-width: 600px) {
    #selector-container {
        top: 13px; /* Ajuste la position en fonction de la taille de l'écran */
        left: 50px; /* Ajuste la position en fonction de la taille de l'écran */
        width: 150px; /* Ajuste la largeur du conteneur */
        padding: 5px; /* Réduit le padding */
        font-size: 10px; /* Réduit la taille de la police */
    }

    #selector-container select {
        font-size: 8px; /* Réduit la taille de la police du sélecteur */
        width: 100%; /* Ajuste la largeur du sélecteur */
    }
}

Dernière modification par liege67 (Fri 31 January 2025 21:52)


Fichier(s) joint(s) :
Pour accéder aux fichiers vous devez vous inscrire.

Hors ligne

 

Pied de page des forums

Powered by FluxBB