Conditionally unrendered Buttons in Wizard leaving blank 2x2px div

  1. Two left buttons.

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

  1. Cancel button artifact

  1. New button artifact

  1. Element inspection

^^^^ bump ^^^^

Happened again.

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…


.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:

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

After (with the css rule applied)

Thanks Pablo.  That is a great workaround.  But essentially Pat’s report is a bug. I’ll document it for our devs.