how to decrease the size of filter button based on...

avni26 · ‎07-15-2019

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.

vnravikumar · ‎07-17-2019

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');
        });
      });

});

avni26 · ‎07-19-2019

@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;
   }

vnravikumar · ‎07-19-2019

cool. If my solution helps you, please upvote.

vnravikumar · ‎07-15-2019

Hi

Can you post a sample screen shot?

avni26 · ‎07-16-2019

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.

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

.conf24 | Registration Open!

ICYMI - Check out the latest releases of Splunk Edge Processor

Introducing the 2024 SplunkTrust!