Pulldown progress bar is incorrectly aligned

[spock_yh]

I noticed that in my dashboards, built with Sideview Utils, the progress bar that appears on top of the Pulldown when loading options from a search isn't properly aligned. It's a few pixels to the right of the left edge of the selection box.

Digging into the JavaScript code for the module I found a fix. I replaced the getSelectOffset function by:

getSelectOffset: function() {
    var l = this.select.position().left;
    l += parseInt(this.select.css("margin-left"));
    l += parseInt(this.select.css("border-left-width"));
    return l;
},

But the problem is that every update to the sideview utils app overrides this fix.

Anyone encountered this before? Do you know if this is really a bug in sideview utils or maybe I'm doing something else wrong?

[sideview · Accepted solution]

I think I just haven't encountered an app where it's custom CSS gave the Pulldown a margin-left. I'll take a look. At a pinch you could also just rework the CSS to not have margin-left there.

UPDATE: There was a change to the core CSS in Splunk 4.3 that caused this problem and Sideview Utils has been updated to fix this problem as of 1.3.1.

[sideview]

Scratch that. Posted the new version of Utils now, so go pull it down. It should fix this issue in all cases and do no harm.

[sideview]

I see the root cause. In 4.3 they gave the dashboardCell class a position:relative rule. Which can be a useful trick to resolve float weirdness but in this case breaks my use of offset(). I would stay away from that JS fix that spock posted. The better fix seems to be to use offset() for both the getting and setting side. I'll post the fix in the next maintenance release of Utils coming this week.

[greg]

Hi, I've got the same problem right after upgrading to Splunk 4.3.

In previous versions 4.2.x, the progress was properly aligned.
Also I haven't done any changes in my custom CSS file and the code of my view since Splunk 4.2.4.

Thus, I suppose some changes in Splunk 4.3 UI may cause such misalignment. Maybe, you can recommend any other solution except modifying Pulldown.js?

[sideview]

OK. If it's no trouble could you email me the view and any application.css and custom CSS you have? I haven't seen this problem on any other apps yet.

[spock_yh]

I think the issue was rather that the previous code used offset(), which is relative to the document, while the progress bar uses position: absolute, which is relative to its first positioned ancestor. In our case (not sure why, maybe it's like that in splunk 4.3?) the first positioned ancestor was the dashboard cell, not the document. So the progress bar was offset too much to the right.