Dashboards & Visualizations

Modify Input Width - XML

arielpconsolaci
Path Finder

Hi. I understand that questions have already been raised similar to mine. However, they do not seem to work on my dashboard.
My goal is to modify the width (decrease) to make my 6 inputs (dropdown, time, text) fit into one row.

I have edited my input code in the source of my dashboard as below, and edited styles.css as well.

...
...

/styles.css

resized_input {

width: 500px;

}

But it doesn't seem to be working. Hoping for advice. I appreciate it in advance.

Labels (1)
Tags (1)
1 Solution

rjthibod
Champion

There are two places you can put your specialized CSS code:

  • inline in the dashboard, or
  • included in a separate CSS file

Regarding your specific request, different input types require certain considerations for their sub-parts in order to do what you ask. That is to say you have to handle inputs types a little differently.

Assuming you are just using dropdowns and text inputs, here is the simplest/fastest way to augment the width of dropdowns and text boxes. Note, you should not mess with the timepicker input. It is very hard to make it look correct if you change its settings.

Add this code block to the bottom of your dashboard's XML just before the closing </form> or </dashboard>

  <row depends="noshow">
    <html>
      <style>
        .input-dropdown {
          min-width: 120px !important;
          width: 120px !important;
          max-width: 120px !important;
        }
        .splunk-dropdown .select2-container {
          min-width: 120px !important;
          width: 120px !important;
          max-width: 120px !important;
        }
        .input-text {
          min-width: 130px !important;
          width: 130px !important;
          max-width: 130px !important;
        }
        .input-text > input[type="text"] {
          min-width: 120px !important;
          width: 120px !important;
          max-width: 120px !important;
        }        
      </style>
    </html>
  </row>

View solution in original post

verbal_666
Builder

The code

 <html>
   <style>
     .input-dropdown {
       min-width: XXXpx !important;
       width: XXXpx !important;
       max-width: XXXpx !important;
     }
     .splunk-dropdown .select2-container {
       min-width: XXXpx !important;
       width: XXXpx !important;
       max-width: XXXpx !important;
     }
   </style>
 </html>

Works fine.

But, now, how to take a single dropdown input, not all? Example a dropdown with id="single_dropdown"?

<input type="dropdown" token="token_to_catch" id="single_dropdown">
0 Karma

verbal_666
Builder
0 Karma

rjthibod
Champion

There are two places you can put your specialized CSS code:

  • inline in the dashboard, or
  • included in a separate CSS file

Regarding your specific request, different input types require certain considerations for their sub-parts in order to do what you ask. That is to say you have to handle inputs types a little differently.

Assuming you are just using dropdowns and text inputs, here is the simplest/fastest way to augment the width of dropdowns and text boxes. Note, you should not mess with the timepicker input. It is very hard to make it look correct if you change its settings.

Add this code block to the bottom of your dashboard's XML just before the closing </form> or </dashboard>

  <row depends="noshow">
    <html>
      <style>
        .input-dropdown {
          min-width: 120px !important;
          width: 120px !important;
          max-width: 120px !important;
        }
        .splunk-dropdown .select2-container {
          min-width: 120px !important;
          width: 120px !important;
          max-width: 120px !important;
        }
        .input-text {
          min-width: 130px !important;
          width: 130px !important;
          max-width: 130px !important;
        }
        .input-text > input[type="text"] {
          min-width: 120px !important;
          width: 120px !important;
          max-width: 120px !important;
        }        
      </style>
    </html>
  </row>

nick405060
Motivator

This does not work for multiselect in 7.2. It can make a multiselect less wide, but it cannot expand on the default width

richielynch89
Path Finder

I can't get it to work in 7.2 either. It reduces the size of the of the input field but the dropdown size remains the same.

0 Karma

arielpconsolaci
Path Finder

Thank you very much for your help. It had worked on my end. The code for text input didn't work though. I've used the below instead.

.input-text {
width: 150px !important;
}
input {
width: 140px;
}

0 Karma

cucuro1111
Engager

Thanks for your Help!

0 Karma
Get Updates on the Splunk Community!

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...

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 ...