PDA

View Full Version : RadioButton w/ DIV tag on same line???


vincentms
04-17-2003, 01:01 AM
Hello All,

I am going crazy.

Can anybody tell me how I can get the DIV TAG value next to the Radio Button. The DIV forces a line break, how can I get around this. The reason I am using a div tag is so to dynamically assign the text that appears next to the Radio button.

I am working on an ExamSimulator. I have already done lots of work to get a random sequence from the pool of "test questions".

I think I am making a little progress, but have hit a brick wall.

Thanks,
Vincent

Zürich Switzerland


<HTML>
<HEAD>
<SCRIPT>
function getRandom()
{
var s = 0; // p1
var m = 12; // p2
var d = 17; // p3
var y = 56; // p4
var p = 1;
var tpq = 5;
s = Math.round((p - 0.5) + (((tpq + 0.49999) - (p- 0.5)) * Math.random()));
return s;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="QForm">
<p><input type="radio" value="a" name="q10"> Congo<br></p>
<p><input type="radio" value="b" name="q10"> <DIV id="p1">Texas</DIV></p>
<p><input type="radio" value="c" name="q10"> Africa<br></p>
<p><input type="radio" value="d" name="q10"> Europe<br> <br></p>
<INPUT type="button" value="Random"
onClick="document.getElementById('p1').innerHTML=getRandom(this.form.value)">
</FORM>
</BODY>
</HTML>

Saj
04-17-2003, 01:16 AM
Use CSS


div.p1
margin-bottom: 1px;
}


Just change the id="p1" to class="p1"...I'm not entirely sure if that makes a difference, but it works well for me wverywhere.

vincentms
04-17-2003, 09:28 AM
Originally posted by Saj
Use CSS
Thanks SAJ this pointed me in the right direction. I found that the SPAN tag did exactly as I wanted. Seems to be similar to the DIV tag (without linefeed).

Thanks again!!!


div.p1
margin-bottom: 1px;
}


Just change the id="p1" to class="p1"...I'm not entirely sure if that makes a difference, but it works well for me wverywhere.

Danne
04-17-2003, 09:12 PM
Since the div's display style is block by default, elements next to it will automatically be on the next or previous line.

You can change this to inline to get the wanted effect:

<div style="display:inline;">

Read more about it here (http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/display.asp) .