Results 1 to 8 of 8

Thread: [OPEN-735] Number field renders bad in Mobile Safari

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Touch Premium Member
    Join Date
    Feb 2008
    Posts
    206

    Default [OPEN-735] Number field renders bad in Mobile Safari

    Simple test case using Sencha Touch 1.0.1a. This also shows up in the online demo.

    Code:
    Ext.setup({
        glossOnIcon: false,
        onReady: function() {
    
            var form = new Ext.form.FormPanel({
                fullscreen: true,
                items: [{
                    xtype: 'fieldset',
                    instructions: 'Enter the SAP case number to view',
                    items:[{
                        xtype: 'numberfield',
                        name: 'case',
                        label: 'Case',
                        maxLength: 10,
                        useClearIcon: true,
                    }]
                }]
            });
        }
    });
    There is a space between the end of the field and the Clear Icon. If the useClearIcon property is not set then there is boarder gap at the end of the field. See attached.

    photo11.png

    photo1.png

  2. #2
    Sencha User keypoint's Avatar
    Join Date
    Oct 2007
    Location
    Bucharest, Romania
    Posts
    69

    Default

    +1

  3. #3
    Sencha User keypoint's Avatar
    Join Date
    Oct 2007
    Location
    Bucharest, Romania
    Posts
    69

    Default

    And here's a quick fix too Add it to your app scss file.

    PHP Code:
    .x-form-fieldset .x-panel-body {
        
    background-color$form-field-bg-color;

    It seems to play nice with the round borders & all. At least on iOS.

  4. #4
    Touch Premium Member
    Join Date
    Feb 2008
    Posts
    206

    Default

    Confirming this problem still exists in the 1.1.0 release as seen in the demo and code below.
    http://dev.sencha.com/deploy/touch/examples/forms/

  5. #5
    Sencha User
    Join Date
    Jun 2010
    Posts
    5

    Default another hack.....

    .x-input-number {
    padding: 0 !important;
    }

    Still about 1 pixel off

    Top: Checkbox
    Bottom: Numberfield

    Screen shot 2011-05-21 at 11.32.50 PM.png

  6. #6
    Touch Premium Member
    Join Date
    May 2011
    Location
    Norfolk & DC
    Posts
    100

    Default

    This is close, but it also put the input text bumped right up against the edge.
    Bump. Still not solved.


    Quote Originally Posted by xjamundx View Post
    .x-input-number {
    padding: 0 !important;
    }

    Still about 1 pixel off

    Top: Checkbox
    Bottom: Numberfield

    Screen shot 2011-05-21 at 11.32.50 PM.png
    twitter.com/epiphanydigital #sencha #drupal #jquery #craftbeer #guitar #photography

  7. #7
    Touch Premium Member
    Join Date
    May 2011
    Location
    Norfolk & DC
    Posts
    100

    Default

    Know of any way to hack the same without having to use a fieldset? My labels are set to align:top, which look like awful on a phone when using a fieldset, but look fine otherwise.

    Quote Originally Posted by keypoint View Post
    And here's a quick fix too Add it to your app scss file.

    PHP Code:
    .x-form-fieldset .x-panel-body {
        
    background-color$form-field-bg-color;

    It seems to play nice with the round borders & all. At least on iOS.
    twitter.com/epiphanydigital #sencha #drupal #jquery #craftbeer #guitar #photography

  8. #8
    Touch Premium Member
    Join Date
    May 2011
    Location
    Norfolk & DC
    Posts
    100

    Default

    Found the solution:
    Code:
    .x-field.x-field-number {    background-color: white!important; }
    twitter.com/epiphanydigital #sencha #drupal #jquery #craftbeer #guitar #photography

Similar Threads

  1. [OPEN] [OPEN-726] bad clear icon handling when Text field is in a toolbar
    By jep in forum Sencha Touch 1.x: Bugs
    Replies: 5
    Last Post: 29 Aug 2011, 9:43 AM
  2. Number field navigation problem in safari
    By smruti_patra in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 4 Jan 2011, 11:56 PM
  3. [OPEN-664] Number field Documentation
    By gcallaghan in forum Sencha Touch 1.x: Bugs
    Replies: 0
    Last Post: 15 Dec 2010, 9:32 AM
  4. Hide safari mobile address bar
    By __mme__ in forum Sencha Touch 1.x: Discussion
    Replies: 9
    Last Post: 19 Aug 2010, 3:40 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •