CKform Checkbox issue

Question

I'm using Ck forms component to build my forms. Every things works fine, except checkbox, they are not like what is planned. My question is : how to align them one next to one, and how to match Value/Label of the checkbox?

The html part of checkbox is:

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

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

I want that this group is shown like this :

---

[checkbox] Mathématiques
[checkbox] Physiques-Chimie
[checkbox] SVT
[checkbox] Français

Or
[checkbox] Mathématiques [checkbox] Physiques-Chimie [checkbox] SVT [checkbox] Français

Answer 1

Well, check below one approach, although the html of your form is not ideal and I see there are multiple same ids for your elements.

The CSS code below should work on the current page (unless I forgot to paste anything here), but it could be better if you would have the possibility to improve the mark-up of the form adding more elements/ classes and different ids on the elements.

Try by adding the following css in your template's css at the end, and let us know how this goes. In any case this can be a starting point for you, to make it work the way you want.

// Updated:

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

Answer 2

Another quick solution is to add this CSS to your code:

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

The first line will place all elements below each other, and the second line will align the checkbox to match the description.

Another thing I noticed (probably not relevant to this layout issue) is that you're missing a file: components/com_ckforms/css/tips.css is not available (404 error). Some JavaScript errors are also generated: