Dashboards & Visualizations

How to modify the width to 350 pixels for the drop-down input in my dashboard?

splunk6161
Path Finder

Hi
This is default width for the dropdown input in my dashboard:
alt text

Analyzing the webpage i see this:
alt text

How to modify the width to 350px in splunkjs\mvc\dropdownview.js file?

Thanks

0 Karma
1 Solution

rjthibod
Champion

You don't want to edit the JS file. That will be a bad idea.

First, these are the CSS settings you want to use.

.input-dropdown {
  width: 350px;
}

.input-dropdown > .splunk-dropdown > .select2-container {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
}

Now, you can put those settings in two places.

1 - you can put those settings directly in the SimpleXML of a dashboard using this:

<row depends="$hiddenCSS$">
  <html>
    <style> 
      /* copy css here */
    </style>
  </html>
</row>

2 - You can put those settings in a file called dashboard.css that you then copy into the app you are using. The file should be in the location <SPLUNK_APP_ROOT_FOLDER>/appserver/static

View solution in original post

0 Karma

splunk6161
Path Finder

Same request on splunk 7.3.0 but previous CSS doesn't work.:

alt text

With inspector i analyze the page, when i modify the width parameter, target reached:

alt text

0 Karma

rjthibod
Champion

You don't want to edit the JS file. That will be a bad idea.

First, these are the CSS settings you want to use.

.input-dropdown {
  width: 350px;
}

.input-dropdown > .splunk-dropdown > .select2-container {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
}

Now, you can put those settings in two places.

1 - you can put those settings directly in the SimpleXML of a dashboard using this:

<row depends="$hiddenCSS$">
  <html>
    <style> 
      /* copy css here */
    </style>
  </html>
</row>

2 - You can put those settings in a file called dashboard.css that you then copy into the app you are using. The file should be in the location <SPLUNK_APP_ROOT_FOLDER>/appserver/static

0 Karma

splunk6161
Path Finder

Ok but must my dashboard be in HTML?

0 Karma

rjthibod
Champion

I'm confused. Are you asking if it should be in HTML, or are you saying that your dashboard is in HTML?

If you are using a SimpleXML dashboard (the default way of building dashboards), then both methods I provided work. If you are using an HTML dashboard, then you should put the CSS I gave you in a CSS file in your app and then reference it in your HTML/JS.

0 Karma

splunk6161
Path Finder

my dashboard using SimpleXML but i asked you because it doesn't work.

0 Karma

rjthibod
Champion

So, are you saying that it doesn't work if you put the following at the end of you SimpleXML dashboard just before the closing </form>? Make sure it is inside the final closing tag.

<row depends="$hiddenCSS$">
   <html>
     <style> 
        .input-dropdown {
          width: 350px;
        }

        .input-dropdown > .splunk-dropdown > .select2-container {
          width: 100% !important;
          max-width: 100% !important;
          min-width: 100% !important;
        }
      </style>
    </html>
 </row>
0 Karma

splunk6161
Path Finder

alt text

0 Karma

rjthibod
Champion

OK, I see the issue. It's my bad. Doing inline CSS has some limitations. To get it to work, do the following

Add update the dropdown to have a unique id, like this: <input type="dropdown" searchWhenChanged="true" token="ots_name" id="ots_name">

And then update the CSS to this

   <row depends="$hiddenCSS$">
    <html>
      <style> 
         #ots_name {
           width: 350px !important;
         }

         #ots_name .select2-container {
           width: 100% !important;
           max-width: 100% !important;
           min-width: 100% !important;
         }
       </style>
     </html>
  </row>
</form>

splunk6161
Path Finder

yesss!! thank you so much!
alt text

0 Karma
Get Updates on the Splunk Community!

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

Splunk is officially part of Cisco

Revolutionizing how our customers build resilience across their entire digital footprint.   Splunk ...

Splunk APM & RUM | Planned Maintenance March 26 - March 28, 2024

There will be planned maintenance for Splunk APM and RUM between March 26, 2024 and March 28, 2024 as ...