1

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?

enter image description here

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

  • Impossible to tell without seeing some compiled CSS or a live preview. It might be that your template is overriding the default styling for checkboxes. You're going to have to provide a little more to solve something as vague as this – Lodder Oct 20 '14 at 15:22
  • Obviously is a css thing - but can't say without seeing the live preview. Can you post the link to the site? – FFrewin Oct 20 '14 at 15:28
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;
}
  • Thank you @FFrewin it's perfect! just a little issue, when I show my website on responsive view, positions of labels have changed. ( you can see it live) – Angelika Oct 20 '14 at 16:05
  • @Angelika - This is because on line 206 of the CSS file, there is a width and margin-right applied to the p#p#ckformsbloc_matiere_2 tag. Create a media query and overrides these styles. May I also suggest you contact the developer and let him/her know that the HTML markup syntax is incorrect. Duplicate element ID's should not be used – Lodder Oct 20 '14 at 16:20
  • I was preparing a media query for the responsive layout, but did you change anything after applying the above code? – FFrewin Oct 20 '14 at 16:27
  • Yes, I did. Now I will back to old version if you want :) – Angelika Oct 20 '14 at 16:31
  • Whatever you like. If you liked the idea of the 2 columns for checkboxes? I can give you a media query to make these work nice in responsive view. – FFrewin Oct 20 '14 at 16:35
1

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:

enter image description here

  • Thank you @johanpw , could you please check the responsive view, labels are not shown correctly – Angelika Oct 20 '14 at 16:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.