Conditionally unrendered Buttons in Wizard leaving blank 2x2px div

  • 2
  • Problem
  • Updated 3 years ago
  • Acknowledged
  • (Edited)
1. Two left buttons.



2. Rendered or not based on this model having rows.



3. Cancel button artifact



4. New button artifact



5. Element inspection

Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb

Posted 3 years ago

  • 2
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
^^^^ bump ^^^^

Happened again.
Photo of Pablo Martinez

Pablo Martinez

  • 2,468 Points 2k badge 2x thumb
This is because of the border of the button.

when a button is shown and dynamically conditions make it disappear, not all the styles are gone (some classes still apply)

In my case was a extra class in the button:

<div class="nx-pagetitle-action ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only buttonred" role="button"><span class="ui-button-text">Cancel order</span></div>

buttonred is a class to show the button in red

When showed the html code is the above one, but when dynamically hidden the code is:

<div class="nx-pagetitle-action buttonred" style="display: inline-block;"></div>

and not the standard not shown button :

<div style="display: none;"></div>

I just had to add a css rule to solve that:

.buttonred:empty { display:none!important; }

I think you are using standard styles , so maybe 

.nx-pagetitle-action:empty { display:none!important;}

works for you.

warning: :empty is a css3 selector if your browser does not support it... please, update your browser...
Photo of Pablo Martinez

Pablo Martinez

  • 2,468 Points 2k badge 2x thumb
confirmed, 
.nx-pagetitle-action:empty { display:none!important;}
Removes completely a button if its hidden dynamically.

Also, It solves the extra white space if you are showing the buttons vertically:

Before
(in blue the extra margin (or padding or both) and the button with border hidden)


After (with the css rule applied)
(Edited)
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Thanks Pablo.  That is a great workaround.  But essentially Pat's report is a bug. I'll document it for our devs. 

Thanks