Dashboards & Visualizations
Highlighted

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

Motivator

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>
0 Karma
Highlighted

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

Motivator
0 Karma
Highlighted

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

Contributor

Hi @nick405060,

I encoutered something similar to this. If you inspect the HTML generated by your XML you will realise where the problem lies.

To solve I assigned an id to panel and then through javascript I added the button as follows:

XML:

<panel id="mypanel">  
   <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>
 </panel>

JavaScript:

require([
    "jquery",
    "splunkjs/mvc/simplexml/ready!"
], function ($,mvc) {

    $("#mypanel > div > div").append('<div class="input"><label> </label><div class="splunk-view"><button class="btn" id="submit_button">Submit</button></div></div>')
});

Hope this helps,
Harsh

0 Karma
Highlighted

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

Motivator

This did not work for me in 7.2.0 using

 require([
     'jquery',
     'splunkjs/mvc',
     'splunkjs/mvc/simplexml/ready!'
 ], function($,mvc){
     var defaultTokens = mvc.Components.get("default");
     var submittedTokens = mvc.Components.get("submitted");
     $('#submit_button').on("click",function(){
         submittedTokens.set("submit_trigger", ""+Math.random());
         defaultTokens.set("submit_trigger", ""+Math.random());
     });
     $("#mypanel > div > div").append('<div class="input"><label> </label><div class="splunk-view"><button class="btn" id="submit_button">Submit</button></div></div>');
 });

and

<form>
   <label>button</label>
   <fieldset submitButton="false" autoRun="false"></fieldset>
   <row>
     <panel id="mypanel">
       <html depends="$hide$">
      <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>
   </row>
 </form>

However my question has been answered in the other answer.

0 Karma
Highlighted

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

Champion

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

Highlighted

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

Motivator

I copied and pasted this exactly in 7.2.0 and there were no style changes to the link.

0 Karma
Highlighted

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

Champion

Hi
[updated]:
Use the below style

     <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>
0 Karma
Highlighted

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

Motivator

works with this style!!! thank you!

0 Karma
Highlighted

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

Motivator

the only issue with this is that it seems the button is invisibly bigger than it is. e.g., if you click to the RIGHT of the button, for another like inch, it also treats it as a button click? @vnravikumar

0 Karma
Highlighted

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

Champion

No, it won't I had checked.

0 Karma