Dashboards & Visualizations
Highlighted

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

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
Highlighted

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

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
Highlighted

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

Path Finder

Ok but must my dashboard be in HTML?

0 Karma
Highlighted

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

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
Highlighted

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

Path Finder

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

0 Karma
Highlighted

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

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
Highlighted

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

Path Finder
0 Karma
Highlighted

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

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

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

Path Finder

yesss!! thank you so much!
alt text

0 Karma
Highlighted

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

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