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!

Enterprise Security Content Update (ESCU) | New Releases

In November, the Splunk Threat Research Team had one release of new security content via the Enterprise ...

Index This | Divide 100 by half. What do you get?

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

Stay Connected: Your Guide to December Tech Talks, Office Hours, and Webinars!

❄️ Celebrate the season with our December lineup of Community Office Hours, Tech Talks, and Webinars! ...