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

[mcm10285]

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.

[mcm10285 · Accepted solution]

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

[jkat54]

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.

[jkat54]

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]

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;