Fixed Extra Padding on iOS buttons required when image on top or bottom #26018
Conversation
|
/azp run |
This comment was marked as off-topic.
This comment was marked as off-topic.
| titleInsets.Left -= imageWidth / 2; | ||
| titleInsets.Right += imageWidth / 2; | ||
| // Which makes the later math easier to follow | ||
| if (layout.Position == ButtonContentLayout.ImagePosition.Left || layout.Position == ButtonContentLayout.ImagePosition.Right) |
There was a problem hiding this comment.
This change will impact to several tests:
There was a problem hiding this comment.
Changes in the screenshot tests should be expected if this is working correctly so that is not necessarily a bad thing :)
There was a problem hiding this comment.
@tj-devel709 , @jsuarezruiz I have attached the button failure images also. Could you please check it?
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
This comment was marked as outdated.
|
Azure Pipelines successfully started running 3 pipeline(s). |
NirmalKumarYuvaraj
added
the
partner/syncfusion
There was a problem hiding this comment.
This PR is awesome and it is really close! The only thing I think still needs changing is when there is a border on the button. Looking at the screenshot tests for src/Controls/tests/TestCases.iOS.Tests/snapshots/ios/VerifyButtonPage4.png looks like the border is not being considered and the content of the button should be limited by the inside of the border in these case
@tj-devel709 I have changed the logics based on the border width. Could you please review it? |
|
It's looking better! I see that you applied the borderWidth on the left and right but is there a reason why not on the top and bottom? The image you uploaded for that test looks better except that bottom button shouldn't be cropped still |
@tj-devel709, When we apply a border width to the top or bottom, the image does not render properly. The issue was with the image itself. A proper image has now been committed. |
|
Azure Pipelines successfully started running 3 pipeline(s). |
|
Pushed up a uitest change from the border change |
|
/azp run |
|
Azure Pipelines successfully started running 3 pipeline(s). |
|
/azp run |
|
Azure Pipelines successfully started running 3 pipeline(s). |
|
/azp run |
|
Azure Pipelines successfully started running 3 pipeline(s). |
Issue Details
When the image is positioned at the top or bottom with the title, extra padding is added to the left and right sides of the button.
Root Cause
When the button content layout is set to 'Top' or 'Bottom,' the button content width is recalculated based on both the title width and the image width.
Description of Change
Validated the behaviour in the following platforms
Issues Fixed
Fixes #25489
Fixes #25488
Fixes #25487
Output