Try this approach:

1. Create a UI Macro named "idea_categories"

   <?xml version="1.0" encoding="utf-8" ?>
   <j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
   	<!-- Get the categories -->
       <g2:evaluate var="jvar_categories" object="true">
   		var imIdeaCategory = new global.IMIdeaCategory();
   		var categories = imIdeaCategory.getCategoriesForIdea(current.getUniqueValue());
   		var categoryList = [];
   		if (Array.isArray(categories)) {
   			categories.forEach(function(category) {
   				if (category.hasOwnProperty('name')) {
   					categoryList.push(category.name);
   				}
   			});
   		}
   		categoryList;
       </g2:evaluate>
       <!-- Display the categories -->
   	<div class="idea-categories clearfix">
   		<div class="label_spacing">
   			<label dir="ltr" class="control-label col-xs-12 col-md-1_5 col-lg-2  col-xs-12 col-md-1_5 col-lg-2">
   				<span class="category-title">Categories</span>
   			</label>
   		</div>
   		<div class="col-xs-10 col-md-9 col-lg-8">
   			<j2:forEach items="$[jvar_categories]" var="jvar_category">
   			<span class="category-badge">$[jvar_category]</span>
   			</j2:forEach>
   		</div>
   	</div>
       <!-- Styles for the category buttons -->
       <style>
           .idea-categories {
   			margin: 0 0 10px;
           }
           .category-badge{
   			color: #2e2e2e;
   			background-color: #f5f5f5;
   			padding: 5px 10px;
   			display: inline-block;
   			border: 1px solid #ddd;
   			border-radius: 4px;
   			margin-right: 5px;
   			margin-bottom: 10px;
           }
       </style>
   </j:jelly>

    

2. Create a UI Formatter (the value in "Formatter" must match the name of the UI Macro)

    

3. Add the "Categories" formatter to the Idea form (probably under "Title")

Good luck!