MyBB Community Forums

we can use a code like this code:

<style>
	.post_icons label {
		display: inline-block;
	}
</style>
<td class="trow1 post_icons" valign="top">
		<!-- start: posticons_icon -->
		<label><input type="radio" name="icon" value="6"> <img src="images/icons/wink.gif" alt="Wink" title="Wink"></label> 
		<!-- end: posticons_icon --><!-- start: posticons_icon -->
		<label><input type="radio" name="icon" value="9"> <img src="images/icons/tongue.gif" alt="Toungue" title="Toungue"></label> 
		<!-- end: posticons_icon --><!-- start: posticons_icon -->
		<label><input type="radio" name="icon" value="23"> <img src="images/icons/thumbsup.gif" alt="Thumbs Up" title="Thumbs Up"></label> 
		<!-- end: posticons_icon --><!-- start: posticons_icon -->
		<label><input type="radio" name="icon" value="21"> <img src="images/icons/thumbsdown.gif" alt="Thumbs Down" title="Thumbs Down"></label> 
		<!-- end: posticons_icon --><!-- start: posticons_icon -->
		<label><input type="radio" name="icon" value="24"> <img src="images/icons/star.gif" alt="Star" title="Star"></label> 
		<!-- end: posticons_icon --><!-- start: posticons_icon -->
		<label><input type="radio" name="icon" value="4"> <img src="images/icons/smile.gif" alt="Smile" title="Smile"></label> 
		<!-- end: posticons_icon --><!-- start: posticons_icon -->
		<label><input type="radio" name="icon" value="5"> <img src="images/icons/sad.gif" alt="Sad" title="Sad"></label> 
		<!-- end: posticons_icon --><!-- start: posticons_icon -->
		<label><input type="radio" name="icon" value="3"> <img src="images/icons/question.gif" alt="Question" title="Question"></label> 
		<!-- end: posticons_icon --><!-- start: posticons_icon -->
		<label><input type="radio" name="icon" value="20"> <img src="images/icons/photo.gif" alt="Photo" title="Photo"></label> 
		<!-- end: posticons_icon --><!-- start: posticons_icon -->
		<label><input type="radio" name="icon" value="25"> <img src="images/icons/pencil.gif" alt="Pencil" title="Pencil"></label> 
		<!-- end: posticons_icon --><!-- start: posticons_icon -->
		<label><input type="radio" name="icon" value="17"> <img src="images/icons/lightbulb.gif" alt="Lightbulb" title="Lightbulb"></label> 
		<!-- end: posticons_icon --><!-- start: posticons_icon -->
		<label><input type="radio" name="icon" value="19"> <img src="images/icons/information.gif" alt="Information" title="Information"></label> 
		<!-- end: posticons_icon --><!-- start: posticons_icon -->
		<label><input type="radio" name="icon" value="22"> <img src="images/icons/heart.gif" alt="Heart" title="Heart"></label> 
		<!-- end: posticons_icon --><!-- start: posticons_icon -->
		<label><input type="radio" name="icon" value="2"> <img src="images/icons/exclamation.gif" alt="Exclamation" title="Exclamation"></label> 
		<!-- end: posticons_icon --><!-- start: posticons_icon -->
		<label><input type="radio" name="icon" value="18"> <img src="images/icons/bug.gif" alt="Bug" title="Bug"></label> 
		<!-- end: posticons_icon --><!-- start: posticons_icon -->
		<label><input type="radio" name="icon" value="8"> <img src="images/icons/biggrin.gif" alt="Big Grin" title="Big Grin"></label> 
		<!-- end: posticons_icon -->
</td>

@My-BB.Ir: imo this would not prevent a line break between the image and the corresponding radio button...

I think you need something like

.post_icon {
   white-space: nowrap;
}

<span class="post_icon"><radio button /><img /></span>

@Nik101010 I know it but it works with only display:inline-block;
But I think white-space: nowrap; is better.

Isn't it enough to just add

white-space: nowrap;

to the surrounding label tag and remove the <br> after the 10th item and at the very end?

For me it displays correctly and has the following structure:

<td class="trow1" valign="top">
  <label for="Rainbow" style="white-space: nowrap;">
    <input type="radio" name="icon" value="15">
    <img src="images/icons/rainbow.png" alt="Rainbow" title="Rainbow" id="Rainbow">
  </label>
<!-- and so on -->
</td>

PS: in this case it would be necessary to also remove the <br> tag within the previous <td> cell where it says:

Post Icon: {radiobutton} no icon

to achieve the right height for the whole row.

EDIT: I just show the css inline for simplicity. As HolyPhoenix states below it has to be in a class/id/element within the css files of course.

Definitely need to remove that from the PHP code.

sthag had a great response, except I would add Nik101010's css class to the label instead of setting the style there (possibly just a preference thing?).

@sthag - really good, your code is OK. Please finish your idea and make a PR

Eldenroot is helping me finding the break tag within the iconlist.
The pull request is prepared but this detail was missing on my side.

I cannot find it...

@Nik1010 - can you help us?

@Eldenroot - yep I can, just found it
It is left over hard coded html... inc/functions.php get_post_icons function...

hard coded... thank you... so now @sthag you can modify your PR and push it