Hi guys,
I've looked at all the width-adjustment-related Splunk Answers and none of them work for a multiselect in 7.2. You can decrease width with:
#ms.input-multiselect {
min-width: 150px !important;
width: 150px !important;
max-width: 150px !important;
}
but not increase it. How can you do this with a multiselect?
How about a timepicker?
Hi
Try this
<form>
<label>multiselect</label>
<fieldset submitButton="false">
<input type="multiselect" token="field1" id="resized_input">
<label>field1</label>
<choice value="q">testtesttest</choice>
<delimiter> </delimiter>
</input>
<input type="dropdown" token="field2">
<label>field2</label>
</input>
</fieldset>
<row depends="$hide$">
<panel>
<html>
<style>
#resized_input div[data-component="splunk-core:/splunkjs/mvc/components/MultiDropdown"]{
width: 500px !important;
}
#resized_input div[data-view="splunkjs/mvc/multidropdownview"]{
width: 500px !important;
margin-right: auto !important;
}
.fieldset .input{
width:auto !important;
}
</style>
</html>
</panel>
</row>
</form>
Make sure to set a panel id in xml so that the html can recognize it after the #
To expand length of panel:
for example:
<input type="multiselect" token="panel" id="example_id">
....
</input>
<html>
<style type="text/css">
#example_id div[data-component="splunk-core:/splunkjs/mvc/components/MultiDropdown"]{
width: 400px !important;
}
#example_id div[data-view="splunkjs/mvc/multidropdownview"] {
width: 400px !important;
margin-right: auto !important;
}
#example_id div[class="splunk-view splunk-multidropdown splunk-choice-input"]{
width: 400px !important;
margin-right: auto !important;
}
.fieldset .input{
width:auto !important;
}
</style>
</html>
Note:
id="example_id
#example_id
Hi
Try this
<form>
<label>multiselect</label>
<fieldset submitButton="false">
<input type="multiselect" token="field1" id="resized_input">
<label>field1</label>
<choice value="q">testtesttest</choice>
<delimiter> </delimiter>
</input>
<input type="dropdown" token="field2">
<label>field2</label>
</input>
</fieldset>
<row depends="$hide$">
<panel>
<html>
<style>
#resized_input div[data-component="splunk-core:/splunkjs/mvc/components/MultiDropdown"]{
width: 500px !important;
}
#resized_input div[data-view="splunkjs/mvc/multidropdownview"]{
width: 500px !important;
margin-right: auto !important;
}
.fieldset .input{
width:auto !important;
}
</style>
</html>
</panel>
</row>
</form>
@vnravikumar If you know how to increase the width of a time picker (just the undropped part, e.g. "Last 24 hours"), let me know and I will update this question to be "Increase width of a multiselect? Timepicker?"
If not, I'll post a separate SA question about increasing the width of a timepicker. Thanks again!
Hi
Try this
<form>
<label>timepicker</label>
<fieldset submitButton="false">
<input type="time" token="timepicker" id="resized_input">
<label></label>
<default>
<earliest>-24h@h</earliest>
<latest>now</latest>
</default>
</input>
<input type="dropdown" token="field1">
<label>field1</label>
</input>
</fieldset>
<row>
<panel>
<table>
<search>
<query>index="_internal" |stats count by source</query>
<earliest>$timepicker.earliest$</earliest>
<latest>$timepicker.latest$</latest>
</search>
<option name="drilldown">none</option>
</table>
</panel>
</row>
<row depends="$hide$">
<panel>
<html>
<style>
#resized_input div[data-view="splunkjs/mvc/timerangeview"]{
width: 500px !important;
margin-right: auto !important;
}
.fieldset .input{
width:auto !important;
}
</style>
</html>
</panel>
</row>
</form>
AWESOME. Works. Updated question. Ty.
YES. Tyvm!