Bug 24038 - The Width of a Button on iOS is not automatically adjusted based on the Text length
Summary: The Width of a Button on iOS is not automatically adjusted based on the Text ...
Status: RESOLVED ANSWERED
Alias: None
Product: Forms
Classification: Xamarin
Component: Forms ()
Version: 1.2.3
Hardware: PC Mac OS
: Normal normal
Target Milestone: ---
Assignee: Bugzilla
URL:
Depends on:
Blocks:
 
Reported: 2014-10-24 11:21 UTC by John Miller [MSFT]
Modified: 2015-02-05 05:53 UTC (History)
6 users (show)

Tags:
Is this bug a regression?: ---
Last known good build:


Attachments
Button with border (138.01 KB, image/png)
2014-10-29 12:10 UTC, Yuri
Details


Notice (2018-05-24): bugzilla.xamarin.com is now in read-only mode.

Please join us on Visual Studio Developer Community and in the Xamarin and Mono organizations on GitHub to continue tracking issues. Bugzilla will remain available for reference in read-only mode. We will continue to work on open Bugzilla bugs, copy them to the new locations as needed for follow-up, and add the new items under Related Links.

Our sincere thanks to everyone who has contributed on this bug tracker over the years. Thanks also for your understanding as we make these adjustments and improvements for the future.


Please create a new report on Developer Community or GitHub with your current version information, steps to reproduce, and relevant error messages or log files if you are hitting an issue that looks similar to this resolved bug and you do not yet see a matching new report.

Related Links:
Status:
RESOLVED ANSWERED

Description John Miller [MSFT] 2014-10-24 11:21:26 UTC
**Overview:**

   A Buttons width is not automatically adjusted to fit the Text length on iOS. 

**Steps to Reproduce:**

   1. Make a Button on a page
   2. Set the Text value to a long string "Hello, this is a long string"
   3. Run on iOS

**Actual Results:**

   The Text is cut off because the Button is not wide enough. 

**Expected Results:**

   The Button would adjust in width to fit the text, similar to other platforms. 

**Build Date & Platform:**

   XF 1.2.3

**Additional Information:**

   The Button on Android and WP seem to adjust as expected. This is probably a difference in how iOS works, and its not natively supported either. However, it would be great if the Forms API produced a consistent result across the three platforms so a WidthRequest is not needed for iOS.
Comment 1 Rajneesh Kumar 2014-10-27 03:16:17 UTC
I have checked this issue and not able to reproduce this. I try to  reproduce this issue with the help of instruction and steps provided in bug description.

Steps I have followed:

1. Create a Xamarin Formas application in XS 
1. Add a XAML page and, make a Button on page
2. Set the Text value to a long string "Hello, this is a long string"
3. Run on iOS simulator

I observed that  a Button's width is automatically adjusted to fit the Text length on iOS. Could you please let me know that what steps I am missing to reproduce this issue or what steps should I followed to reproduce this issue.  That will be helpful to reproduce this issue at our end. 

Screencast: http://www.screencast.com/t/lPE4QilPd7k2

Environment Info:

=== Xamarin Studio ===

Version 5.5.2 (build 3)
Installation UUID: 011d70a5-dede-428b-ab04-ef451c2e539d
Runtime:
	Mono 3.10.0 ((detached/e204655)
	GTK+ 2.24.23 (Raleigh theme)

	Package version: 310000023

=== Apple Developer Tools ===

Xcode 6.0.1 (6528)
Build 6A317

=== Xamarin.iOS ===

Version: 8.4.0.15 (Business Edition)
Hash: 08968c4
Branch: 
Build date: 2014-10-20 21:48:06-0400

=== Xamarin.Android ===

Version: 4.18.0 (Business Edition)
Android SDK: /Users/MM/Desktop/android-sdk-macosx
	Supported Android versions:
		2.1    (API level 7)
		2.2    (API level 8)
		2.3    (API level 10)
		3.1    (API level 12)
		3.2    (API level 13)
		4.0    (API level 14)
		4.0.3  (API level 15)
		4.1    (API level 16)
		4.2    (API level 17)
		4.3    (API level 18)
		4.4    (API level 19)
		4.4.87 (API level 20)
		4.5    (API level 21)
Java SDK: /usr
java version "1.7.0_65"
Java(TM) SE Runtime Environment (build 1.7.0_65-b17)
Java HotSpot(TM) 64-Bit Server VM (build 24.65-b04, mixed mode)

=== Xamarin.Mac ===

Version: 1.10.0.18 (Business Edition)

=== Build Information ===

Release ID: 505020003
Git revision: 6d4c806e383ba366b15fbccca9ddc1ba94f8d5ad
Build date: 2014-10-15 15:00:36-04
Xamarin addins: 069ddd29bb70a42238142eee9bac21a5e4b2f9f9

=== Operating System ===

Mac OS X 10.9.5
Darwin MacMini.local 13.4.0 Darwin Kernel Version 13.4.0
    Sun Aug 17 19:50:11 PDT 2014
    root:xnu-2422.115.4~1/RELEASE_X86_64 x86_64
Comment 2 Yuri 2014-10-29 12:10:12 UTC
Original request was about button border which cuts off the text. I am going to attach images. After latest update there are 3 different issues on all platforms:
- iOS: the border cuts text
- Android: the border is not visible at all
- WP: The border doesn't have rounded corners.

You can decide if you want to split this ticket on 3 or manage everything here.
The code is below

StackLayout l = new StackLayout()
            {
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.FillAndExpand,
                BackgroundColor = Color.Green,
            };
            l.Children.Add(button);

            Button button1 = new Button
            {
                Text = "Hello, this is a long string",
                HorizontalOptions = LayoutOptions.CenterAndExpand,
                VerticalOptions = LayoutOptions.CenterAndExpand,
                
                //BackgroundColor = Color.Gray,
                BorderRadius = 15,
                BorderWidth = 10,
                BorderColor = Color.Red,
                
            };

            l.Children.Add(button1);

            Content = l;
Comment 3 Yuri 2014-10-29 12:10:52 UTC
Created attachment 8542 [details]
Button with border
Comment 5 Sadik Ali 2014-10-31 07:48:51 UTC
Thanks Yuri.

With the help of comment 2, I am able to reproduce this issue.

Steps I followed:

1. Create Mobile Apps ( Xamarin.Forma Portable) project.
2.  Add new XAML page (name: MyPage)
3. Write the following code the MyPage.xaml.cs file.

StackLayout l = new StackLayout()
            {
                HorizontalOptions = LayoutOptions.FillAndExpand,
                VerticalOptions = LayoutOptions.FillAndExpand,
                BackgroundColor = Color.Green,
            };
            Button button1 = new Button
            {
                Text = "Hello, this is a long string",
                HorizontalOptions = LayoutOptions.CenterAndExpand,
                VerticalOptions = LayoutOptions.CenterAndExpand,
                BorderRadius = 15,
                BorderWidth = 10,
                BorderColor = Color.Red,
            };

            l.Children.Add(button1);
            Content = l;

4. Call the "MyPage" from app.cs file.
5. Build and deploy the application ( iOS and android).

Observations: I have checked the forms application on emulator and simulator and here is my observation.

Android:  When I deploy the same application on emulator, I observed that the border of button is not visible at all.
Screencast:  http://www.screencast.com/t/mNBM4V6i

iOS: When I deploy the same app on simulator, I observed that the border cuts text of button.
Screencast: http://www.screencast.com/t/nJ3ug1ItBJ

Note: I have checked this issue with Xamarin.Forms: 1.0.6186 / 1.2.3.6257

Environment Info:

=== Xamarin Studio ===

Version 5.5.3 (build 6)
Installation UUID: 6ea47b0d-1852-4aaf-808d-373ff0a5002b
Runtime:
	Mono 3.10.0 ((detached/e204655)
	GTK+ 2.24.23 (Raleigh theme)

	Package version: 310000023

=== Apple Developer Tools ===

Xcode 6.0.1 (6528)
Build 6A317

=== Xamarin.Mac ===

Version: 1.10.0.18 (Business Edition)

=== Xamarin.Android ===

Version: 4.18.0 (Business Edition)
Android SDK: /Users/jatin66/Desktop/Backup/android-sdk-macosx
	Supported Android versions:
		1.6   (API level 4)
		2.1   (API level 7)
		2.2   (API level 8)
		2.3   (API level 10)
		3.0   (API level 11)
		3.1   (API level 12)
		3.2   (API level 13)
		4.0   (API level 14)
		4.0.3 (API level 15)
		4.1   (API level 16)
		4.2   (API level 17)
		4.3   (API level 18)
		4.4   (API level 19)
Java SDK: /usr
java version "1.7.0_65"
Java(TM) SE Runtime Environment (build 1.7.0_65-b17)
Java HotSpot(TM) 64-Bit Server VM (build 24.65-b04, mixed mode)

=== Xamarin.iOS ===

Version: 8.4.0.15 (Business Edition)
Hash: 08968c4
Branch: 
Build date: 2014-10-20 21:48:06-0400

=== Build Information ===

Release ID: 505030006
Git revision: fbe3e9453daf6a3bb9a9709ed22bec35f7c9056b
Build date: 2014-10-23 13:08:38-04
Xamarin addins: e44add2b39de4dd57c0742bb2e620dfad84c64c6

=== Operating System ===

Mac OS X 10.10.0
Darwin Jatin66s-iMac.local 14.0.0 Darwin Kernel Version 14.0.0
    Fri Sep 19 00:26:44 PDT 2014
    root:xnu-2782.1.97~2/RELEASE_X86_64 x86_64
Comment 6 Jason Smith [MSFT] 2015-02-05 05:53:10 UTC
You have to set a background color on android to get the custom button rendering. Im not sure what if anything we can do about the iOS overlap, they are in control of that drawing. You might consider adding some extra width on iOS if you need these thick borders.