Hi All,

One of the things I'm stuggling with and a see a lot of other people asking question about is the ability to have macro's displayed in the Grid as inline instead of as a block element.

Wish there was a setting in umbraco to make macro's inline, or have them always inline because everyone could put a div inside there macro if they need it, but the other wat around trying to remove the outer div and

On the front end this is easy, my macro is named DisplayImage, so just adding this to any css will do the trick (change DisplayImage to your Macro name):

.umb-macro-holder.DisplayImage {
display: inline-block;

}

But for the backend it's more difficult, because the grid loads in an iframe which is basicly an HTML document within a HTML document. This IFrame doesn't necessary have to be loaded after the main HTML document is loaded.

To be able to change styles within this IFrame and a real WYSIWYG feel, I came up with the following, but since it feels more like a hack, I would like to get feedback if anyone has suggestions to improve this or have a completly different solution then this.

Any within a plugin I've included a custom made JS file I've called tinyMceCustom.js in this I have the following (note I'm assuming there is just 1 IFrame and I only apply this solution to the macro DisplayImage):

(function ($) {

    function checkIframeLoaded() {
        // Get a handle to the iframe element
        var iframe = $(".umb-grid IFRAME")[0]; // document.getElementById('i_frame');

        if (typeof iframe === "undefined") {
            window.setTimeout(checkIframeLoaded, 2000);
            return;
        }

        if (typeof iframe.id === "undefined") {
            window.setTimeout(checkIframeLoaded, 2000);
            return;
        }

        var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

        // Check if loading is complete
        if (iframeDoc.readyState == 'complete') {
            // The loading is complete, call the function we want executed once the iframe is loaded
            afterLoading();
            return;
        }
        // If we are here, it is not loaded. Set things up so we check   the status again in 1000 milliseconds
        window.setTimeout(checkIframeLoaded, 1000);
    }

    function afterLoading() {
        //$(".umb-grid IFRAME").contents().find("head").append("<style>body{background-color:yellow;}</style>");
        $(".umb-grid IFRAME").contents().find("head").append("<style>.mce-content-body .umb-macro-holder.DisplayImage {display:inline-block;}</style>");
    }

    $(window).on('load', function () {
        checkIframeLoaded();
    });
})(jQuery);

Note uncomment the background-color:yellow; line to have a quick debug.