web-dev-qa-db-fra.com

Problème de case à cocher CKform

J'utilise un composant de formulaire Ck pour créer mes formulaires. Tout fonctionne bien, sauf la case à cocher, ils ne ressemblent pas à ce qui est prévu. Ma question est la suivante: comment les aligner côte à côte et comment faire correspondre la valeur/le libellé de la case à cocher?

enter image description here

La partie html de la case à cocher est:

    <p class="ckformsblocplug ckformsbloc_2" id="ckformsbloc_matiere_2"><label class="ckCSSlabel " id="matierelbl" for="matiere"> Mathématiques
</label>
<input class="validate[] ckCSStop10 " name="matiere" type="checkbox" value="Mathématiques">
</p>


Le css:

     .ckform {
    margin-top: 10px;
}
.ckformtitleplug {
    border-bottom: 1px solid #dddddd;
}
.ckformsblocplug {
    line-height: 1.0em;
    margin: 0;
}
.ckformslabel {
    margin: 5px 0;
    width: 30%
}
.ckform div.fc-error {
    border: none;
    background:none;
    float:left;
    margin-right: 5px;
    padding: 0px;
}
.ckform input { 
    border: 1px solid #999;
    padding: 5px;
}
/* CSS layout */
.ckCSSlabel {
    display: block;
    float: left;
    margin-top: 10px;
    width: 20%;
    font-size:1em;
}
.ckCSSinput {
    width: 76%;
    margin-top: 6px;
    background:none;
}
.ckCSSinput input {
    background:none;
}
/*
.ckCSSclear {
    margin: 0px;
    padding: Opx;
    clear: both;
}
*/
.ckCSSFloatLeft {
    float: left;
}
.ckCSSbot10 {margin-bottom: 10px;}
.ckCSSbot5 {margin-bottom: 5px;}
.ckCSStop10 {margin-top: 1px;}
.ckCSScenter {
    text-align:center;
    margin-top: 10px;
}
/* Ajout de styles personnels pour fichier SQL exemple */
.ckCSSlabel {
    width: 120px;   
}
.ckCSSinput {
    /*width: auto;*/
}
.ckformsbloc_1 {
    float: left;
   width: 100%;
}

Je veux que ce groupe soit montré comme ceci:

[case à cocher] Mathématiques
[checkbox] Physiques-Chimie
[case à cocher] SVT
[checkbox] English

Ou
[case à cocher] Mathématiques [case à cocher] Physiques-Chimie [case à cocher] SVT [case à cocher] English

joomla-2.5jformform
1
Angelika

Eh bien, vérifiez ci-dessous une approche, bien que le code HTML de votre formulaire ne soit pas idéal et que je constate qu'il existe plusieurs identifiants identiques pour vos éléments.

Le code CSS ci-dessous devrait fonctionner sur la page actuelle (sauf si j'ai oublié de coller quelque chose ici), mais il serait peut-être préférable que vous ayez la possibilité d'améliorer le balisage du formulaire en ajoutant plus d'éléments/classes et différents identifiants sur la page. éléments.

Essayez en ajoutant le fichier CSS suivant dans le fichier CSS de votre modèle à la fin, et dites-nous comment cela se passe. Dans tous les cas, cela peut être un point de départ pour vous, pour que cela fonctionne comme vous le souhaitez.

// Mise à jour:

p#ckformsbloc_matiere_2 {
 display: block;
 float: left;
 width: 150px;  /*** Changed from width: 22%; ***/
 margin-right: 20%;  /*** Changed from margin-right: 25%; ***/
}

#ckformsbloc_matiere_2.ckformsbloc_2 label {
 float: right;
 margin-top: 3px;
}

input[type='checkbox'].ckCSStop10 {
float: left;
}

.ckBtnCon {
 width: 100%;
 float: none;
 clear: both;
 padding-top: 20px;
}
1
FFrewin

Une autre solution rapide consiste à ajouter ce CSS à votre code:

#ckformsbloc_matiere_2 { clear: left; }
p#ckformsbloc_matiere_2 input {margin-top: 15px;}

La première ligne placera tous les éléments les uns sous les autres et la seconde alignera la case à cocher pour correspondre à la description.

Une autre chose que j'ai remarquée (probablement sans rapport avec ce problème de mise en page), c'est qu'il vous manque un fichier: components/com_ckforms/css/tips.css n'est pas disponible (erreur 404). Certaines erreurs JavaScript sont également générées:

enter image description here

1
johanpw