need help with s:radio tag, display in a very strange way

Hi, I'm using struts 2.1.6, I have my action code:

with getter and setter.

My jsp page:

However, my output is very weird:

every radio button and value occupied one line.

Anyone seen this before? Thanks!

I'd check your CSS; IIRC the radio buttons would normally be on a single line--is that what you're expecting?

David Newton wrote:I'd check your CSS; IIRC the radio buttons would normally be on a single line--is that what you're expecting?

Yes, I expect the default single line. However, I don't have any special css for this page except button.

Is css the only reason which can cause this problem?

Here's my css:

/* solid rectangle on the main menu title for */
table.menu#westTable tr.title th div 
{
	background-color: #eee;
}

/* tables border strength for id=userQuotes*/
table.menu#westTable 
{
	border: 1px solid #ccc;
}

/* solid rectangle on the main menu title */
table.menu#westTable tr.title th div 
{
	background-color: #eee;
}

H1#title {            
   font-weight: normal;
   font-size: 10pt;
   font-family: arial, helvetica;      
}

h2#title {
  background: url(../images/bar780.png) no-repeat scroll 0pt;
  color:#FFFFFF;
  cursor:default;
  font-size:15px;
  font-weight:normal;
  height:25px;
  line-height:25px;
  margin-top:2pt;
  font-family:"Lucida Grande",Geneva,Arial,Verdana,sans-serif;
  width:100%;
  text-indent:5px;
}

h2#title a {
  color:#FFFFFF;
  font-size:15px;
  text-decoration: none;
}

h2#title a:hover{
  color:#99FFFF;
  text-decoration:underline;
}

table.menu 
{	
	background-color: white;
	border: 1px solid #000066;
	font-size :	9pt;
	margin:	5px;
	width:70%;
}

/* solid rectangle color */
table.menu td.menuEntry:hover 
{	
	color: #333;
	background-color: #f6f6f6;
}

/* title Main Menu setting box */
table.menu tr.title th div 
{
	padding: 4px 4px 4px 10px;
	font-weight: normal;
	border-style: none;
}

/* inside settings - dotted lines, style */
table.menu td.menuEntry 
{
	border-style: none;
	border-bottom: 0px dotted #ccc;
	padding: 4px 4px 4px 10px;
	margin: 5px 5px 5px 0px;
}

.actionmessage
{
	font-size :10pt; text-align:left; font-family: verdana; color:green;
}

.actionerror
{
	font-size :10pt; text-align:left; font-family: verdana; color:red;
}

Does it work correctly if you create a test page w/ no CSS? How about a different browser?

There's no break tag in the radio template, which is why I suspect CSS.

David Newton wrote:Does it work correctly if you create a test page w/ no CSS? How about a different browser?

There's no break tag in the radio template, which is why I suspect CSS.

Hi Dave, I found if I don't use tiles, it works as expected(as default). But I need to use tiles, here is my layout.jsp for tiles.xml:

Hmm, that doesn't make any sense to me either--I've used Tiles without seeing the weird rendering you're seeing (although I haven't used Tiles for awhile).

Have you tried inspecting the element in Firebug? That might give you a clue to the CSS that's causing the issue. You could also check the actual DOM in both the Tiles and non-Tiles rendering to see if it's different, possibly causing the difference. You could also tweak the Tiles definition to see if that makes a difference--it might just be that the table cell isn't wide enough and collapses, causing the radio buttons to be wrapped.