jainp jainp - 2 months ago 19
HTML Question

Jquery dform plugin radio button alignment

I am fairly new to Javascript and working on creating a simple form including radiobuttons.
This is the fiddle which I created:

http://jsfiddle.net/nax97af6/

My HTML

<form id="myform"></form>


Javascript

$("#myform").dform({
"action" : "index.html",
"method" : "get",
"html" :
[
{
"type" : "p",
"html" : "Edit Rule"
},
{
"name" : "ruleid",
"id" : "ruleid",
"caption" : "Rule ID",
"type" : "text",
"placeholder" : "NRF_Rule_123"
},
{
"name" : "rulepriority",
"id" : "rulepriority",
"caption" : "Rule Priority",
"type" : "number",
"placeholder" : "3"
},
{
"name" : "rulebody",
"id" : "rulebody",
"caption" : "Rule Definition",
"type" : "div",
"html" :
[
{
"type" : "text"
}
],
"placeholder" : "Define your rule body here"
},
{
"name" : "ruleenabled",
"type":"radiobuttons",
"id": "radiobuttonalign",
"caption" : "Make rule available for use",
"options" : {
"No" : "No",
"Yes" : {
"checked" : "checked",
"caption" : "Yes"
}
}
},
{
"type" : "submit",
"value" : "Save rule"
}
]
})


My CSS:
body {
font-family: sans-serif;
padding: 10px;
}

label, input {
display: block;
margin-top: 10px;
}


I am trying to align the radio button options i.e. Yes or No horizontally. The rest of them should be vertical. So far, I have tried using css option and class option as suggested on the dform plugin page

https://github.com/daffl/jquery.dform

but no luck.

If I remove the display: block; component all the fields get aligned horizontally. I want to only align the radiobutton options horizontally.

Any pointers to help me learn and rectify the issue is greatly appreciated.

Thank you

Answer

Use class "inline-block" to your radio buttons and labels, see the below code

$("#myform").dform({
    "action" : "index.html",
    "method" : "get",
    "html" :
    [
        {
            "type" : "p",
            "html" : "You must login"
        },
        {
            "name" : "username",
            "id" : "txt-username",
            "caption" : "Username",
            "type" : "text",
            "placeholder" : "E.g. user@example.com"
        },
        {
            "name" : "password",
            "caption" : "Password",
            "type" : "password"
        },
         {
            "name" : "ruleenabled",
            "type":"radiobuttons",
           "id": "radiobuttonalign",
            "caption" : "Make rule available for use",
            "options" : {
                "No" : "No",
                "Yes" : {
                    "checked" : "checked",
                    "caption" : "Yes"
                }
            }
        },
        
    ]
});
body {
    font-family: sans-serif;
    padding: 10px;
}

label, input {
    display: block;
    margin-top: 10px;
}

input[type="radio"], label {
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://daffl.github.io/jquery.dform/release/jquery.dform-1.1.0.js"></script>

<form id="myform"></form>

Comments