Dashboards & Visualizations

how to decrease the size of filter button based on filter value text size in dashboard

avni26
Explorer

Hi ,

I want to make the filter buttons on dashboard smaller to fit the text size(filtervalues) , so that all filter buttons comes in one line.
Is there any way to achieve this?
Please let me know.

Thanks.

Tags (1)
0 Karma

vnravikumar
Champion

Hi

Try this and adjust the width as per your need

<form script="size.js">
  <label>multiselect</label>
  <fieldset submitButton="false">
    <input type="multiselect" token="field1" id="rk">
      <label>field1</label>
      <choice value="L1">L1</choice>
      <choice value="L2">L2</choice>
      <choice value="L3">L3</choice>
      <delimiter> </delimiter>
    </input>
    <input type="multiselect" token="field2">
      <label>field2</label>
      <choice value="fdgsfdg">dfsdf6575675675675</choice>
      <delimiter> </delimiter>
    </input>
  </fieldset>
  <row depends="$hide$">
    <panel>
      <html>
       <style>

            #rk div[data-component="splunk-core:/splunkjs/mvc/components/MultiDropdown"]{
            width:70px !important;
            }
       </style>
     </html>
    </panel>
  </row>
</form>

js:

require([
    'jquery',
'splunkjs/mvc',
'splunkjs/mvc/simplexml/ready!'
], function($, mvc){
    $( "#rk" ).click(function() {
        $('[class*="ResultsMenuStyles"]').each(function() {
             $(this).attr('style','width:70px');
        });
      });

});
0 Karma

avni26
Explorer

@vnravikumar Thank you for the solution.
Instead of updating in js , i have added below part in my source code. And it worked.

     <html>
       <style>
                       #rk {
   min-width: 160px !important;
   width: 160px !important;
   max-width: 160px !important;
 }
 #rk .splunk-multidropdown .select2-container {
   min-width: 160px !important;
   width: 160px !important;
   max-width: 160px !important;
   }
0 Karma

vnravikumar
Champion

cool. If my solution helps you, please upvote.

0 Karma

vnravikumar
Champion

Hi

Can you post a sample screen shot?

0 Karma

avni26
Explorer

I am unable to attach screenshot. I can explain.
For example:
There is multiselect input filter of support group which has values L1 L2 L3 , this values are of only two letters , but input filter button is too large as per filter value.
Can we decrease the button size in dashboard.

0 Karma
Got questions? Get answers!

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

Meet up IRL or virtually!

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

Get Updates on the Splunk Community!

Step into “Hunt the Insider: An Splunk ES Premier Mystery” to catch a cybercriminal ...

After a whole week of being on call, you fell asleep on your keyboard, and you hit a sequence of buttons that ...

SplunkTrust Application Period is Officially OPEN!

It's that time, folks! The application/nomination period for the 2026-2027 SplunkTrust is officially open. If ...

Announcing Modern Navigation: A New Era of Splunk User Experience

We are excited to introduce the Modern Navigation feature in the Splunk Platform, available to both cloud and ...