Results 1 to 6 of 6

Thread: Material Theme incongruently limits minimum TextField width to 150px

  1. #1
    Sencha User
    Join Date
    Jan 2016
    Location
    Brazil
    Posts
    137

    Default Material Theme incongruently limits minimum TextField width to 150px

    Using the new Material theme, if you set a text field behind 150 pixels wide, the text input will stick at 150 pixels.

    It can overlap to other components if laid to the right of the component in this situation. This means, the layout itself obeys the specified width even if behind 150px.

    This issue happens only and only when using the Material theme.

    The issue is caused because of the following CSS rule, pertaining to the theme:

    Code:
    .x-form-text-field-body-default {
        min-width: 150px;
        max-width: none
    }
    Overriding it and setting a smaller "min-width" value allows going under the minimum 150px value.

    Here's a PoC fiddle:
    Object.NET
    Frameworks and Tools for .NET Developers
    --------------------------------------------------
    Ext.NET - Ext JS for ASP.NET - Examples | Twitter
    Bridge.NET - Write C#. Run JavaScript! - Live | Twitter
    --------------------------------------------------

  2. #2
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    369

    Default

    Quote Originally Posted by fabricio.object View Post
    Using the new Material theme, if you set a text field behind 150 pixels wide, the text input will stick at 150 pixels.

    It can overlap to other components if laid to the right of the component in this situation. This means, the layout itself obeys the specified width even if behind 150px.

    This issue happens only and only when using the Material theme.

    The issue is caused because of the following CSS rule, pertaining to the theme:

    Code:
    .x-form-text-field-body-default {
        min-width: 150px;
        max-width: none
    }
    Overriding it and setting a smaller "min-width" value allows going under the minimum 150px value.

    Here's a PoC fiddle:

    Hello
    Consider this thread
    https://www.sencha.com/forum/showthr...MATERIAL-THEME


    Can you please download extjs 7 from the support portal and try?
    I can't understand why it comes out like this:

    Test code:
    Code:
    <!DOCTYPE html><html>
    <head>
    <title></title><meta http-equiv="X-UA-Compatible" content="IE=EDGE">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" href="logo192.png">
    <link rel="apple-touch-icon" sizes="128x128" href="logo128.png">
    <link rel="stylesheet" type="text/css" rel="stylesheet" href="/ext/ext-7.0.0.131/build/classic/theme-material/resources/theme-material-all.css">
    </head>
    
    
    <script type="text/javascript" src="/ext/ext-7.0.0.131/build/ext-all-debug.js"></script>
    <script type="text/javascript" src="/ext/ext-7.0.0.131/build/classic/locale/locale-it.js"></script>
    
    
    <script type="text/javascript">
    Ext.application({
        name:'Basic Form',
         glyphFontFamily: 'FontAwesome',
    
    
        launch:function(){
            var form = Ext.create({
                xtype:'form',
                renderTo:Ext.getBody(),
                title:'Material theme\'s minimum 150px wide textfields.',
                collapsible:true,
                margin:5,
                bodyPadding:5,
                items:[{
                    xtype:'textfield',
                    fieldLabel:'Name',
                    labelWidth:40,
                    name:'name',
                    width:110
                },{
                    xtype: 'container',
                    width: 110,
                    height: 20,
                    style: 'background-color: black; color: white; padding-left: 2px',
                    html: '110px wide block'
                },{
                    xtype: 'container',
                    flex: 1,
                    html: 'Check how the text field can\'t obey (visually) the width if below 150px in the Material theme.<br />If some component is laid to the right of the component, they will be overlapped: so the layout itself accepts a width behind 150px.'
                }]
            });
        }
    });
    </script>
    </form>
    </body>
    </html>
    Attached Images Attached Images

  3. #3
    Sencha User
    Join Date
    Jan 2016
    Location
    Brazil
    Posts
    137

    Default

    Hello wki01!

    I reproduced this issue first on Ext JS 7.0.0.116 (which is available from the early adopter "myget" NPM interface). And was able to reproduce it in fiddle, which usually is latest build available from ExtJS as you can see by the discussion in the thread you pointed.

    Unfortunately I don't have access to nightlies from the support portal at the moment, and from the early adopter, I still get 7.0.0.116 packages.

    What's the point you're trying to show here? It should work if I build off Ext JS nightly packages?
    Object.NET
    Frameworks and Tools for .NET Developers
    --------------------------------------------------
    Ext.NET - Ext JS for ASP.NET - Examples | Twitter
    Bridge.NET - Write C#. Run JavaScript! - Live | Twitter
    --------------------------------------------------

  4. #4
    Sencha User
    Join Date
    Jan 2016
    Location
    Brazil
    Posts
    137

    Default

    After further reviewing the thread wki01 pointed it seems that the message was just asking attention to another thread. I'd like to ask @wki01 to refrain from doing that, as the subject of the thread (which is a bug report) could be lost and its usefulness compromised.

    I helped with the solution for the issue he were facing there (well, or at least tried to).
    Object.NET
    Frameworks and Tools for .NET Developers
    --------------------------------------------------
    Ext.NET - Ext JS for ASP.NET - Examples | Twitter
    Bridge.NET - Write C#. Run JavaScript! - Live | Twitter
    --------------------------------------------------

  5. #5
    Ext Support Team
    Join Date
    Jan 2018
    Posts
    569

    Default

    Hello,

    Thank you for contacting Sencha support!

    This issue has been registered in our bug tracker under reference number EXTJS-28637.

    Regards,
    Kumar
    Sencha Support.

  6. #6
    Sencha User
    Join Date
    Jan 2016
    Location
    Brazil
    Posts
    137

    Default

    Thanks @rakumar!

    I'm really missing the feature you had with forums where you bound those "EXTJS-28637" issues with the forums (it was shown as a tag in the top). One example of such a thread is RowEditing errorSummary="true": bad tooltip aligment. It was really useful.
    Object.NET
    Frameworks and Tools for .NET Developers
    --------------------------------------------------
    Ext.NET - Ext JS for ASP.NET - Examples | Twitter
    Bridge.NET - Write C#. Run JavaScript! - Live | Twitter
    --------------------------------------------------

Tags for this Thread

Posting Permissions

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