topic Re: how to decrease the size of filter button based on filter value text size in dashboard in Dashboards & Visualizations

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

avni26 — Tue, 16 Jul 2019 04:28:18 GMT

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.

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

vnravikumar — Tue, 16 Jul 2019 04:46:20 GMT

Can you post a sample screen shot?

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

avni26 — Wed, 17 Jul 2019 06:27:35 GMT

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.

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

vnravikumar — Thu, 18 Jul 2019 04:51:37 GMT

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

});

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

avni26 — Fri, 19 Jul 2019 17:16:49 GMT

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

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

vnravikumar — Fri, 19 Jul 2019 17:22:04 GMT

cool. If my solution helps you, please upvote.