Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
tsalbtsalb 

Radio horizontal layout - separate columns per row

How would I make it so that one radio selector shows up (one on left, one on right) column? The actual radio works fine, it's just a layout issue at this point if it's even possible.

 

Example

 

This the visualforce:

 

    <tbody>
         <tr>
            <td width="90%">
                <b>General Information</b> (Explain all Yes Responses)</td>
            <td>
                Yes</td>
            <td>
                No</td>
        </tr>
        
        <tr>
            <td width="90%" height="60px">
                1. TEST QUESTION ONE <br/>
                <apex:inputTextArea style="width:100%; height:40px;" value="{!Submissions__c.q1e__c}" id="q1e"/></td>
            <td>       
                <apex:selectRadio value="{!Submissions__c.q1__c}" layout="lineDirection" required="true">
           			<apex:selectoption itemValue="true"></apex:selectoption>
           			<apex:selectoption itemValue="false"></apex:selectoption>
       			</apex:selectradio></td>
           	<td>		  
			</td>
        </tr>

 I tried just putting the second option and the closing </apex:selectRadio> tag in the other column - but that's no go.

 

Best Answer chosen by Admin (Salesforce Developers) 
Starz26Starz26

I am not sure....

 

when i tried to seperate the radiooptions using </td><td>OPTION</td>

 

it gave errors that I needed a closing on the radio so the <TD> seperation was seen as a bad thing.

 

I was thinking you could use <pre>       </pre> to add whitespace but I believe you would have the same issue

 

You may have to go pure java or jquery like this to accomplish what you want.

 

<table>
  <tr>
    <td>Some text 1 </td>
    <td><input type="radio" value="txt1" name="myRadio" id="text1" /></td>
    <td>Some text 2 </td>
    <td><input type="radio" value="txt2" name="myRadio" id="text2" /></td>
    <td>Some text 3 </td>
    <td><input type="radio" value="txt3" name="myRadio" id="text2" /></td>
  </tr>
</table>

 http://stackoverflow.com/questions/964961/jquery-radio-onchange-toggle-class-of-parent-element

 

seems to be doing something like what you want but have not tested or seen it inaction

 

All Answers

Starz26Starz26

Change section to:

 

 

<tr>
            <td width="90%" height="60px">
                1. TEST QUESTION ONE <br/>
                <apex:inputTextArea style="width:100%; height:40px;" value="{!Submissions__c.q1__c}" id="q1e"/></td>
            <td colspan="2">       
                <apex:selectRadio value="{!Submissions__c.q1__c}" layout="lineDirection" required="true">
                    <apex:selectoption itemValue="true"></apex:selectoption>
                    <apex:selectoption itemValue="false"></apex:selectoption>
                </apex:selectradio>
            </td>          
            
        </tr>
tsalbtsalb

Closer, but would it be possible to retain the vertical line that seperates the yes from no?

 

If not, how would i space out the radios so they're further apart?

 

a
Starz26Starz26

I am not sure....

 

when i tried to seperate the radiooptions using </td><td>OPTION</td>

 

it gave errors that I needed a closing on the radio so the <TD> seperation was seen as a bad thing.

 

I was thinking you could use <pre>       </pre> to add whitespace but I believe you would have the same issue

 

You may have to go pure java or jquery like this to accomplish what you want.

 

<table>
  <tr>
    <td>Some text 1 </td>
    <td><input type="radio" value="txt1" name="myRadio" id="text1" /></td>
    <td>Some text 2 </td>
    <td><input type="radio" value="txt2" name="myRadio" id="text2" /></td>
    <td>Some text 3 </td>
    <td><input type="radio" value="txt3" name="myRadio" id="text2" /></td>
  </tr>
</table>

 http://stackoverflow.com/questions/964961/jquery-radio-onchange-toggle-class-of-parent-element

 

seems to be doing something like what you want but have not tested or seen it inaction

 

This was selected as the best answer
tsalbtsalb

Thanks, I'll take a look. This makes is almost unnecessarily complex...
Starz26Starz26

Yes it does.

 

I have found that the ease of use of the pre built components is only as good as the "default" use meaning no additional formatting outside certain limits. Anything else needs to be built from scratch....
tsalbtsalb

It's too bad they deprecated the style and styleclass within selectedoption. Otherwise, might have tricked it somehow to do horizontal spacing.