[FIXED] [#1650] New Theme Material Issue

  1. #1

    [FIXED] [#1650] New Theme Material Issue

    Hello Everyone

    I updated ext.net to the newly released version 5.0.0.
    I'm testing a new theme called "Material", however, I don't know if it's possible or it's a mistake, I can't set the width of the fields, for example, if I put 100 in length, this field overlaps the next field, ignoring the margin I gave 5px..
    Its a problem or theme material is not possivel to set width of fields??

    Last edited by fabricio.murta; Sep 20, 2019 at 1:15 PM.
  2. #2
    Hello @Master15!

    I've tried several existing examples in Examples Explorer and also creating a simple form using material theme, and the fields simply obey whatever I define as its Width.

    You may be mixing up layouts. Check if your set up works on other themes, as Triton or Classic, and also note that the new Material theme is more "spacious", it may need the fields' surrounding container additional space to compensate theme-specific paddings.

    If you can consistently reproduce the issue, please provide a test case we can see what you do. If in doubt, please refer to our guidelines:
    - Tips for creating simplified code samples
    - More Information Required
    - Forum Guidelines

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Where is my test case

    <ext:Window runat="server" Layout="VBoxLayout" Width="400" Icon="Lock" Title="Login Screen">
                    <ext:VBoxLayoutConfig Align="Stretch" />
                    <ext:Container runat="server" Border="false" Layout="HBoxLayout">
                            <ext:TextField runat="server" FieldLabel="Width 70" EnforceMaxLength="true" LabelAlign="Top" Width="70" />
                            <ext:TextField runat="server" FieldLabel="Flex 1" Flex="1" LabelAlign="Top" MarginSpec="0 0 0 5" />
                    <ext:Container runat="server" Border="false" Layout="HBoxLayout">
                            <ext:HBoxLayoutConfig Pack="Center" />
                            <ext:Button runat="server" Text="Login" Icon="Accept" />
    Using the Material Theme
    Click image for larger version. 

Name:	img1.jpg 
Views:	107 
Size:	10.5 KB 
ID:	25279

    Using Gray Theme
    Click image for larger version. 

Name:	img2.jpg 
Views:	89 
Size:	11.6 KB 
ID:	25280

    Note that the 5px margin does not work on the material theme
    and the width 70 for the field is enough for the size.
    So I commented that the length does not work for the material, it is not the size I gave
  4. #4
    Hello @Master15,

    I'm not sure we can deem this a bug, I see the theme has it strictly set not to allow a text field narrower than 150 pixels. I wonder if this comes from some standardization of the "material" layout...

    Anyway, all you need to do to overrule that limitation is defining a CSS class with a narrower width:

    <style type="text/css">
        #narrower {
            min-width: 50px;
    And binding it to the text field by the BaseFieldCls="narrower" property.

    I could reproduce this issue with pure Ext JS in this fiddle: Issue with text field width in Classic+Material theme.

    Unfortunately it seems Sencha has moderated their forums. I have created a thread there and will wait a little for them to approve it, then I'll move on and log a github issue out of this thread. As Ext JS 7 is still work in progress, there are good chances they fix this before making it "final".

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hello again!

    We have reported the problem in Sencha forums and also logged it under our own bug tracker under issue #1650. Hopefully this will get solved before 5.0.0 final makes it out!

    Thanks for taking your time to review Ext.NET 5! We'll post back here when we get that issue addressed.
    Fabrício Murta
    Developer & Support Expert
  6. #6
    Hello once again, @Master15!

    We have fixed this with the release of Ext.NET 5, so you should no longer have this issue with material theme. Sorry for not posting back here earlier!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 2
    Last Post: Oct 22, 2015, 8:05 AM
  2. [CLOSED] Nepture Theme rendering issue on IE8 Browser
    By kevinhwang in forum 2.x Legacy Premium Help
    Replies: 7
    Last Post: Sep 30, 2013, 5:22 PM
  3. [CLOSED] Change theme of Gridpanel when theme is changed
    By pawangyanwali in forum 2.x Legacy Premium Help
    Replies: 13
    Last Post: May 22, 2013, 8:05 AM
  4. Theme issue in mvc.ext.net
    By vs.mukesh in forum 1.x Help
    Replies: 0
    Last Post: Jun 10, 2010, 1:41 PM
  5. Replies: 0
    Last Post: Jun 08, 2009, 11:33 PM

Posting Permissions