Dashboards & Visualizations

CSS for link list button align button horizontaly

jhuysing
Explorer

Is there a css element that can help  move the "really bad" button so it on the same line as the rest?

jhuysing_0-1718926513888.png

 

Labels (2)
0 Karma
1 Solution

bowesmana
SplunkTrust
SplunkTrust

This is what you need

#linked_list.input-link{
    width: 400px !important;
}

where your input is

<input id="linked_list" type="list"...

Here's some more useful ways of changing linked list input types - this shows a tab style selection

  <row depends="$AlwaysHideCSS$">
    <panel>
      <html>
        <style>
          #linked_list.input-link{
          	width: 400px !important;
          }
          #linked_list label{
            display:none !important;
          }
          #linked_list.input-link div[data-component="splunk-core:/splunkjs/mvc/components/LinkList"]{
          	display: -webkit-box !important;
          }
          #linked_list.input-link button{
            min-width: 100px !important;
            max-width: 130px !important;
            border-top-color: #E1E6EB;
            border-top-style: solid;
            border-top-width: 1px;
            border-right-color: #E1E6EB;
            border-right-style: solid;
            border-right-width: 1px;
            border-left-color: #E1E6EB;
            border-left-style: solid;
            border-left-width: 1px;
          	border-top-left-radius: 10px;
            border-top-right-radius: 10px;
          }
          
          #linked_list .splunk-choice-input-message{
            display: none !important;
          }
          #linked_list.input-link button[role="radio"][aria-checked="true"]{
            background-color: #62B5E5 !important;
            color: #000 !important;
          }
          #linked_list.input-link button[role="radio"][aria-checked="false"]{
            background-color: #005587 !important;
            color: #fff !important;
          }
        </style>
      </html>
    </panel>
  </row>

Hope this is usefulk

View solution in original post

0 Karma

bowesmana
SplunkTrust
SplunkTrust

This is what you need

#linked_list.input-link{
    width: 400px !important;
}

where your input is

<input id="linked_list" type="list"...

Here's some more useful ways of changing linked list input types - this shows a tab style selection

  <row depends="$AlwaysHideCSS$">
    <panel>
      <html>
        <style>
          #linked_list.input-link{
          	width: 400px !important;
          }
          #linked_list label{
            display:none !important;
          }
          #linked_list.input-link div[data-component="splunk-core:/splunkjs/mvc/components/LinkList"]{
          	display: -webkit-box !important;
          }
          #linked_list.input-link button{
            min-width: 100px !important;
            max-width: 130px !important;
            border-top-color: #E1E6EB;
            border-top-style: solid;
            border-top-width: 1px;
            border-right-color: #E1E6EB;
            border-right-style: solid;
            border-right-width: 1px;
            border-left-color: #E1E6EB;
            border-left-style: solid;
            border-left-width: 1px;
          	border-top-left-radius: 10px;
            border-top-right-radius: 10px;
          }
          
          #linked_list .splunk-choice-input-message{
            display: none !important;
          }
          #linked_list.input-link button[role="radio"][aria-checked="true"]{
            background-color: #62B5E5 !important;
            color: #000 !important;
          }
          #linked_list.input-link button[role="radio"][aria-checked="false"]{
            background-color: #005587 !important;
            color: #fff !important;
          }
        </style>
      </html>
    </panel>
  </row>

Hope this is usefulk

0 Karma
Get Updates on the Splunk Community!

Hunt Smarter, Not Harder: Discover New SPL “Recipes” in Our Threat Hunting Webinar

Are you ready to take your threat hunting skills to the next level? As Splunk community members, you know the ...

Splunk ITSI & Correlated Network Visibility

  Now On Demand   Take Your Network Visibility to the Next Level In today’s complex IT environments, ...

Community Content Calendar, August edition

In the dynamic world of cybersecurity, staying ahead means constantly solving new puzzles and optimizing your ...