Dashboards & Visualizations

Center a mix of text and link inputs using CSS

D2SI
Communicator

Hello here!

Would there be a simple way to center a mix of text and link inputs?

screen5.png

I have tried margin left so far and it is not so bad, but there might be a proper way to do this.

 

<dashboard>
  <label>Center Inputs Mix</label>
  <row>
    <panel>
      <input id="textbox_1" type="text" token="text_1_tok">
        <label></label>
        <default>Test1</default>
      </input>
      <input id="link_button_1" type="link" token="link_1_tok">
        <label></label>
        <choice value="true">A</choice>
      </input>
    </panel>
    <panel>
      <input id="textbox_2" type="text" token="text_2_tok">
        <label></label>
        <default>Test2</default>
      </input>
      <input id="link_button_2" type="link" token="link_2_tok">
        <label></label>
        <choice value="true">A</choice>
      </input>
    </panel>
  </row>
  <row>
    <panel>
      <html>
        <style>
          #link_button_1 div[data-component="splunk-core:/splunkjs/mvc/components/LinkList"], #link_button_2 div[data-component="splunk-core:/splunkjs/mvc/components/LinkList"]{
            width: 23% !important;
          }
          #link_button_1 button, #link_button_2 button{
            margin-right: 10px;
          }
          #textbox_1, #textbox_2{
            margin-left: 8vw;
          }
        </style>
      </html>
    </panel>
  </row>
</dashboard>

 

 

Thanks in advance for any suggestion!

Labels (3)
0 Karma
1 Solution

niketn
Legend

@D2SI seems like you have incorrect CSS. width: 23% !important; is not required. Try the following CSS instead. For each on Link input as button set the width to 50px. Do the same for input parent div container.

          #link_button_1.input, 
          #link_button_2.input,
          #link_button_1 div[data-component="splunk-core:/splunkjs/mvc/components/LinkList"], 
          #link_button_2 div[data-component="splunk-core:/splunkjs/mvc/components/LinkList"]{
            width: 50px !important;
          }
          #panel_1-fieldset,
          #panel_2-fieldset{
            display: flex !important;
            justify-content:center !important;
          }
          #link_button_1 button, #link_button_2 button{
            border-color: #C3CBD4 !important;
            background: #F7F8FA !important;
          }

Following is the output:

Screen Shot 2020-09-07 at 9.33.51 PM.png

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

niketn
Legend

@D2SI seems like you have incorrect CSS. width: 23% !important; is not required. Try the following CSS instead. For each on Link input as button set the width to 50px. Do the same for input parent div container.

          #link_button_1.input, 
          #link_button_2.input,
          #link_button_1 div[data-component="splunk-core:/splunkjs/mvc/components/LinkList"], 
          #link_button_2 div[data-component="splunk-core:/splunkjs/mvc/components/LinkList"]{
            width: 50px !important;
          }
          #panel_1-fieldset,
          #panel_2-fieldset{
            display: flex !important;
            justify-content:center !important;
          }
          #link_button_1 button, #link_button_2 button{
            border-color: #C3CBD4 !important;
            background: #F7F8FA !important;
          }

Following is the output:

Screen Shot 2020-09-07 at 9.33.51 PM.png

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

D2SI
Communicator

Awesome, thanks @niketn 🙏 !!

0 Karma

thambisetty
SplunkTrust
SplunkTrust
<form>
  <label>Center Inputs Mix</label>
  <fieldset submitButton="false"></fieldset>
  <row>
    <panel>
      <input id="textbox_2" type="text" token="text_2_tok">
        <label></label>
        <default>Test2</default>
      </input>
      <input id="link_button_2" type="link" token="link_2_tok">
        <label></label>
        <choice value="true">A</choice>
      </input>
    </panel>
    <panel>
      <input id="textbox_1" type="text" token="text_1_tok">
        <label></label>
        <default>Test1</default>
      </input>
      <input id="link_button_1" type="link" token="link_1_tok">
        <label></label>
        <choice value="true">A</choice>
      </input>
    </panel>
  </row>
  <row>
    <panel>
      <html>
        <style>
          #link_button_1, #link_button_2{
             float: right;
             padding-right: 30px;
             
          }
          #textbox_1, #textbox_2{
            float: left;
             padding-left: 30px;
          }
        </style>
      </html>
    </panel>
  </row>
</form>
————————————
If this helps, give a like below.
0 Karma

D2SI
Communicator

Thanks a lot for the suggestion @thambisetty!

It's a good idea!

I am sorry I might have been unclear in my post, the link input is kind of a button for the text box to validate what is typed in it, so I am trying to keep it close to the textbox and center both elements as a whole.

I got this:

screen1.png

I am trying to have this:

screen2.png

And so far I was just to able to center it a little with margin-left, but it fails apart with any resolution or screen change.

<form>
  <label>Center Inputs Mix</label>
  <fieldset submitButton="false"></fieldset>
  <row>
    <panel>
      <input id="textbox_2" type="text" token="text_2_tok">
        <label></label>
        <default>Test2</default>
      </input>
      <input id="link_button_2" type="link" token="link_2_tok">
        <label></label>
        <choice value="true">✔️</choice>
      </input>
    </panel>
    <panel>
      <input id="textbox_1" type="text" token="text_1_tok">
        <label></label>
        <default>Test1</default>
      </input>
      <input id="link_button_1" type="link" token="link_1_tok">
        <label></label>
        <choice value="true">✔️</choice>
      </input>
    </panel>
  </row>
  <row>
    <panel>
      <html>
        <style>
          #link_button_1 div[data-component="splunk-core:/splunkjs/mvc/components/LinkList"], #link_button_2 div[data-component="splunk-core:/splunkjs/mvc/components/LinkList"]{
            width: 23% !important;
          }
          #link_button_1 button, #link_button_2 button{
            border-color: #C3CBD4 !important;
            background: #F7F8FA !important;
          }
        </style>
      </html>
    </panel>
  </row>
</form>

 

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