[CLOSED] How change height TextField

[grupoantolin]

It is posible to modify the default textfiled heigth and the Font size?

I can't do it with:

X.Panel().Layout(LayoutType.HBox).Items(
         X.TextField().Height(20)
         ,
         X.TextField()
)

It is always 30px like the second TextField.
why?

[fabricio.murta]

Hello @grupoantolin! Welcome to Ext.NET forums!!

The reason it does not work is because the text field is a complex element with a diversity of containers which height/width is controlled.

If you want to fine tune the font size and height aspects of a specific text field, you can set via CSS, binding the inner field of the component to a css class to your liking.

For example:

    <style type="text/css">
        .mybigfield {
            font-size: x-large;
            height: 100px
        }
    </style>

And in your text field definition:

X.TextField().FieldCls("mybigfield")

I hope this helps!

[grupoantolin]

It is not running properly.

I use for CSS:

    
<style type="text/css">
   .mySmallField {
       font-size: xx-small;
       height: 5px;
   }
</style>

And in the .cshtml

X.Panel().Layout(LayoutType.HBox).Items(
         X.TextField().Text("small").FieldCls("mySmallField")
         ,
         X.TextField().Text("normal")
)

And the result is the same. Only a Font more smaller.
The height of two TextField is the same. 30px.
Attach Image:

--------

[fabricio.murta]

Hello @grupoantolin!

You have to continue styling the field with the CSS rules to make it fit. Like adjusting minimum line height, font height...

[grupoantolin]

Hi again.

Finally i used the next css style:

.mysmallfield{
    height: 10px;
    line-height: 10px;
    min-height: 20px;
    max-height:20px;
}
X.TextField().FieldCls("mysmallfield")

Regards.

[fabricio.murta]

That's it! Thanks for sharing the outcome!