Solved: Is it possible to add a button in line with inputs... - Page 2

nick405060 · ‎07-15-2019

Hi guys,

I am looking for a way to include a js button in line with my input selection. Basically I'd like it to look like how the submit button looks like with its inputs:

[TIMEPICKER] [TEXTBOX] [SUBMITBUTTON]

I've been able to do it using "link", but am looking for other solutions that look better, since link is gray and the style template isn't being applied correctly.

<panel>  
  <html depends="$alwaysHideCSSPanel$">
     <style>
       #submit_button .btn-pill{
           background-repeat: repeat-x;
           background-color: #61a637;
           color: #ffa;
           text-shadow: none;
           text-decoration: none;
           border-radius: 4px;
       }
       #submit_button .btn-pill.active{
           background-color: rgba(100,255,100,.05)  !important;
           text-decoration: none  !important;
           color: #500  !important;
           border-radius: 4px  !important;              
       }
     </style>
  </html>
  <input type="text" token="networkIdOnChange" searchWhenChanged="false">
    <label>NetworkID:</label>
    <default></default>
  </input>
  <input type="text" token="networkid" depends="$justHideMe$" searchWhenChanged="false">
    <default>$networkIdOnChange$</default>
  </input>
  <input type="link" id="submit_button" searchWhenChanged="true">
    <label></label>
    <choice value="submit">Submit</choice>
  </input>
</panel>

vnravikumar · ‎07-15-2019

Hi

Try this. I had modified CSS

[updated]

<form>
  <label>button</label>
  <fieldset submitButton="false" autoRun="false"></fieldset>
  <row>
    <panel>
      <html depends="$hide$">
      <style>
     #submit_button div[data-component="splunk-core:/splunkjs/mvc/components/LinkList"]
      {
      width:35% !important;
      }

    #submit_button  button  {
      padding: 6px 15px !important;
      border-radius: 3px !important;
      font-weight: 500 !important;
      background-color: #5cc05c !important;
      border: transparent !important;
      color: #fff !important;
  }


  #submit_button  button:hover{
    background-color: #40a540 !important;
    border-color: transparent !important;
  }
    </style>
    </html>
    </panel>
  </row>
  <row>
    <panel>
      <input type="text" token="networkIdOnChange" searchWhenChanged="false">
        <label>NetworkID:</label>
        <default></default>
      </input>
      <input type="text" token="networkid" depends="$justHideMe$" searchWhenChanged="false">
        <default>$networkIdOnChange$</default>
      </input>
      <input type="link" id="submit_button" searchWhenChanged="true">
        <label></label>
        <choice value="submit">Submit</choice>
      </input>
    </panel>
  </row>
</form>

View solution in original post

Is it possible to add a button in line with inputs?

Introducing the Splunk Community Dashboard Challenge!

Built-in Service Level Objectives Management to Bridge the Gap Between Service & ...

Get Your Exclusive Splunk Certified Cybersecurity Defense Engineer Certification at ...