How to horizontally aligned dropdowns

[chiwang]

Can someone tell me how to change the following (from Splunk UI example) so that the "field" and "value" dropdowns are next to each other horizontally? Here's the advanced xml:

<?xml version="1.0"?>
<view onunloadCancelJobs="False" autoCancelInterval="100">
  <!--  autoCancelInterval is set here to 100  -->
  <label>2 listers driving multiple elements</label>
  <module name="AccountBar" 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="HiddenSearch" layoutPanel="mainSearchControls" autoRun="True">
    <param name="search">index=_internal source="*metrics.log" metrics</param>  
    <module name="StaticSelect">
      <param name="settingToCreate">group</param>
      <param name="label">field:</param>
      <param name="staticFieldsToDisplay">
        <list>
          <param name="label">Index</param>
          <param name="value">per_index_thruput</param>
        </list>
        <list>
          <param name="label">Source</param>
          <param name="value">per_source_thruput</param>
        </list>
        <list>
          <param name="label">Sourcetype</param>
          <param name="value">per_sourcetype_thruput</param>
        </list>
        <list>
          <param name="label">Host</param>
          <param name="value">per_host_thruput</param>
        </list>
      </param>
      <module name="ConvertToIntention">
        <param name="settingToConvert">group</param>
        <param name="intention">
          <param name="name">addterm</param>
          <param name="arg">
            <param name="group">$target$</param>
          </param>
        </param>

        <module name="SearchSelectLister">
          <param name="searchWhenChanged">True</param>
      
          <param name="settingToCreate">series_setting</param>
          <param name="label">value:</param>
          <param name="applyOuterIntentionsToInternalSearch">True</param>
          <param name="search">index=_internal source="*metrics.log" metrics group series | head 5000 | top limit=200 series | sort series</param>
          <param name="searchFieldsToDisplay">
            <list>
              <param name="label">series</param>
              <param name="value">series</param>
            </list>
          </param>
          <module name="ConvertToIntention">
            <param name="settingToConvert">series_setting</param>
            <param name="intention">
              <param name="name">addterm</param>
              <param name="arg">
                <param name="series">$target$</param>
              </param>
            </param>



            <module name="TimeRangePicker">
              <!-- 
              <param name="label">time range:</param>
              -->
              <param name="selected">Last 4 hours</param>
              <param name="searchWhenChanged">True</param>
              <module name="SubmitButton">
                <param name="allowSoftSubmit">True</param>
                <param name="label">Search</param>
                
            
                <module name="Message" layoutPanel="graphArea">
                  <param name="filter">splunk.search.job</param>
                  <param name="clearOnJobDispatch">True</param>
                  <param name="maxSize">2</param>
                  <module name="GenericHeader" layoutPanel="resultsAreaLeft">
                    <param name="label">KB Indexed over time</param>
                  </module>
                  <module name="HiddenSearch" layoutPanel="resultsAreaLeft">
                    <param name="search">index=_internal metrics NOT source="*web_service.log" NOT source="*access.log" NOT source="*/searches.log" NOT source="*intentions.log" NOT source="*splunkd.log" | timechart sum(kb)</param>
                    <module name="HiddenChartFormatter">
                      <param name="chart">column</param>
                      <param name="primaryAxisTitle.text">(Selected Series)</param>
                      <param name="secondaryAxisTitle.text">KB Indexed</param>
                      <param name="legend.placement">none</param>
                      <module name="JobProgressIndicator"/>
                      <module name="FlashChart">
                        <param name="width">100%</param>
                        <param name="height">200px</param>
                      </module>
                    </module>
                  </module>
                  <module name="GenericHeader" layoutPanel="resultsAreaLeft">
                    <param name="label">Event throughput over time</param>
                  </module>
                  <module name="HiddenSearch" layoutPanel="resultsAreaLeft">
                    <param name="search">index=_internal metrics NOT source="*web_service.log" NOT source="*access.log" NOT source="*/searches.log" NOT source="*intentions.log" NOT source="*splunkd.log" | timechart min(eps) avg(eps) max(eps)</param>
                    <module name="HiddenChartFormatter">
                      <param name="chart">line</param>
                      <param name="primaryAxisTitle.text">(Selected Series)</param>
                      <param name="secondaryAxisTitle.text">event throughput</param>
                      <param name="legend.placement">bottom</param>
                      <module name="JobProgressIndicator"/>
                      <module name="FlashChart">
                        <param name="width">100%</param>
                        <param name="height">200px</param>
                      </module>
                    </module>
                  </module>
                </module>
              </module>
            </module>
          </module>
        </module>
      </module>
    </module>
  </module>

</view

[sideview · Accepted solution]

If you use Sideview Utils, you can just use the Pulldown module isntead of StaticSelect and SearchSelectLister. And then you just use the "float" param on the Pulldown module.

Here's a 10min screencast demo and walkthrough of using Pulldown to replace StaticSelect/SearchSelectLister/ConvertToIntention

http://www.youtube.com/watch?v=fkXBgkwZoEQ

and you can get Sideview Utils from here, and it's free for internal use http://sideviewapps.com/apps/sideview-utils/

On the other hand if you're not using Sideview Utils then in the core systems you will have to use some custom css packaged at the app level to do it,. Create an application.css file at /etc/apps/YourAppGoesHere/appserver/static/application.css and then apply a style such as:

.splView-YourViewNameGoesHere .StaticSelect,
.splView-YourViewNameGoesHere .SearchSelectLister {
float:left;
}

However depending on what else you have going on in the page, often you need a little more css complexity than that - like the TimeRangePicker might need to be floated which works a little differently, or some other things might be floated and you then need to apply a "clear" style. try it out and see.