Dashboards & Visualizations

How to make a drop-down form wider?

johnraftery
Communicator

Hi,

I have a very simple UI question 🙂

The default width of drop-down boxes is too short to display enough information in my use case. Can it be extended?

Thanks,
John

0 Karma

Yunagi
Communicator
0 Karma

johnraftery
Communicator

I tried the CSS solution described here;
https://answers.splunk.com/answers/295879/how-can-i-extend-the-width-of-my-drop-down-box-in.html

But instead of making the inputbox wider, it shifted the rest of the row further to the right giving 500px of space. Is this the correct CSS?
#resized_input {
width: 500px;
}

0 Karma

markthompson
Builder

Hi there - that CSS is fine given that you have applied the ID to the tag. If you have it anywhere else, then it would push it.

johnraftery
Communicator

I've applied the ID like this:

      <input type="dropdown" token="tps_logger_method" searchWhenChanged="true" id="resized_input">
        <label>Select a logger name</label>
        <search>
          <query>eventtype=mlc2 sourcetype=tps host=$host_token$ | table name | dedup name | sort name</query>
          <earliest>$time_token.earliest$</earliest>
          <latest>$time_token.latest$</latest>
        </search>
        <fieldForLabel>name</fieldForLabel>
        <fieldForValue>name</fieldForValue>
        <default>murex.limits.engine.stream.histo.TPSHistoCounter</default>
      </input>

And the stylesheet is referenced in the form tag like this:

<form script="table_cell_highlighting.js,simple_xml_examples:tokenlinks.js" stylesheet="table_cell_highlighting.css,single_decorations.css">

But it's still not working I'm afraid.

0 Karma

johnraftery
Communicator

Do I need to restart splunk after updating the CSS?

0 Karma

johnraftery
Communicator

Thanks. I've had a look at these and they are probably what I need, but I don't understand how to convert the dashboard to HTML and then override the CSS. What exactly do I need to do?

0 Karma
Get Updates on the Splunk Community!

Prove Your Splunk Prowess at .conf25—No Prereqs Required!

Your Next Big Security Credential: No Prerequisites Needed We know you’ve got the skills, and now, earning the ...

Splunk Observability Cloud's AI Assistant in Action Series: Observability as Code

This is the sixth post in the Splunk Observability Cloud’s AI Assistant in Action series that digs into how to ...

Splunk Answers Content Calendar, July Edition I

Hello Community! Welcome to another month of Community Content Calendar series! For the month of July, we will ...