How to have events show closer together and delete the whitespace between two rows of events

[Genti]

So, the customer wants to see less whitespace between each row of events.
As it currently is, if you use /en-US/ in your address bar (basically if your browser language is US English) then the timestamp gets cut between the date and hour and a new line is introduced.

Also, there is a huge amount of space between two rows of events. here is a screenshot of it: screenshot

Cheers,
.gz

[sideview · Accepted solution]

The reason why you often see a difference in behavior by changing the locale, is that the en-US locale for some reason includes an explicit <br> tag in the timestamp format. More notes on this weird trick below.

To get the end result that you want -- to squeeze the whitespace out, remove the borders and take away any <br> tags, you can put this in /etc/apps//appserver/static/application.css

/* takes away the border and the whitespace from the default event renderer */
.EventsViewer .default {
    border-bottom:0px;
    padding-bottom:0px;
    padding-top:0px;
}
/* takes away any br tags that may be included in the timestamp as a part of the localization */
.EventsViewer em.time br {
    display:none;
}
/* tell the browser not to let the timestamp wrap. */
.EventsViewer em.time {
    white-space:nowrap;
}

NOTE 1: Customizing application.css.
Unfortunately the 'search' app in Splunk ships its own application.css. This means that if and when you modify that file, know that your modifications will get blown away when you upgrade splunk. You could also start using your own app instead of the 'search' app. the search app's application.css wont apply then and you will be free to rock your own custom CSS across upgrades... (see docs for more details about custom CSS -- http://www.splunk.com/base/Documentation/latest/Developer/UseCSS)

NOTE 2: changing the locale as a trick to effect rendering:::

Changing en-US to en-GB does more often result in the timestamp fitting on one line, but not always. Even without the <br> tag introduced by en-US, if your window size and your event text is of certain lengths you can see wrapping behaviour even in en-GB. And what may be more annoying, if your events are of different lengths you may well see both behaviors even within a single result set.

Essentially I see this as a bug, but if it achieves the end result and its a net-positive and if you're more comfortable with the en-GB locale formatting, go for it. 😃

[jds123]

Scratch that. I have the jQuery code working to edit the CSS, the problem is that this EventsViewer module runs on top of a real-time search and it resets the style each time it loads. Now I just need to find the JS trigger to convert the events before they are displayed in real-time.

[jds123]

Do you know how I could implement this same solution using jQuery in application.js? I would like to have it only work for a single one of my views. I can't seem to get it working. Thanks.

[Genti]

ok doesnt seem like ahref works with comments... Here is what you get: http://i29.tinypic.com/34tep6p.jpg

[Genti]

So, this is a small bug with the way the ui cuts the date/time stamp. If you change your address to /en-GB/ in your browser or if you change your browser language to en-GB you will not see the issue with the line break between date and time. Here,s a screenshot.

Ill let Nick (one of our very helpful UI-dev's) comment on how to remove the extra space (padding) between two rows of events.

Cheers,
.gz