radiantassure/Vue/Prestataires/index.php

<?php $this->titre = "Intersanté - Prestataire"; ?>

<div class="card shadow-lg border-0 mb-4" style="border-radius: 15px;">
	<div class="card-header bg-primary text-white py-3" style="border-radius: 15px 15px 0 0;">
		<div class="row align-items-center">
			<div class="col-8">
				<h4 id="h4_titre" class="mb-2 text-center">
					<i class="fas fa-project-diagram"></i>
					<span id="id_titre_page"><?= _("Réseau des prestataires") ?></span>
				</h4>
			</div>
		</div>
	</div>
    <div class="row">
        <div class="col-12">
            <input type="text" class="sr-only" id="codeReseau" NAME="codeReseau" value="<?= $codeReseau ?>">
            
            <!-- Filtres de recherche -->
            <div class="card shadow-sm mb-8">
                <div class="card-body">
                    <div class="row g-3">
						<!-- Réseau -->
                        <div class="col-12 col-md-6 col-lg-3">
                            <label class="form-label fw-bold"><?= _("Réseau du collège") ?></label>
                            <SELECT class="form-control" disabled>
                                <?php liste_options($reseausoins, $codeReseau); ?>
                            </SELECT>
                        </div>
						
                        <!-- Type Prestataire -->
                        <div class="col-12 col-md-6 col-lg-3">
                            <label class="form-label fw-bold"><?= _("Type du prestataire") ?></label>
                            <SELECT class="form-select mobile-select" data-live-search="true" id="codeTypePrestataire" NAME="codeTypePrestataire" autofocus>
                                <?php liste_options_consultation($typeprestataire, ""); ?>
                            </SELECT>
                        </div>
                        
                        <!-- Nom -->
                        <div class="col-12 col-md-6 col-lg-3">
                            <label class="form-label fw-bold"><?= _("Nom du prestataire") ?></label>
                            <INPUT class="form-control form-control-sm" type="text" id="libelle" name="libelle" 
                                   onkeypress="javascript:ctrlkeypress_liste_prestataires_actif(event);">
                        </div>
                        
                        <!-- Nombre de lignes -->
                        <div class="col-12 col-md-6 col-lg-3 hide-on-mobile">
                            <label class="form-label fw-bold"><?= _("Nombre de lignes") ?></label>
                            <input class="form-control form-control-sm text-center bg-light" type="text" id="nbligne" name="nbligne" 
                                   value="0" readonly>
                        </div>
                        
                        <!-- Pays -->
                        <div class="col-12 col-md-6 col-lg-3 hide-on-mobile">
                            <label class="form-label fw-bold"><?= _("Pays") ?></label>
                            <SELECT onChange="ajaxListerVilleConsultation();" class="form-select mobile-select" data-live-search="true" id="codePays" NAME="codePays">
                                <?php liste_options_consultation($pays, $_SESSION['codePaysSociete']); ?>
                            </SELECT>
                        </div>
                        
                        <!-- Région -->
                        <div class="col-12 col-md-6 col-lg-3">
                            <label class="form-label fw-bold"><?= _("Région") ?></label>
                            <div id="listeville">
                                <SELECT onChange="ajaxListerLocaliteConsultation();" class="form-select mobile-select" data-live-search="true" id="codeVille" NAME="codeVille">
                                    <?php liste_options_consultation($ville, ""); ?>
                                </SELECT>
                            </div>
                        </div>
                        
                        <!-- Ville -->
                        <div class="col-12 col-md-6 col-lg-3">
                            <label class="form-label fw-bold"><?= _("Commune") ?></label>
                            <div id="listelocalite">
                                <SELECT class="form-select mobile-select" data-live-search="true" id="codeLocalite" NAME="codeLocalite">
                                    <?php liste_options_consultation($listelocalite, "" ); ?>
                                </SELECT>
                            </div>
                        </div>
                        
                        <!-- Bouton Afficher -->
                        <div class="col-12 col-md-6 col-lg-3 d-flex align-items-end">
                            <button id="btn_filtre" type="button" class="btn btn-primary w-100 mt-3 mt-md-0" 
                                    onclick="javascript:afficher_liste_prestataires_actifs();">
                                <i class="fas fa-search me-2"></i> <?= _("Afficher les résultats") ?>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Résultats -->
            <div class="card shadow-sm">
                <div class="card-body p-0">
                    <div id="div_liste_prestataire" class="table-responsive">
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.card {
    border: none;
    border-radius: 10px;
}

.form-label {
    font-size: 0.9rem;
}

.table th {
    font-size: 0.9rem;
    font-weight: 600;
}

.table td {
    font-size: 0.9rem;
    vertical-align: middle;
}

/* Améliorations pour mobile */
@media (max-width: 768px) {
    .card-body {
        padding: 1rem;
    }
    
    .btn {
        padding: 0.5rem;
        font-size: 0.9rem;
    }
    
    .table-responsive {
        font-size: 0.8rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .form-select, .form-control {
        font-size: 16px; /* Empêche le zoom automatique sur iOS */
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Amélioration spécifique pour les selects */
    select.form-control {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 16px 12px;
        padding-right: 2.5rem;
    }
    
    /* Assurer que les selects ne débordent pas */
    .row.g-3 > div {
        margin-bottom: 1rem;
    }
    
    /* Ajustement de l'espacement */
    .mb-8 {
        margin-bottom: 2rem !important;
    }
}

/* Pour les très petits écrans */
@media (max-width: 576px) {
    .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .card-body {
        padding: 0.75rem;
    }
    
    .form-label {
        font-size: 0.85rem;
    }
    
    .btn {
        padding: 0.4rem 0.75rem;
        font-size: 0.85rem;
    }
}

/* Correction spécifique pour Bootstrap Selectpicker si utilisé */
.bootstrap-select .btn {
    font-size: 16px !important;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bootstrap-select .dropdown-menu {
    max-width: 100vw;
    width: 100%;
}

/* Amélioration de la lisibilité sur mobile */
select:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
</style>

<script>
// Script pour améliorer l'expérience mobile des selects
document.addEventListener('DOMContentLoaded', function() {
    // S'assurer que les selects ne causent pas de débordement
    const selects = document.querySelectorAll('select');
    
    selects.forEach(select => {
        // Ajouter un attribut pour améliorer l'expérience mobile
        select.setAttribute('size', '1');
        
        // Prévenir le zoom sur iOS quand on focus un select
        select.addEventListener('focus', function() {
            this.style.fontSize = '16px';
        });
        
        // Optionnel: restaurer la taille après perte du focus
        select.addEventListener('blur', function() {
            this.style.fontSize = '';
        });
    });
    
    // Redimensionner dynamiquement si nécessaire
    window.addEventListener('resize', function() {
        selects.forEach(select => {
            select.style.maxWidth = '100%';
        });
    });
});
</script>