Question

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

https://community.pega.com/support/support-articles/close-button-modal-popup-renders-incorrectly-post-update

Pega 7.3.1

UIKit • 10.01

Correct Answer
October 8, 2019 - 5:24pm

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.

Comments

Keep up to date on this post and subscribe to comments

Pega
October 7, 2019 - 11:44am

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

 

October 8, 2019 - 4:07pm
Response to cherb

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 .

<input class="" type="file" <%=selectMultiple%>  name="<p:r n='$this-name' m='NORMAL'/>" value="<p:r n='$this-value' m='NORMAL'/>" title="<%=toolTip%>" id="<p:r n='$this-name' m='NORMAL'/>" size="25" contenteditable="false" <pega:include name="ClientValidation" />  onchange="pzMultiFile_fileSelected(this, event);">

</pega:when>

<pega:otherwise>

<div class="file-input-wrapper centered">

  <pega:include name="Button"   type="Rule-HTML-Property" >

<pega:param name="Caption" value="<%=buttonName%>" />

<pega:param name="ToolTip" value="<%=toolTip%>"/>

<pega:param name="Id" value="Browsefiles"/>

<pega:param name="BindKeyupOnly" value="true"/>

</pega:include>

 

<input class=""  type="file" tabindex="-1" <%=selectMultiple%> name="<p:r n='$this-name' m='NORMAL'/>" value="<p:r n='$this-value' m="NORMAL"/>" title="<%=toolTip%>" id="<p:r n='$this-name' m='NORMAL'/>" size="25" contenteditable="false" <pega:include name="ClientValidation" />   onchange="pzMultiFile_fileSelected(this, event);">

Pega
October 8, 2019 - 5:24pm

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.

October 9, 2019 - 3:55am
Response to cherb

It works perfect .

Can we invoke OOTB pxButton control from non-auto generated control .

Pega
October 9, 2019 - 11:36am
Response to Brahmesh@

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 @BRAHMESH.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.