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!

.conf24 | Day 0

Hello Splunk Community! My name is Chris, and I'm based in Canberra, Australia's capital, and I travelled for ...

Enhance Security Visibility with Splunk Enterprise Security 7.1 through Threat ...

(view in My Videos)Struggling with alert fatigue, lack of context, and prioritization around security ...

Troubleshooting the OpenTelemetry Collector

  In this tech talk, you’ll learn how to troubleshoot the OpenTelemetry collector - from checking the ...