Rally Cardboard render : Add item to card header

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).