web-dev-qa-db-ja.com

CKformチェックボックスの問題

Ckフォームコンポーネントを使用してフォームを構築しています。チェックボックスを除いて、すべてが正常に機能しますが、計画されているものとは異なります。私の質問は、次のようにそれらを1つずつ配置する方法と、チェックボックスの値/ラベルを一致させる方法ですか？

enter image description here

チェックボックスのhtml部分は次のとおりです。

    <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>


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%;
}

このグループが次のように表示されるようにしたい：

[チェックボックス]Mathématiques
[チェックボックス] Physiques-Chimie
[チェックボックス] SVT
[チェックボックス]フランセ

または
[チェックボックス]Mathématiques[チェックボックス] Physiques-Chimie [チェックボックス] SVT [チェックボックス]フランス語

joomla-2.5jformform
1
Angelika

ええと、以下の1つのアプローチを確認してください。ただし、フォームのhtmlは理想的ではなく、要素に同じIDが複数あることがわかります。

以下のCSSコードは現在のページで機能するはずです（ここに何かを貼り付けるのを忘れない限り）が、要素/クラスとさまざまなIDを追加してフォームのマークアップを改善できる可能性がある場合は、より良いかもしれません。要素。

最後に、テンプレートのcssに次のcssを追加してみてください。いずれにせよ、これはあなたが望むように機能させるための出発点となります。

// 更新済み：

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

別の簡単な解決策は、このCSSをコードに追加することです。

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

1行目はすべての要素を互いに下に配置し、2行目はチェックボックスを配置して説明と一致させます。

私が気づいたもう1つのことは（おそらくこのレイアウトの問題には関係がない）、ファイルが見つからないことです：components/com_ckforms/css/tips.cssは使用できません（404エラー）。一部のJavaScriptエラーも生成されます。

enter image description here

1
johanpw