Moving buttons to the left if one of the buttons are disabled in config file

I’m currently creating a test config file and at the moment I have got it so that certain buttons can be hidden or the order of the buttons can be altered.

If any of the buttons are disabled what I would like to do, is then move the rest buttons to the left so that all spaces are filled.

Config: In the config file below “btn3” is disabled, therefore the 3rd position will be blank and the 4th 5th, 6th, 7th and 8th position will contain a button.

In this situation I would like to move the buttons after “btn3” to the left.

function loadConfig(){
  const buttons= [
    {
      "id": "btn1",
      "enabled": true,
      "order" : 2
    },
    {
      "id": "btn2",
      "enabled": true,
      "order" : 1
    },
    {
      "id": "btn3",
      "enabled": false,
      "order" : 3
    },
    {
      "id": "btn4",
      "enabled": true,
      "order" : 4
    },
    {
      "id": "btn5",
      "enabled": true,
      "order" : 5
    },
    {
      "id": "btn6",
      "enabled": true,
      "order" : 6
    },
    {
      "id": "btn7",
      "enabled": true,
      "order" : 7
    },
    {
      "id": "btn8",
      "enabled": true,
      "order" : 8
    },
    {
  ]

Code for disabling and altering order element of each button:

 const enabledIdSelectors = buttons.filter(
    function(button){
      return button.enabled === false;
      
    }
  ).map(function(button){
    
    return button.id
  })
  
  enabledIdSelectors.forEach(
    function(idname){
      console.log(enabledIdSelectors);
      const button = document.getElementById(idname)
      button.classList.add('enabled')
      
    }
  )

  // here we are going to determine the order of the buttons 

  buttons.forEach(function(item){
    document.getElementById(item.id).style.order=item.order
    
  })

// Here is where I would then like to move the buttons to the left.

This sounds like something for which CSS is just perfect to solve without needing any complications of JavaScript at all.

Thread moved to the CSS Forum.

I don’t know what the html looks like but if you are adding an enabled class (and not a disabled class nor the disabled attribute) then you can do this:

button:not(.enabled) {
  order: 999 !important;
}

Just use a higher order number than the number of buttons you will ever have. The !important is needed because you are writing inline styles with your js.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.