Input Type=... Question

[Ant1D]

Good Morning,

I have a question that I would love to be answered if possible. 😄

I have written the following xml code extract inside one of my Splunk forms:

  <input type="text" token="fname">
  <default>*</default>
  </input>

  <input type="text" token="lname">
  <default>*</default>
  </input>

I want to change the width of each of these text boxes to different sizes (e.g. fname to 70px and lname to 100px). How can I do this?

I already know that you can change the width of every textbox input in a Splunk app by adding the following code to a custom application.css file in apps\your_app\appserver\static:

input { width: 70px; }

However, how would I be able to change the width property for each specific textbox input that I add to my Splunk app?

I tried adding the following id attribute to one of the input tags: <input type="text" token="fname" id="myid">

then I referenced this in my custom application.css file: #myid { width: 70px; }

My attempt failed. Maybe because the form xml file is not a .html file. Maybe it is because I am using IE6 browser. What should I do to make this work?

Thanks in advance for your help. Sorry for the essay.

[ziegfried · Accepted solution]

This will only work in Browsers that support CSS attribute selectors (all but IE6).

input[name=fname] { width: 70px; }

Theres probably no other practical way to style those elements aside from a Javascript-based solution.

EDIT:

This is the hacky solution that should work in IE6 as well:

$SPLUNK_HOME/etc/apps/YOUR_APP/appserver/static/application.css:

.input-fname{ width: 20px !important; min-width: 20px !important; }

(!important stuff is to override styles defined in Splunks ExtendedFieldSearch.css. Use Firebug to inspect those styles)

$SPLUNK_HOME/etc/apps/YOUR_APP/appserver/static/application.js:

$(function(){
    $('input[name=fname]').addClass("input-fname");
});

[Ant1D]

The restart made the difference as opposed to F5 or Ctrl + F5

[Ant1D]

I have it working now. Thanks a bunch for your help 😄

[Ant1D]

So both input[type=risk] { width: 70px !important; min-width: 70px !important; } AND
.input-risk{ width: 20px !important; min-width: 20px !important; } should be added to application.css? (sorry about all these questions but must be sure) I have not restarted splunk so I will try that shortly

[ziegfried]

Did you restart Splunk? You should add input[type=fname] { width: 70px !important; min-width: 70px !important; }

[Ant1D]

I tried it again, I can't get it to work 😞 I have copied and pasted those lines into the specified files. Do I also include input[name=fname] { width: 70px; } ? Any ideas why it is not working at my end?

[ziegfried]

Yes, it worked for me. No you don't need to add a class attribute. The Javascript part does this after rendering.

[Ant1D]

In order to write .input-fname{...} wouldn't I need to add a class attribute to the part of my xml code?

[Ant1D]

Hey, thanks. Is it possible if you could confirm that your solution definitely works? copying and pasting into the appropriate files does not work

[Ant1D]

Does your solution definitely work?

[Ant1D]

thanks, I know about this solution but I cannot use it unfortunately 😞