indent Multiple choice question

[Manoj Kumar16]

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 · Accepted solution]

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

[Manoj Kumar16]

Thanks Miriam

it worked.

[Manoj Kumar16]

Hey Miriam can you please share what would be the getelementbyTagname(' ') and getAttribute(' ') for labels ?

I tried to watch it through the source code HTML but I did not find that.

[Miriam Berg]

Hi Manoj,

The TagName is the same as the HTML tag name. So for the <label> tag, that would mean

getElementsByTagName('label'); 

I have attached pictures of what the HTML code looks like in the Chrome dev tool that i'm using.

In the example I used before, we selected all input tags with type="radio" and styled their parent label with a margin:

If you want to instead style ALL labels, you could select them directly instead. This is what the HTML code looks like for a random label:

It has no type to select and there is no 'input' tag either. The code for selecting and styling ALL labels would look like this: Note that there's no if statement anymore and .parentNode is removed. And like mentioned before, the TagName was changed.

function onLoad() { 

   styleAllLabels(); 

} 



function styleAllLabels(){ 

   //select the label tags in the HTML code 

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

   //for each tag 

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

         //style! 

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

   } 

} 

I hope this makes sense to you! 😃

BR /Miriam