Joy of CSS

[VinceAngelo]

So I needed to add a button to an existing JavaScript/HTML app to fire a servlet app I had written.  The existing UI had a button on the top-left and a text banner in the top-middle, so I figured I could add the new button after the center text and all would be well, right?  Uh, no.

I added the button, and it wasn't displayed:

I was able to use Firebug to verify the new button was added, but it got wedged under other panels in the interface, and wasn't clickable.  Doh!

The solution was easier than I thought.  In frustration, with a delivery deadline looming, I decided to add the button between the original button and the banner, and lo and behold, the button appeared, in the right place!

It was only after I thought about it for a while that the behavior made sense.  The first button had: 

    dojo.create("div", {
            className: "expandRightIcon",
            style: {
                    marginLeft: "6px",
                    marginTop: "7px",
                    display: "inline-block",
                    float: "left"
            },
            title: "Hide Panel",
            onclick: (function(thisPanel) {
                    return function() {
                            dojo.publish(/*redacted*/);
                    };
            })(this)
    }, mainHeader);

But the banner was just:

    dojo.create("div", {innerHTML: "Results"}, mainHeader);

So when I added:

    this._reportButtonDiv = dojo.create("div", {
            className: "openReportIcon",
            style: {
                    marginRight: "6px",
                    marginTop: "7px",
                    display: "inline-block",
                    float: "right"
            },
            title: "Generate Attribute Report",
            onclick: (function(thisPanel) {
                    return function() {
                            dojo.publish(/*redacted*/);
                    };
            })(this)
    }, mainHeader);

after the Results div, there wasn't anywhere for it to "float".  But by placing the left, then right buttons, then adding the generic div, the browser was able to figure out what I wanted.