Float individual wizard button left

  • 1
  • Question
  • Updated 3 years ago
Is there a way to float an individual wizard button to the left? I'm looking to put my back button on the left side and next button on the right. With pagetitles, I can just create use two pagetitle components and a responsive grid. What about wizard buttons? Each button has a css property, but I haven't been able to successfully separate the buttons with CSS, to float one left and another right. Seems like it's either all one way or all the other. Ideas?
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb

Posted 3 years ago

  • 1
Photo of Thimo

Thimo

  • 1,280 Points 1k badge 2x thumb
The point with float left and right was good. But since the wrapper around the buttons (nx-header-right) has a relative width, the buttons don't have enough space to visibly get to another place.
You have to set the width of the wizard header.

You can achieve this by giving your wizard a class (in this case the wizard has "special-wizard") and the buttons seperatly.

Then use the following inline CSS:

.special-wizard .nx-header-right, .special-wizard .nx-header-right>div {    width: 100%;
}
.special-wizard .previous-button {
    float: left;
}
.special-wizard .next-button {
    float: right;
}
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Thimo,

Nice work.

One issue I have is that table components also use .nx-header-right, so the save buttons on any tables inside my wizard are getting stretched to the full width of the table. I tried playing with a :not selector, and with being more explicit with the selector for just the wizard, but I couldn't get it working. Any assistance?
(Edited)
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Anyone able to solve this one? Can I float the wizard buttons in opposite directions, but not stretch the button headers of table components within the wizard?
Photo of Thimo

Thimo

  • 1,280 Points 1k badge 2x thumb
Hi Matt, 
To only get the header of the wizard a more detailed selection should solve your case:

.special-wizard .nx-wizard-step>.nx-editor-header>.nx-header-right, .special-wizard .nx-wizard-step>.nx-editor-header>.nx-header-right>div {    width: 100%;
}
.special-wizard .nx-wizard-step>.nx-editor-header>.nx-header-right .previous-button {
    float: left;
}
.special-wizard .nx-wizard-step>.nx-editor-header>.nx-header-right .next-button {
    float: right;
}
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Thanks, Thimo! I tried something similar, but must have had the syntax wrong somehow. You're the best!