indent Multiple choice question

Manoj Kumar16 · ‎07-07-2015

How can we indent radio buttons in a service catalog form without using out of Box functions ? Suppose in a catalog item the options should show up like this :

[ ]- a check box

o -radio button1

o -radio button2

o -radio button3

my requirement is when i click the check box, radio buttons should appear indented like its shown above. But currently its appearing like below :

[ ]- a check box

o -radio button1

o -radio button2

o -radio button3

Miriam Berg · ‎07-07-2015

Hi Manoj,

Put this code in an onLoad catalog client script on your catalog item.

It selects the radio buttons and styles them with a left margin of 20px.

Hope this was what you were looking for!

function onLoad() {


   styleRadioButtons();


}






function styleRadioButtons(){


   //select the input tags in the HTML code


   var options = document.getElementsByTagName('input');


   //for each tag


   for( i=0; i!=options.length; i++) {


             //choose radio buttons only


             if(options[i].getAttribute('type')=='radio'){


                       //style!


                       options[i].parentNode.style.marginLeft="20px";


             }


   }


}

Best Regards,

Miriam

View solution in original post

Manoj Kumar16 · ‎07-21-2015

Yes that helps a lot. Thanks a lot for your reply.

I have one more question - Suppose I want to indent a particular label. How to identify that label name ? or the element name or something related to the variable. I don't find it when I view the source code in chrome.

Thanks for the help

Miriam Berg · ‎08-13-2015

Well, using similar code like we discussed, find an attribute on that label that makes it unique, select it and lastly style it.

I can probably give you some pointers if you copy your label's HTML code from Chrome and paste it in a reply.

BR /Miriam