Issue customizing footer in modal windows

[Andrea Durando]

Hi all,
i Found an issue when trying customize the modal footer inserting a smart-button component.
It’s seems duplicate the button (making a fast analysis of the HTML it seems that there are one button inside another one).

The issue is present also in your example:

https://stackblitz.com/github/htmlelements/smart-webcomponents-angular/tree/master/demos/window/modal/?file=src%2Fapp%2Fapp.component.ts

Regards
Andrea

[Markov]

Hi Andrea,

In this example: Htmlelements – Smart Webcomponents Angular – StackBlitz, the buttons are two but they have to be two because there are two buttons in the footer template. Could you share an example which demonstrates the reported behavior with our Window angular component?

Regards,

Markov

[Andrea Durando]

Hi Markov,

yes that right but if you take a look on the single button you can see that the Text is not aligned to the verical center but the text is “pushed” to the bottom from “something” using the inspector i see that there is one button element nested,

here the code get with the inspector in the example you linked to me and where i see the text of the button is not rightly centerd:

 

</div>

<div class=”smart-footer” smart-id=”footer”>
<smart-button class=”cancel smart-element smart-button” id=”button54ed” role=”button”>
<button class=”smart-button smart-unselectable smart-container” type=”button” role=”presentation” smart-id=”button” tabindex=”0″>
<button class=”smart-button smart-unselectable smart-container” type=”button” role=”presentation” smart-id=”button”></button>
Cancel
</button>
</smart-button>
<smart-button class=”agree smart-element smart-button” id=”buttonfb8c” role=”button”>
<button class=”smart-button smart-unselectable smart-container” type=”button” role=”presentation” smart-id=”button” tabindex=”0″>
<button class=”smart-button smart-unselectable smart-container” type=”button” role=”presentation” smart-id=”button”></button>
Agree
</button>
</smart-button>
</div>

You can see the two tag button one inside each other.

[svetoslav_borislavov]

Hi,

You can remove the inner button.
Here is the modified demo: https://stackblitz.com/edit/github-xcjyz2?file=src%2Fapp%2Fapp.component.ts

If you need further assistance, do not hesitate to contact us!

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts