All Apps and Add-ons

sideview fields formatting ( textfield + timerangepicker )

johnnymc
Path Finder

Hello,
i'm unable to properly put Textfield + TimeRangePicker + SubmitButton on the same line without playing with the CSS.
Here is the result:

alt text

below is the original code.

<view autoCancelInterval="90" isPersistable="true" isSticky="true" isVisible="true" objectMode="viewconf" onunloadCancelJobs="true" template="dashboard.html">
  <label>Tabulati Accesso: Posta Nuova Piattaforma CGP</label>
  <module name="AccountBar" layoutPanel="appHeader" />
  <module name="SideviewUtils" layoutPanel="appHeader" />
  <module name="AppBar" layoutPanel="navigationHeader" />
  <module name="Message" layoutPanel="messaging">
    <param name="filter">*</param>
    <param name="clearOnJobDispatch">False</param>
    <param name="maxSize">1</param>
  </module>
  <module name="TitleBar" layoutPanel="viewHeader">
    <param name="actionsMenuFilter">dashboard</param>
  </module>
  <module name="TextField" layoutPanel="mainSearchControls" autoRun="False">
    <param name="name">Account</param>
    <param name="label">Account email(completo) del cliente: </param>
    <param name="template">Account="$value$"</param>
    <module name="TimeRangePicker"  layoutPanel="mainSearchControls">
      <param name="searchWhenChanged">False</param>
      <param name="default">Last 24 hours</param>
      <module name="SubmitButton"  layoutPanel="mainSearchControls">
        <param name="allowSoftSubmit">True</param>
        <module name="Search" autoRun="False"> .. </module>
      </module>
    </module>
  </module>
</view>

i don't know if this is a sideview-utils -related issue..
please help. thanks.

1 Solution

sideview
SplunkTrust
SplunkTrust

Well, you can use the 'float' param on TextField and Pulldown, but a) this doesnt help you to float the TimeRangePicker module, and b) the float param is suboptimal because it takes effect after the page loads. So 'float' is useful but it's a little quick and dirty.

So the real solution involves writing a little custom CSS.

What I do in my apps is a little more complicated, but here's a simplified version:

a) Put all these controls in the 'mainSearchControls' layoutPanel,

b) either use Button instead of SubmitButton, or change the references in c) to say 'SubmitButton'.

c) then put this in application.css

/* floating everybody  */
.mainSearchControls .TimeRangePicker,
.mainSearchControls .Pulldown,
.mainSearchControls .TextField,
.mainSearchControls .Button {
    float:left;
}
/* 
fixing the TimeRangePicker to look like a normal control
*/
.TimeRangePicker {
    margin-bottom:0px;
    padding-bottom:5px;
}
.TimeRangePicker .outerMenuWrapper {
    margin-top:-1px;
}
.TimeRangePicker .timeRangeActivatorWrapper {
    float:left;
    background-image: none;
    background-color:#fff;
    -moz-border-radius: 0px;
    min-height:22px;
    padding-top:0px;
}
.TimeRangePicker .timeRangeActivator {
    padding-top:0px;
}
.TimeRangePicker .timeRangeActivatorWrapper span.splIcon {
    margin-top:8px;
}
.TimeRangePicker label {
    display:block;
    float:left;
}
.TimeRangePicker label {
    padding-top:4px;
}

What I do in my apps that's a little more involved, is::

1) I look at each control set, get the labels as concise as humanly possible, then I measure the width of the longest label. Then I use CSS to set all the labels to that width, and give them text-align:right. This will seem really bizarre unless you also do step #2 below. 😃

2) Then I look at all the pulldowns and textfields themselves. Generally you can break them up into a set of 'long' controls where the content is pretty long and a set of short controls. With a little pencil and paper and a lot of experimentation you can set the width of the actual input, select and timeRangeActivatorWrapper elements, and also set the width of the .Pulldown, .TextField and .TimeRangePicker divs, such that they float quite nicely. If you dont feel like there's a 'long' set and a 'short' set, the pencil and paper stuff is easier and you just have to fight the inputs and selects and divs so that they have the same effective width.

You can see a final example of this in the Sideview Web Analytics app [on splunkbase | on sideviewapps.com]. Download and install it and check out one of the reporting interfaces.

hope that helps.

View solution in original post

sideview
SplunkTrust
SplunkTrust

Well, you can use the 'float' param on TextField and Pulldown, but a) this doesnt help you to float the TimeRangePicker module, and b) the float param is suboptimal because it takes effect after the page loads. So 'float' is useful but it's a little quick and dirty.

So the real solution involves writing a little custom CSS.

What I do in my apps is a little more complicated, but here's a simplified version:

a) Put all these controls in the 'mainSearchControls' layoutPanel,

b) either use Button instead of SubmitButton, or change the references in c) to say 'SubmitButton'.

c) then put this in application.css

/* floating everybody  */
.mainSearchControls .TimeRangePicker,
.mainSearchControls .Pulldown,
.mainSearchControls .TextField,
.mainSearchControls .Button {
    float:left;
}
/* 
fixing the TimeRangePicker to look like a normal control
*/
.TimeRangePicker {
    margin-bottom:0px;
    padding-bottom:5px;
}
.TimeRangePicker .outerMenuWrapper {
    margin-top:-1px;
}
.TimeRangePicker .timeRangeActivatorWrapper {
    float:left;
    background-image: none;
    background-color:#fff;
    -moz-border-radius: 0px;
    min-height:22px;
    padding-top:0px;
}
.TimeRangePicker .timeRangeActivator {
    padding-top:0px;
}
.TimeRangePicker .timeRangeActivatorWrapper span.splIcon {
    margin-top:8px;
}
.TimeRangePicker label {
    display:block;
    float:left;
}
.TimeRangePicker label {
    padding-top:4px;
}

What I do in my apps that's a little more involved, is::

1) I look at each control set, get the labels as concise as humanly possible, then I measure the width of the longest label. Then I use CSS to set all the labels to that width, and give them text-align:right. This will seem really bizarre unless you also do step #2 below. 😃

2) Then I look at all the pulldowns and textfields themselves. Generally you can break them up into a set of 'long' controls where the content is pretty long and a set of short controls. With a little pencil and paper and a lot of experimentation you can set the width of the actual input, select and timeRangeActivatorWrapper elements, and also set the width of the .Pulldown, .TextField and .TimeRangePicker divs, such that they float quite nicely. If you dont feel like there's a 'long' set and a 'short' set, the pencil and paper stuff is easier and you just have to fight the inputs and selects and divs so that they have the same effective width.

You can see a final example of this in the Sideview Web Analytics app [on splunkbase | on sideviewapps.com]. Download and install it and check out one of the reporting interfaces.

hope that helps.

johnnymc
Path Finder

thanks. your css worked for me.

0 Karma

RicoSuave
Builder

It's not a sideview issue. It's purely css. Use the float parameter for the textfield module with a value of left. Download firebug for firefox to inspect the elements on the webpage and figure out what class needs to be updated. You're going to have to create a new css file and drop it in the static directory of your app, then specify your view to use the stylesheet.

   .dashboardContent .TextField {
    float:left;
    margin-right:10px;
}
.dashboardContent .StaticContentSample {
    float:left;
    padding-top:3px;
}

.dashboardContent .Pager {
    clear: both;
}
.mainSearchControls .Pulldown .ui-dropdownchecklist label {
    float:none;
    text-align:left;
    padding:0px;
    width:auto;
}
.mainSearchControls .Pulldown .ui-dropdownchecklist input {
    display:block;
    float:left;
    clear:both;
    border:0px;
}
.ui-dropdownchecklist-dropcontainer{
    width: 150px;
}

.TimeRangePicker {
    margin-bottom:0px;
}
.TimeRangePicker .timeRangeActivatorWrapper {
    float:left;
    padding-top:0px;
    margin-top: 0px !important;
}
.TimeRangePicker .outerMenuWrapper {
    margin-top:-1px;
}
.TimeRangePicker .timeRangeActivatorWrapper {
    background-image: none;
    background-color:#fff;
    -moz-border-radius: 0px;
    min-height:20px;
    padding-top:0px;
}
.TimeRangePicker .timeRangeActivator {
    padding-top:0px;
}
.TimeRangePicker .timeRangeActivatorWrapper span.splIcon {
    margin-top:8px;
}
.TimeRangePicker label {
    display:block;
    float:left;
}
.TimeRangePicker label {
    padding-top:4px;
}



That code should do the trick. 

RicoSuave
Builder

ah, i usually place my controls in their own panel usually on the first row. I like you css better though, thanks for the input 😄

0 Karma

sideview
SplunkTrust
SplunkTrust

Note: much of this code applies only to situations where the controls are within rounded-corner dashboard panels, or concerns the "dropdownchecklist" plugin for jquery which isnt a part of the stated question.

0 Karma
Get Updates on the Splunk Community!

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

Splunk is officially part of Cisco

Revolutionizing how our customers build resilience across their entire digital footprint.   Splunk ...

Splunk APM & RUM | Planned Maintenance March 26 - March 28, 2024

There will be planned maintenance for Splunk APM and RUM between March 26, 2024 and March 28, 2024 as ...