Join the Conversation
- Find Answers
- :
- Using Splunk
- :
- Dashboards & Visualizations
- :
- Modify Input Width - XML
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark Topic
- Subscribe to Topic
- Mute Topic
- Printer Friendly Page
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hi. I understand that questions have already been raised similar to mine. However, they do not seem to work on my dashboard.
My goal is to modify the width (decrease) to make my 6 inputs (dropdown, time, text) fit into one row.
I have edited my input code in the source of my dashboard as below, and edited styles.css as well.
...
...
/styles.css
resized_input {
width: 500px;
}
But it doesn't seem to be working. Hoping for advice. I appreciate it in advance.
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
There are two places you can put your specialized CSS code:
- inline in the dashboard, or
- included in a separate CSS file
Regarding your specific request, different input types require certain considerations for their sub-parts in order to do what you ask. That is to say you have to handle inputs types a little differently.
Assuming you are just using dropdowns and text inputs, here is the simplest/fastest way to augment the width of dropdowns and text boxes. Note, you should not mess with the timepicker input. It is very hard to make it look correct if you change its settings.
Add this code block to the bottom of your dashboard's XML just before the closing </form> or </dashboard>
<row depends="noshow">
<html>
<style>
.input-dropdown {
min-width: 120px !important;
width: 120px !important;
max-width: 120px !important;
}
.splunk-dropdown .select2-container {
min-width: 120px !important;
width: 120px !important;
max-width: 120px !important;
}
.input-text {
min-width: 130px !important;
width: 130px !important;
max-width: 130px !important;
}
.input-text > input[type="text"] {
min-width: 120px !important;
width: 120px !important;
max-width: 120px !important;
}
</style>
</html>
</row>
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
The code
<html>
<style>
.input-dropdown {
min-width: XXXpx !important;
width: XXXpx !important;
max-width: XXXpx !important;
}
.splunk-dropdown .select2-container {
min-width: XXXpx !important;
width: XXXpx !important;
max-width: XXXpx !important;
}
</style>
</html>
Works fine.
But, now, how to take a single dropdown input, not all? Example a dropdown with id="single_dropdown"?
<input type="dropdown" token="token_to_catch" id="single_dropdown">
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Solution is here,
https://answers.splunk.com/answering/823957/view.html
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
There are two places you can put your specialized CSS code:
- inline in the dashboard, or
- included in a separate CSS file
Regarding your specific request, different input types require certain considerations for their sub-parts in order to do what you ask. That is to say you have to handle inputs types a little differently.
Assuming you are just using dropdowns and text inputs, here is the simplest/fastest way to augment the width of dropdowns and text boxes. Note, you should not mess with the timepicker input. It is very hard to make it look correct if you change its settings.
Add this code block to the bottom of your dashboard's XML just before the closing </form> or </dashboard>
<row depends="noshow">
<html>
<style>
.input-dropdown {
min-width: 120px !important;
width: 120px !important;
max-width: 120px !important;
}
.splunk-dropdown .select2-container {
min-width: 120px !important;
width: 120px !important;
max-width: 120px !important;
}
.input-text {
min-width: 130px !important;
width: 130px !important;
max-width: 130px !important;
}
.input-text > input[type="text"] {
min-width: 120px !important;
width: 120px !important;
max-width: 120px !important;
}
</style>
</html>
</row>
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
This does not work for multiselect in 7.2. It can make a multiselect less wide, but it cannot expand on the default width
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I can't get it to work in 7.2 either. It reduces the size of the of the input field but the dropdown size remains the same.
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Thank you very much for your help. It had worked on my end. The code for text input didn't work though. I've used the below instead.
.input-text {
width: 150px !important;
}
input {
width: 140px;
}
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Thanks for your Help!
Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!
Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.
Index This | What travels the world but is also stuck in place?
Discover New Use Cases: Unlock Greater Value from Your Existing Splunk Data
Continue Your Journey: Join Session 2 of the Data Management and Federation Bootcamp ...
