Solved: How to modify the width to 350 pixels for the drop...

splunk6161 · ‎08-03-2017

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

Analyzing the webpage i see this:

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

Thanks

rjthibod · ‎08-03-2017

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

splunk6161 · ‎07-10-2019

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

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

rjthibod · ‎08-03-2017

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

splunk6161 · ‎08-04-2017

Ok but must my dashboard be in HTML?

rjthibod · ‎08-04-2017

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.

splunk6161 · ‎08-04-2017

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

rjthibod · ‎08-04-2017

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>

splunk6161 · ‎08-04-2017

rjthibod · ‎08-04-2017

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 · ‎08-04-2017

yesss!! thank you so much!

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

Join Us for Splunk University and Get Your Bootcamp Game On!

.conf24 | Learning Tracks for Security, Observability, Platform, and Developers!

Announcing Scheduled Export GA for Dashboard Studio