Solved: Increase width of a multiselect? Of a timepicker?

nick405060 · ‎05-07-2019

Hi guys,

I've looked at all the width-adjustment-related Splunk Answers and none of them work for a multiselect in 7.2. You can decrease width with:

#ms.input-multiselect {
  min-width: 150px !important;
  width: 150px !important;
  max-width: 150px !important;
}

but not increase it. How can you do this with a multiselect?

How about a timepicker?

vnravikumar · ‎05-07-2019

Hi

Try this

<form>
  <label>multiselect</label>
  <fieldset submitButton="false">
    <input type="multiselect" token="field1" id="resized_input">
      <label>field1</label>
      <choice value="q">testtesttest</choice>
      <delimiter> </delimiter>
    </input>
    <input type="dropdown" token="field2">
      <label>field2</label>
    </input>
  </fieldset>
  <row depends="$hide$">
    <panel>
      <html>
      <style>
            #resized_input div[data-component="splunk-core:/splunkjs/mvc/components/MultiDropdown"]{
              width: 500px !important;
            }

           #resized_input div[data-view="splunkjs/mvc/multidropdownview"]{
              width: 500px !important;
              margin-right: auto !important;
            }

           .fieldset .input{
           width:auto !important;
           }
      </style>
    </html>
    </panel>
  </row>
</form>

View solution in original post

betm · ‎08-08-2019

Make sure to set a panel id in xml so that the html can recognize it after the #
To expand length of panel:

set a panel id
Change size of object with that id in html

for example:

<input type="multiselect" token="panel" id="example_id"> 
    .... 
</input>
<html>

<style type="text/css">

#example_id div[data-component="splunk-core:/splunkjs/mvc/components/MultiDropdown"]{

           width: 400px !important;

         }


#example_id div[data-view="splunkjs/mvc/multidropdownview"] {

           width: 400px !important;

           margin-right: auto !important;

         }

#example_id div[class="splunk-view splunk-multidropdown splunk-choice-input"]{

           width: 400px !important;

           margin-right: auto !important;

         }



        .fieldset .input{

        width:auto !important;

        }      

</style>

</html>

Note:
id="example_id
#example_id

vnravikumar · ‎05-07-2019

Hi

Try this

<form>
  <label>multiselect</label>
  <fieldset submitButton="false">
    <input type="multiselect" token="field1" id="resized_input">
      <label>field1</label>
      <choice value="q">testtesttest</choice>
      <delimiter> </delimiter>
    </input>
    <input type="dropdown" token="field2">
      <label>field2</label>
    </input>
  </fieldset>
  <row depends="$hide$">
    <panel>
      <html>
      <style>
            #resized_input div[data-component="splunk-core:/splunkjs/mvc/components/MultiDropdown"]{
              width: 500px !important;
            }

           #resized_input div[data-view="splunkjs/mvc/multidropdownview"]{
              width: 500px !important;
              margin-right: auto !important;
            }

           .fieldset .input{
           width:auto !important;
           }
      </style>
    </html>
    </panel>
  </row>
</form>

nick405060 · ‎05-07-2019

@vnravikumar If you know how to increase the width of a time picker (just the undropped part, e.g. "Last 24 hours"), let me know and I will update this question to be "Increase width of a multiselect? Timepicker?"

If not, I'll post a separate SA question about increasing the width of a timepicker. Thanks again!

vnravikumar · ‎05-07-2019

Hi

Try this

<form>
  <label>timepicker</label>
  <fieldset submitButton="false">
    <input type="time" token="timepicker" id="resized_input">
      <label></label>
      <default>
        <earliest>-24h@h</earliest>
        <latest>now</latest>
      </default>
    </input>
    <input type="dropdown" token="field1">
      <label>field1</label>
    </input>
  </fieldset>
  <row>
    <panel>
      <table>
        <search>
          <query>index="_internal" |stats count by source</query>
          <earliest>$timepicker.earliest$</earliest>
          <latest>$timepicker.latest$</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
  <row depends="$hide$">
    <panel>
      <html>
       <style>

            #resized_input div[data-view="splunkjs/mvc/timerangeview"]{
               width: 500px !important;
               margin-right: auto !important;
             }

            .fieldset .input{
            width:auto !important;
            }
       </style>
     </html>
    </panel>
  </row>
</form>

nick405060 · ‎05-07-2019

AWESOME. Works. Updated question. Ty.

nick405060 · ‎05-07-2019

YES. Tyvm!

Increase width of a multiselect? Of a timepicker?

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Design, Compete, Win: Submit Your Best Splunk Dashboards for a .conf26 Pass

May 2026 Splunk Expert Sessions: Security & Observability

Network to App: Observability Unlocked [May & June Series]

Join the Conversation

Increase width of a multiselect? Of a timepicker?

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Design, Compete, Win: Submit Your Best Splunk Dashboards for a .conf26 Pass

May 2026 Splunk Expert Sessions: Security & Observability

Network to App: Observability Unlocked [May & June Series]