Rally Cardboard render : Add item to card header - rally

Question

I want to add a value from a custom user attribute to the header of the cards in the default cardboard Kanban app. I added the following to the render function :
.....
var idDiv = document.createElement("div");
dojo.addClass(idDiv, "leftCardHeader");
header.appendChild(idDiv);
// MY NEW CODE
if(item.Domain && item.Domain.length > 0) {
var domainDiv = document.createElement("div");
domainDiv.appendChild(document.createTextNode(
" Domain: " + item.Domain));
header.appendChild(domainDiv);
}
// END MY NEW CODE
var ownerImg = document.createElement("img");
dojo.addClass(ownerImg, "cardOwner");
var ownerName = document.createElement("div");
dojo.addClass(ownerName, "cardOwnerName");
header.appendChild(ownerImg);
header.appendChild(ownerName);
....
This adds the text value to the card header but in doing so it pushes the owner name and image down a row in alignment. I have looked at the CSS but don't see any formating that is sting length dependent but I am still relatively new to this area. I tried changing the font size in the CSS but that didn't change anything adding the above code always pushes the owner name and owner image down a line.
Any help on what I might be doing wrong or if there is a cleaner way to dothis is appreciated.

Answer 1

You are appending a div, which is a block element- that is why you are getting the new line. You could either add a style of float:left to this element so it lines up next to the id or you could put the div in the card body instead- you may find it looks better there (especially on narrow width cards).