PDA

View Full Version : [CLOSED] Wrong size calculation in a window with buttons


bbros
Nov 04, 2021, 8:06 AM
Hello!
I have a wrong size calculation of the last textfield height inside a window with buttons.
I searched an example and I got that it is the same for you too.

https://examples.ext.net/#/kitchen_sink/forms/contact

the field is taller than the remaining space and runs under the docked toolbar.

25560

is there a way to fix it or there is a better way to handle it?

thank you!
fabricio.murta
Nov 04, 2021, 10:04 PM
Hello @bbros!

The issue with the problem you shown is just that we didn't leave enough height of the window to properly show the fields. There's actually no height "fitting" or "flexing" set in that last, Messages field, but we just matched its default height with the theme. But probably did that for another theme before we introduced Spotless. Just correcting the window height to 500 or 520 made the text field's bottom part show correctly. In other words, that example is not meant to fit window height automatically.

Now, in that example, if you wanted to fit the message height to the remaining space in the window (container), first thing was to set it resizable. Then configure its internal layout to "stretch" the vertically laid fields.

The example would become this:



@page "{handler?}"
@model Ext.Net.Examples.Pages.samples.kitchen_sink.forms. contact.IndexModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>
Contact Form - Ext.NET Examples
</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
</head>
<body>
<ext-viewport>
<layout>
<ext-vboxLayout align="Middle" pack="Center" />
</layout>
<items>
<ext-formPanel title="Contact Us"
frame="true"
height="500"
width="480"
bodyPadding="18" resizable="true"
x-defaultAnchor="100%">
<fieldDefaults>
<ext-add key="labelAlign" value="top" />
<ext-add key="labelWidth" value="100" mode="Raw" />
</fieldDefaults>
<layout>
<ext-vboxLayout align="Stretch" />
</layout>
<defaults>
<ext-add key="margin" value="0 0 10 0" />
</defaults>
<items>
<ext-fieldContainer fieldLabel="Name" layout="HBox" height="95">
<fieldDefaults>
<ext-add key="labelAlign" value="top" />
</fieldDefaults>
<items>
<ext-textField name="firstName"
flex="1"
fieldLabel="First"
allowBlank="false"
labelAlign="Top" />
<ext-textField width="30"
name="middleInitial"
fieldLabel="MI"
marginAsString="0 0 0 5" />
<ext-textField flex="2"
name="lastName"
fieldLabel="Last"
allowBlank="false"
marginAsString="0 0 0 5" />
</items>
</ext-fieldContainer>
<ext-textField fieldLabel="Email" vtype="email" allowBlank="false" />
<ext-textField fieldLabel="Subject" allowBlank="false" />
<ext-textArea fieldLabel="Message"
flex="1"
margin="0"
allowBlank="false" />
</items>
<buttons>
<ext-button text="Cancel" />
<ext-button text="Send" />
</buttons>
</ext-formPanel>
</items>
</ext-viewport>
</body>
</html>


Notice I given the FieldContainer a fixed height to ensure "stretch" wouldn't try to also fit it around the container's height.

Hope this helps!