Hi,
I have a lot of text in a drop-down - too much to display in the default window size. To make the box wider, 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 input box wider, it shifted the rest of the row further to the right giving 500px of space. This is the CSS I have applied:
#resized_input {
width: 500px;
}
And this is where I reference the id:
<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>
Can anyone see what I'm doing wrong?
Thanks!
Hi!
This work in Splunk versions 7 and 8
<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>
<row depends="noshow">
<panel>
<html>
<style>
#resized_input { width: 500px; }
#resized_input [data-component] { width: auto !important; }
</style>
</html>
</panel>
</row>
This work on all inputs: radio, dropdown, checkbox, multiselect, link, time.
But on multiselect input you need to set the width exactly to size.
Example:
#multiselect_input { width: 500px; }
#multiselect_input [data-component] { width: 500px !important; }
the auto option is working fine for my multi-select
Hi
Try this
<form>
<label>dropdownsize</label>
<fieldset>
<input type="dropdown" token="tps_logger_method" searchWhenChanged="true" id="resized_input">
<label>Select a logger name</label>
<default>murex.limits.engine.stream.histo.TPSHistoCounter</default>
<choice value="murex.limits.engine.stream.histo.TPSHistoCounter">murex.limits.engine.stream.histo.TPSHistoCounter</choice>
</input>
</fieldset>
<row depends="$hide$">
<panel>
<html>
<style>
#resized_input div[data-component="splunk-core:/splunkjs/mvc/components/Dropdown"]{
width: 500px !important;
}
</style>
</html>
</panel>
</row>
</form>
Thank you, this is perfectly working for me!
Thanks this worked for me.
You are only extending the top-level wrapper of the dropdown, not the actual dropdown item menu. Try this instead.
#resized_input {
min-width: 500px !important;
width: 500px !important;
max-width: 500px !important;
}
#resized_input .splunk-dropdown .select2-container {
min-width: 500px !important;
width: 500px !important;
max-width: 500px !important;
}
Did this work for increasing the drop down width? I added a drop down with id as "resized_input" but noticed extra space after dropdown, but it did not increase drop down width.
Added the above style to prebuilt panel
<style>
#resized_input {
min-width: 500px !important;
width: 500px !important;
max-width: 500px !important;
}
#resized_input .splunk-dropdown .select2-container {
min-width: 500px !important;
width: 500px !important;
max-width: 500px !important;
}
</style>
</html>
They might have changed something that makes my old solution fail.
Try this instead. Comes from something I posted here: https://gist.github.com/thibodux/408a685dc1a46af5f4f73f7c2922e47e
<style>
.input-dropdown > .splunk-dropdown > div {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
}
#resized_input {
width: 500% !important;
}
</style>
You can also look at the Layer8Insight App for Splunk. I used to maintain that and change CSS widths all over it.
Thanks for your response rjthibod. Still I see space after the dropdown, but the actual drop down is not extended. We are on version 7.1.2.
My pre built panel is now like.
<style>
.input-dropdown > .splunk-dropdown > div {
width: 400px !important;
max-width: 400px !important;
min-width: 400px !important;
}
#resize_input {
width: 400px !important;
}
</style>
</html>
Here is the extract from my Simple XML
form
......
<input id="resize_input" type="dropdown" token="dName" searchWhenChanged="true">
.....
<html>
<style>
.input-dropdown > .splunk-dropdown > div {
width: 400px !important;
max-width: 400px !important;
min-width: 400px !important;
}
#resize_input {
width: 400px !important;
}
</style>
</html>
/form
So, of course, Splunk changed thins. The CSS you want is something like this (top line changed)
#resize_input > .splunk-dropdown > div:nth-child(1) {
width: 400px !important;
max-width: 400px !important;
min-width: 400px !important;
}
#resize_input {
width: 400px !important;
}
Unfortunately, it appears you can't use this inline in the XML as you are currently trying. You will have to put the settings in a CSS file in the app and load that CSS file into the panel.
See https://docs.splunk.com/Documentation/Splunk/7.2.0/AdvancedDev/UseCSS
Hi, unfortunately this will not work for me in 7.2.1. Is there another possiblity to increase the width for a dropdown input?
Other input types can be changed with placing css style directly in the xml Dashboard or using seperate dashboard.css file.
I tried both for the dropdown type without success. Any ideas?
XML dashboard:
<form>
<label>dropdown_test</label>
<fieldset submitButton="false">
<input id="resize_input" type="dropdown" token="field1">
<label>field1</label>
<fieldForLabel>droplist</fieldForLabel>
<fieldForValue>droplist</fieldForValue>
<search>
<query>| makeresults count=5
| eval droplist=random()</query>
</search>
</input>
</fieldset>
</form>
dashboard.css:
#resize_input > .splunk-dropdown > div:nth-child(1) {
width: 400px !important;
max-width: 400px !important;
min-width: 400px !important;
}
#resize_input {
width: 400px !important;
thanks
Stefan
Thank you. Will try with css, instead of using in simple xml.
Can you post the XML for the dropdown input? It looks like the ids might be different resize_input
versus resized_input
.