Getting Data In

Input Type=... Question

Ant1D
Motivator

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.

Tags (3)
0 Karma
1 Solution

ziegfried
Influencer

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");
});

View solution in original post

0 Karma

ziegfried
Influencer

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");
});
0 Karma

Ant1D
Motivator

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

0 Karma

Ant1D
Motivator

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

0 Karma

Ant1D
Motivator

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

0 Karma

ziegfried
Influencer

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

0 Karma

Ant1D
Motivator

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?

0 Karma

ziegfried
Influencer

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

0 Karma

Ant1D
Motivator

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

0 Karma

Ant1D
Motivator

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

0 Karma

Ant1D
Motivator

Does your solution definitely work?

0 Karma

Ant1D
Motivator

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

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

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 ...