Dashboards & Visualizations

Increase width of a multiselect? Of a timepicker?

nick405060
Motivator

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?

0 Karma
1 Solution

vnravikumar
Champion

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
Engager

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

  1. set a panel id
  2. 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

0 Karma

vnravikumar
Champion

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
Motivator

@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!

0 Karma

vnravikumar
Champion

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
Motivator

AWESOME. Works. Updated question. Ty.

0 Karma

nick405060
Motivator

YES. Tyvm!

0 Karma
Get Updates on the Splunk Community!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...