Buttons are highlighted partiailly
The OOTB buttons which are configured with "Button" are highlighted partially.
seems it might be an issue with BUTTON.buttonTdButton class . I validated the local changes as suggested in below articles but it doesn't help.
https://community.pega.com/support/support-articles/modal-submit-button-highlights-partially-click
Pega 7.3.1
The OOTB buttons which are configured with "Button" are highlighted partially.
seems it might be an issue with BUTTON.buttonTdButton class . I validated the local changes as suggested in below articles but it doesn't help.
https://community.pega.com/support/support-articles/modal-submit-button-highlights-partially-click
Pega 7.3.1
UIKit • 10.01
Accepted Solution
Pegasystems Inc.
IN
Hi @BRAHMESH@,
Thanks for the details. I am able to replicate the problem with the given details.
Let me take your questions first,
why the issue replicable only for modal dialog button or other buttons but not for the buttons of pxButton type ?
The difference is the pxButton is an auto generated control when you use it, it generates <input> tag and sets the height defined in the skin directly to it
Where as, pzModalButton or pzMultifilePath uses the non-auto generated control call Button, if we look at the pzModalButtonn or pZMultifilePath the code line says <pega:include name="Button" type="Rule-HTML-Property" > is the button. In this control, the button is designed in the HTML table format to show at runtime, the button exist at the middle column of the table which height is different from the actual height defined in skin format "Strong". This is the reason you see the issue with these type of buttons.
Hi @BRAHMESH@,
Thanks for the details. I am able to replicate the problem with the given details.
Let me take your questions first,
why the issue replicable only for modal dialog button or other buttons but not for the buttons of pxButton type ?
The difference is the pxButton is an auto generated control when you use it, it generates <input> tag and sets the height defined in the skin directly to it
Where as, pzModalButton or pzMultifilePath uses the non-auto generated control call Button, if we look at the pzModalButtonn or pZMultifilePath the code line says <pega:include name="Button" type="Rule-HTML-Property" > is the button. In this control, the button is designed in the HTML table format to show at runtime, the button exist at the middle column of the table which height is different from the actual height defined in skin format "Strong". This is the reason you see the issue with these type of buttons.
Please implement the following local change to fix the behavior.
1) Open the UserWorkForm rule
2) Save to application ruleset if not already saved.
3) Copy and paste the following code.
<style>
table.buttonMainTable button.buttonTdButton{
height :100% !important;
}
</style>
In this code, we are setting the height to its parent using height:100% but not to restrict to other pixels. This should fix for the all buttons irrespective of the style format used or type of the button.
It works for me. It should work for you.
Please feel free to reply if you have follow-up questions.
Thank you,
Regards, Cherb.
Pegasystems Inc.
IN
Hi @BRAHMESH@,
Could you please open the button properties panel, Goto Presentation tab > Look for "Control format", as shown below
Open the application or portal skin (whichever is applied at runtime), Go to controls> buttons > locate the format that you see at button then take the screen shots of the format expanding all the sections and upload here. That will help to isolate the root cause.
Thank you,
Regards, Cherb
Skandiabanken
SE
The mentioned OOTB buttons are configured with "pzModalButton" control and passing "Strong" style format for Ok and "Standard" for Cancel button .(Attached skin configuration for both styles format )..
I think .. It should be an issue with enhancing background height to 44 but why it's happening only for "Button" control (not for pxButton ) .
we see the same issue with OOTB pzMultiFilePath control which is configured for upload button .
The mentioned OOTB buttons are configured with "pzModalButton" control and passing "Strong" style format for Ok and "Standard" for Cancel button .(Attached skin configuration for both styles format )..
I think .. It should be an issue with enhancing background height to 44 but why it's happening only for "Button" control (not for pxButton ) .
we see the same issue with OOTB pzMultiFilePath control which is configured for upload button .
Accepted Solution
Pegasystems Inc.
IN
Hi @BRAHMESH@,
Thanks for the details. I am able to replicate the problem with the given details.
Let me take your questions first,
why the issue replicable only for modal dialog button or other buttons but not for the buttons of pxButton type ?
The difference is the pxButton is an auto generated control when you use it, it generates <input> tag and sets the height defined in the skin directly to it
Where as, pzModalButton or pzMultifilePath uses the non-auto generated control call Button, if we look at the pzModalButtonn or pZMultifilePath the code line says <pega:include name="Button" type="Rule-HTML-Property" > is the button. In this control, the button is designed in the HTML table format to show at runtime, the button exist at the middle column of the table which height is different from the actual height defined in skin format "Strong". This is the reason you see the issue with these type of buttons.
Hi @BRAHMESH@,
Thanks for the details. I am able to replicate the problem with the given details.
Let me take your questions first,
why the issue replicable only for modal dialog button or other buttons but not for the buttons of pxButton type ?
The difference is the pxButton is an auto generated control when you use it, it generates <input> tag and sets the height defined in the skin directly to it
Where as, pzModalButton or pzMultifilePath uses the non-auto generated control call Button, if we look at the pzModalButtonn or pZMultifilePath the code line says <pega:include name="Button" type="Rule-HTML-Property" > is the button. In this control, the button is designed in the HTML table format to show at runtime, the button exist at the middle column of the table which height is different from the actual height defined in skin format "Strong". This is the reason you see the issue with these type of buttons.
Please implement the following local change to fix the behavior.
1) Open the UserWorkForm rule
2) Save to application ruleset if not already saved.
3) Copy and paste the following code.
<style>
table.buttonMainTable button.buttonTdButton{
height :100% !important;
}
</style>
In this code, we are setting the height to its parent using height:100% but not to restrict to other pixels. This should fix for the all buttons irrespective of the style format used or type of the button.
It works for me. It should work for you.
Please feel free to reply if you have follow-up questions.
Thank you,
Regards, Cherb.
Pegasystems Inc.
IN
Hi @BRAHMESH@,
I'm glad that your problem is solved.
To answer your question, Can we invoke OOTB pxButton control from non-auto generated control .
Yes, We can do. But just wanted to let you know that it is not a best practice. Use auto control as is will enable more features auto configurable features than writing them and miniating them. Here is the my recommended and best way to go.
1) Create a section (Lets say the section is @baseclass.ABCD)
2) Drag and Drop a Button control. (Update the button with all the auto configurations )
3) Go to your non-auto generated control and add following tag.
<pega:include name="ABCD" type="Rule-HTML-Section" />
That's it. You should see the pxButton rendering in your non-auto generated control. In this approach, you would not miss auto configurable feature of button.
Hope this helps !
Thank you,
Hi @BRAHMESH@,
I'm glad that your problem is solved.
To answer your question, Can we invoke OOTB pxButton control from non-auto generated control .
Yes, We can do. But just wanted to let you know that it is not a best practice. Use auto control as is will enable more features auto configurable features than writing them and miniating them. Here is the my recommended and best way to go.
1) Create a section (Lets say the section is @baseclass.ABCD)
2) Drag and Drop a Button control. (Update the button with all the auto configurations )
3) Go to your non-auto generated control and add following tag.
<pega:include name="ABCD" type="Rule-HTML-Section" />
That's it. You should see the pxButton rendering in your non-auto generated control. In this approach, you would not miss auto configurable feature of button.
Hope this helps !
Thank you,
Regards, Cherb.