How to align radio buttons horizontally in a table

#1

In this tiddler with a modified version of Nlite editor, there is a table with radiobuttons in a column.

The problem is that the radio buttons are aligned vertically one below the other. How to make them aligned horizontally, one next to the other.

image
image2056×1208 139 KB

When I place these buttons alone in a tiddler, they are aligned horizontally, one next to the other.

image
image2048×418 32.2 KB

This is the code for the part of the table with the radio buttons.

<table style="width:100%;">
<tr>
<th><$radio class="radiobutton" tiddler="$:/temp/Charlie/BASIC_Matrix/editing_sidepanel" field="text" value="Editor" default="Editor">Editor</$radio><$radio class="radiobutton" tiddler="$:/temp/Charlie/BASIC_Matrix/editing_sidepanel" field="text" value="Preview" default="Editor">Preview</$radio> <$radio cclass="radiobutton" tiddler="$:/temp/Charlie/BASIC_Matrix/editing_sidepanel" field="text" value="Editor with preview" default="Editor">Editor with preview</$radio><$radio class="radiobutton" tiddler="$:/temp/Charlie/BASIC_Matrix/editing_sidepanel" field="text" value="Context" default="Editor">Context</$radio></th> 
</tr>

How to make them aligned horizontally using CSS by adding some classes or styles ? What ever I didn’t worked.

#2

Yeah, this is why I avoid CSS. Each radio input wants 100% of available space, forcing them into a vertical queue. I’m sure that was an unintended consquence of the sq-nlite class.

Add class="radio" to the <th> tag. Then add or make a stylesheet tiddler with the following.

div.sq-nlite > table tr th.radio input {
width: unset ;
}
1 Like
#3

@Mark_S I tried the above, but doesn’t seem to work.

Here is the table tiddler and here is the stylesheet tiddler

Edit: But here it seems to work

@Mark_S Thank you
It was because when I copy pasted class="radio" there was some problem with the double quotes which got pasted.

#4

I should have put code markup around class="radio". Discourse turned my standard quotes into publisher’s quotes (whatever they’re called) and then you copied pasted them into the tag. Fix the quotes so they’re real double quotes and it should work.

1 Like
#5

Can you edit in your reply post also.

#6

Ok!

(This line required by Discourse)

#7

I’ve always put my radio buttons in separate columns to avoid that issue. I also don’t have certain borders set so that it looks like a single column or no table at all.

1 Like