Solved: Re: Adjust top margin on a panel with different in...

D2SI · ‎09-07-2020

Hello there!

I am struggling to reduce the top margin on a panel with a text input and a link input using CSS.

I want to reduce top-margin and still have both elements aligned horizontally:

What I wish:

If I use 'display: flex', the top margin applies but the button moves under the textbox:

display : flex;
margin-top: 0vw !important;

Without 'display: flex' elements remain aligned but the top margin just does not apply:

margin-top: 0vw !important;

I have tried several display / flex options without luck so far.

My test dashboard:

<form>
  <label>Panel Height</label>
  <fieldset submitButton="false"></fieldset>
  <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>
  </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;
          }
          #link_button_1, #link_button_2, #textbox_1, #textbox_2{
            margin-top: 0vw !important;
          }
        </style>
      </html>
    </panel>
  </row>
</form>

Anyone has a clue?

ITWhisperer · ‎09-07-2020

Even though your labels appear to be empty, they are   so they occupy some space. Try adding

          #link_button_1 label, #link_button_2 label, #textbox_1 label, #textbox_2 label{
            display: none;
          }

View solution in original post

ITWhisperer · ‎09-07-2020

Even though your labels appear to be empty, they are   so they occupy some space. Try adding

          #link_button_1 label, #link_button_2 label, #textbox_1 label, #textbox_2 label{
            display: none;
          }

D2SI · ‎09-07-2020

Did not realized that! Thanks a lot!

Adjust top margin on a panel with different inputs using CSS

CSS

form

simple XML

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Deep Dive: Accelerate threat investigation with Splunk’s AI Assistant in Security

Announcing Modern Navigation: A New Era of Splunk User Experience

Detection Engineering Office Hours: Real-World Troubleshooting & Q&A

Join the Conversation