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?
1 Solution
