Dashboards & Visualizations

Shifting from advanced XML to simple XML: How to resize forms input box?

mcm10285
Communicator

I am currently shifting my advanced XML dashboards to simple xml as it appears to be the direction of Splunk.

In advanced XML I was able to resize the forms text input box by applying a custom CSS and editing the Extended_Field_Search class (sample below)

   ExtendedFieldSearch_3_2_1 input {
               min-width: 800px;
    }

Now in simple XML, when inspecting the html, I see the xpath below for the input box

<div class="input input-text splunk-view" id="input1">
            <label for="input1_2796">Label</label>
        <div id="input1_2796" class="splunk-textinput splunk-view"><input type="text" id="input1_2796-input" value=""></div></div>

However, I can't seem to change the id using a custom CSS (I used "input1").

Anyone can help me out here? Thanks.

0 Karma
1 Solution

mcm10285
Communicator

I thought updating an existing CSS file just needed a page refresh. However, a restart of the splunkweb service actually did the trick.

View solution in original post

0 Karma

mcm10285
Communicator

I thought updating an existing CSS file just needed a page refresh. However, a restart of the splunkweb service actually did the trick.

0 Karma

jkat54
SplunkTrust
SplunkTrust

CSS changes on any website usually require more than just a "refresh". There will be folks that argue but let me explain.

CSS is often cached either in your browser or on "edge routers" / proxy servers at your ISP. The best way to avoid these caches is to use the function key number 5 in conjunction with the control key (ctrl+f5) on the keyboard. What this does in MOST MODERN browsers is force your browser to reload all web page code directly from the server and not from cache.

I've seen cache waste a week+ of an entire team's time before. Ctrl+F5 is not well known, but should be.

0 Karma

jkat54
SplunkTrust
SplunkTrust

your id=input1 corresponds to the div that contains the input, not the input's id itself.

Try editing your css for id="input1_2796-input" instead.... OR do inline css using style tags.

http://www.w3schools.com/tags/tag_style.asp

mcm10285
Communicator

Individually, that should be the ID used.

Generally for the text input boxes, the below will work as well.

textarea, input[type="text"], .uneditable-input {
    width: 400px !important;
Get Updates on the Splunk Community!

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...