[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??

Thanks

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!

Where is my test case

Code:

---

<ext:Window runat="server" Layout="VBoxLayout" Width="400" Icon="Lock" Title="Login Screen">
            <LayoutConfig>
                <ext:VBoxLayoutConfig Align="Stretch" />
            </LayoutConfig>
            <Items>
                <ext:Container runat="server" Border="false" Layout="HBoxLayout">
                    <Items>
                        <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" />
                    </Items>
                </ext:Container>
                <ext:Container runat="server" Border="false" Layout="HBoxLayout">
                    <LayoutConfig>
                        <ext:HBoxLayoutConfig Pack="Center" />
                    </LayoutConfig>
                    <Items>
                        <ext:Button runat="server" Text="Login" Icon="Accept" />
                    </Items>
                </ext:Container>
            </Items>
        </ext:Window>

---

Using the Material Theme
Attachment 25279

Using Gray Theme
Attachment 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

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:

Code:

---

<style type="text/css">
    #narrower {
        min-width: 50px;
    }
</style>

---

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!

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.

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!