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
Got questions? Get answers!

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

Meet up IRL or virtually!

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

Get Updates on the Splunk Community!

Think Like an Architect: Introducing the Splunk Certified Cybersecurity Defense ...

In cybersecurity, defenders respond to threats. Architects design the systems that stop them.    As ...

Best Practices: Splunk auto adjust pipeline queue

When you enable autoAdjustQueue in Splunk, maxSize should be understood as the queue size Splunk starts with ...

Announcing Modern Navigation: A New Era of Splunk User Experience

We are excited to introduce the Modern Navigation feature in the Splunk Platform, available to both cloud and ...