determine the width of input field - sapui5

I have a dialog that contains following form:
How can I set the input usual day wider then Ver. input? The ratio should be 3:1.
the code snippet for the simple form:
<f:SimpleForm id="form-add-item"
maxContainerCols="2"
editable="true"
class="editableForm">
<f:content>
<l:VerticalLayout>
<Input value="{vmNewItem>/sPlant}" placeholder="{i18n>insColPlant}"/>
<Input value="{vmNewItem>/sWorkCenter}" placeholder="{i18n>insColWorkCenter}"/>
<l:HorizontalLayout>
<Input value="{vmNewItem>/sUsualDay}" placeholder="{i18n>insColUsualDay}">
<layoutData>
<l:GridData span="L2 M2 S4" linebreak="true"/>
</layoutData>
</Input>
<Input value="{vmNewItem>/sUsualDayVer}" placeholder="{i18n>insColUsualDayVer}">
</Input>
</l:HorizontalLayout>
<l:HorizontalLayout>
<Input value="{vmNewItem>/sSpecialDay}" placeholder="{i18n>insColSpecialDay}"/>
<Input value="{vmNewItem>/sSpecialDayVer}" placeholder="{i18n>insColSpecialDayVer}"/>
</l:HorizontalLayout>
</l:VerticalLayout>
</f:content>
</f:SimpleForm>


there are several ways this could be achieved. if you are using the SimpleForm control, one possible way is to use a ResponsiveGridLayout and specify layoutData as follows...
<f:SimpleForm id="form-add-item"
maxContainerCols="2"
editable="true"
class="editableForm"
layout="ResponsiveGridLayout">
<f:content>
<Input value="{vmNewItem>/sPlant}" placeholder="{i18n>insColPlant}">
<layoutData>
<l:GridData span="L12 M12 S12" />
</layoutData>
</Input>
<Input value="{vmNewItem>/sWorkCenter}" placeholder="{i18n>insColWorkCenter}">
<layoutData>
<l:GridData span="L12 M12 S12" />
</layoutData>
</Input>
<Input value="{vmNewItem>/sUsualDay}" placeholder="{i18n>insColUsualDay}">
<layoutData>
<l:GridData span="L9 M9 S9" />
</layoutData>
</Input>
<Input value="{vmNewItem>/sUsualDayVer}" placeholder="{i18n>insColUsualDayVer}">
<layoutData>
<l:GridData span="L3 M3 S3" />
</layoutData>
</Input>
<Input value="{vmNewItem>/sSpecialDay}" placeholder="{i18n>insColSpecialDay}">
<layoutData>
<l:GridData span="L9 M9 S9" />
</layoutData>
</Input>
<Input value="{vmNewItem>/sSpecialDayVer}" placeholder="{i18n>insColSpecialDayVer}">
<layoutData>
<l:GridData span="L3 M3 S3" />
</layoutData>
</Input>
</f:content>
</f:SimpleForm>

Related

Is there any possible way to reduce the spaces between labels and text fields in simpleform

i have created a simple form with input and text fields which is responsive :
<f:SimpleForm id="customercell"
editable="true"
layout="ResponsiveGridLayout"
columnsL="1"
columnsM="1">
<f:content>
<Label text="Customer Name">
<layoutData>
<l:GridData span="L2 M2 S2"/>
</layoutData>
</Label>
<Text class="custom" text="{customerData>/CustomerValue}">
<layoutData>
<l:GridData span="L2 M2 S2"/>
</layoutData>
</Text>
<Label text="Customer Number">
<layoutData>
<l:GridData span="L2 M2 S2"/>
</layoutData>
</Label>
<Text text="{customerData>/CustomerNumber}">
<layoutData>
<l:GridData span="L2 M2 S2"/>
</layoutData>
</Text>
<Label text="Email">
<layoutData>
<l:GridData span="L2 M2 S2"/>
</layoutData>
</Label>
<Text text="{EmailData>/Email}">
<layoutData>
<l:GridData span="L2 M2 S2"/>
</layoutData>
</Text>
</f:content>
</f:SimpleForm>
I am getting much space between input and text area which doesn't looks nice with much space is it possible to remove spaces between input and text area can anyone help me.
Thanks in advance

How to make simple form responsive?

I have made a simple form which is defined below:
<core:FragmentDefinition
xmlns="sap.m"
xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form"
xmlns:core="sap.ui.core">
<VBox class="sapUiSmallMargin">
<f:SimpleForm id="SimpleFormChange480_12120"
editable="true"
layout="ResponsiveGridLayout"
title="Add New Employee"
labelSpanL="4"
labelSpanM="4"
labelSpanS="12"
adjustLabelSpan="false"
emptySpanL="0"
emptySpanM="0"
emptySpanS="0"
columnsL="1"
columnsM="1"
columnsS="1"
singleContainerFullSize="false" >
<f:content>
<Label text="Employee Id">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="empid">
<layoutData>
<l:GridData span="L2 M4 S12"/>
</layoutData>
</Input>
<Label text="Employee Name">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="empname">
<layoutData>
<l:GridData span="L2 M4 S12"/>
</layoutData>
</Input>
<Label text="Email">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="email">
<layoutData>
<l:GridData span="L2 M4 S12"/>
</layoutData>
</Input>
<Label text="Department">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="department">
<layoutData>
<l:GridData span="L2 M4 S12"/>
</layoutData>
</Input>
<Label text="City">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="city">
<layoutData>
<l:GridData span="L2 M4 S12"/>
</layoutData>
</Input>
<Label text="State">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="state" >
<layoutData>
<l:GridData span="L2 M4 S12"/>
</layoutData>
</Input>
<Label text="District">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="district" >
<layoutData>
<l:GridData span="L2 M4 S12"/>
</layoutData>
</Input>
<Label text="Address">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="address" >
<layoutData>
<l:GridData span="L2 M4 S12"/>
</layoutData>
</Input>
</f:content>
</f:SimpleForm>
</VBox>
</core:FragmentDefinition>
I guess I am doing any mistake in defining the span. I don't have much idea on large, medium and small systems I think the main problem I am facing is in that issue.
When I am checking the responsive in iPad device it's not showing exact responsive, but I have tried in this way can anyone help me to make it as responsive.

As per your requirement(iPad), the form was not showing 3 columns. You need to adjust the span values.
<VBox class="sapUiSmallMargin">
<f:SimpleForm id="SimpleFormChange480_12120"
editable="true"
layout="ResponsiveGridLayout"
title="Add New Employee"
labelSpanL="4"
labelSpanM="4"
labelSpanS="12"
adjustLabelSpan="false"
emptySpanL="0"
emptySpanM="0"
emptySpanS="0"
columnsL="1"
columnsM="1"
columnsS="1"
singleContainerFullSize="false" >
<f:content>
<Label text="Employee Id">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="empid">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Input>
<Label text="Employee Name">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="empname">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Input>
<Label text="Email">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="email">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Input>
<Label text="Department">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="department">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Input>
<Label text="City">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="city">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Input>
<Label text="State">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="state" >
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Input>
<Label text="District">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="district" >
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Input>
<Label text="Address">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Input id="address" >
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Input>
<!-- Select -->
<Label text="Branch">
<layoutData>
<l:GridData span="L2 M2 S12"/>
</layoutData>
</Label>
<Select>
<layoutData>
<l:GridData span="L2 M2 S12" />
</layoutData>
</Select>
</f:content>
</f:SimpleForm>
</VBox>
Output - iPad with label span 2 and input span 3
Output - iPad with label and input span 2

How to get to the next line?

I have the following simpleform:
<f:SimpleForm title="Address" editable="true" layout="ResponsiveGridLayout" columnsM="2">
<f:content>
<Label text="Customer">
</Label>
<Input>
<layoutData>
<l:GridData span="XL4 L4 M12 S12"/>
</layoutData>
</Input>
<Label text="PO reference">
<layoutData>
<l:GridData span="XL1 L1 M12 S12"/>
</layoutData>
</Label>
<Input>
<layoutData>
<l:GridData span="XL4 L4 M12 S12"/>
</layoutData>
</Input>
<Label text="PO date">
<layoutData>
<l:GridData span="XL1 L1 M12 S12"/>
</layoutData>
</Label>
<Input>
</Input>
</f:content>
</f:SimpleForm>
it appears as:
How to move the label PO date to the next line?

<f:SimpleForm title="Address" editable="true" layout="ResponsiveGridLayout" columnsM="2">
<f:content>
<Label text="Customer">
</Label>
<Input>
<layoutData>
<l:GridData span="XL4 L4 M12 S12" />
</layoutData>
</Input>
<Label text="PO reference">
<layoutData>
<l:GridData span="XL1 L1 M12 S12" />
</layoutData>
</Label>
<Input>
<layoutData>
<l:GridData span="XL4 L4 M12 S12" />
</layoutData>
</Input>
<Label text="PO date">
</Label>
<Input>
<layoutData>
<l:GridData span="XL1 L9 M12 S12" />
</layoutData>
</Input>
</f:content>
</f:SimpleForm>
The above code will let you align it properly.

UI5 Simpleform Field Layout

I am having a bit of trouble setting a layout in a SimpleForm control. Here is the XML code:
<f:SimpleForm id="phoneFormSimple" editable="true" layout="ResponsiveGridLayout" title="Phone Numbers">
<f:content>
<Toolbar>
<ToolbarSpacer/>
<Button icon="sap-icon://phone" tooltip="Client Numbers"/>
</Toolbar>
<Title text="Business Phone" level="H5" titleStyle="H5"/>
<Label text="Number" design="Bold">
<layoutData>
<l:GridData span="XL2 L2 M2 S6"/>
</layoutData>
</Label>
<MaskInput id="businessPhoneNumber" value="{business_phone_number}" placeholder="Enter number..." mask="(CCC) CCC-CCCC"
placeholderSymbol="_">
<rules>
<MaskInputRule maskFormatSymbol="C" regex="[0-9]"/>
</rules>
<layoutData>
<l:GridData span="XL4 L4 M4 S6"/>
</layoutData>
</MaskInput>
<Label text="Business Extension" design="Bold">
<layoutData>
<l:GridData span="XL2 L2 M2 S6"/>
</layoutData>
</Label>
<Input id="businessPhoneExtension" value="{business_phone_extension}">
<layoutData>
<l:GridData span="XL4 L4 M4 S6"/>
</layoutData>
</Input>
<Title text="Business Fax" level="H5"/>
<Label text="Number" design="Bold">
<layoutData>
<l:GridData span="XL2 L2 M2 S6"/>
</layoutData>
</Label>
<MaskInput id="buinessFaxNumber" value="{business_fax_number}" placeholder="Enter number..." mask="(CCC) CCC-CCCC" placeholderSymbol="_">
<rules>
<MaskInputRule maskFormatSymbol="C" regex="[0-9]"/>
</rules>
<layoutData>
<l:GridData span="XL4 L4 M4 S6"/>
</layoutData>
</MaskInput>
</f:content>
</f:SimpleForm>
I want the third field (Business Fax) to be displayed underneath the 'Business Phone' field. Instead, it displays as such:
I'm sure I am missing something simple. Perhaps I need to use the 'Form' control instead? I tried putting an empty label as the next element, but that didn't seem to work, either. If there was a fourth field (i.e Business Fax Extension), then the layout would line up.
Any help would be appreciated! Thanks!
UPDATE:
I have taken the advice given in the answers. I was able to get the layout to work a little better, though still not quite what I want. This will probably suffice:
I added the 'core:Title' to both 'groups', though I still noticed some oddities in the layout. I removed the 'GridData' tags and I ended up with what's in the image above. I also played around with using a 'Toolbar', which had the same effect. I tried using 'core:Toolbar', but it complained that library did not exist, despite the documentation showing 'core:Toolbar' as an aggregation of the SimpleForm control. Here is the final code:
<f:SimpleForm id="phoneFormSimple" editable="true" layout="ResponsiveGridLayout" title="Phone Numbers">
<f:content>
<core:Title text="Business Phone"/>
<Label text="Number" design="Bold"/>
<MaskInput id="businessPhoneNumber" value="{business_phone_number}" placeholder="Enter number..." mask="(CCC) CCC-CCCC"
placeholderSymbol="_">
<rules>
<MaskInputRule maskFormatSymbol="C" regex="[0-9]"/>
</rules>
</MaskInput>
<Label text="Business Extension" design="Bold"/>
<Input id="businessPhoneExtension" value="{business_phone_extension}"/>
<core:Title text="Business Fax"/>
<Label text="Number" design="Bold"/>
<MaskInput id="buinessFaxNumber" value="{business_fax_number}" placeholder="Enter number..." mask="(CCC) CCC-CCCC" placeholderSymbol="_">
<rules>
<MaskInputRule maskFormatSymbol="C" regex="[0-9]"/>
</rules>
</MaskInput>
</f:content>
</f:SimpleForm>
Thanks for your answers! If there is any other way to have the layout like I originally wanted, additional input would be great!

EDIT: Previous answer was not completely accurate.
Even though title aggregation multiplicity is 0..1, is true that the documentation also says A new Title or Toolbar starts a new group (FormContainer) in the form.
Therefore, several options:
Option 1: Use sap.ui.core.Title instead of sap.m.Title (by #fabiopagoti)
Option 2: Delete the second title
Option 3: Add a second SimpleForm
<f:SimpleForm id="phoneFormSimple" editable="true" layout="ResponsiveGridLayout" title="Phone Numbers">
<f:content>
<Toolbar>
<ToolbarSpacer/>
<Button icon="sap-icon://phone" tooltip="Client Numbers"/>
</Toolbar>
<Title text="Business Phone" level="H5" titleStyle="H5"/>
<Label text="Number" design="Bold">
<layoutData>
<l:GridData span="XL2 L2 M2 S6"/>
</layoutData>
</Label>
<MaskInput id="businessPhoneNumber" value="{business_phone_number}" placeholder="Enter number..." mask="(CCC) CCC-CCCC"
placeholderSymbol="_">
<rules>
<MaskInputRule maskFormatSymbol="C" regex="[0-9]"/>
</rules>
<layoutData>
<l:GridData span="XL4 L4 M4 S6"/>
</layoutData>
</MaskInput>
<Label text="Business Extension" design="Bold">
<layoutData>
<l:GridData span="XL2 L2 M2 S6"/>
</layoutData>
</Label>
<Input id="businessPhoneExtension" value="{business_phone_extension}">
<layoutData>
<l:GridData span="XL4 L4 M4 S6"/>
</layoutData>
</Input>
</f:content>
</f:SimpleForm>
<f:SimpleForm id="faxFormSimple" editable="true" layout="ResponsiveGridLayout">
<f:content>
<Title text="Business Fax" level="H5"/>
<Label text="Number" design="Bold">
<layoutData>
<l:GridData span="XL2 L2 M2 S6"/>
</layoutData>
</Label>
<MaskInput id="buinessFaxNumber" value="{business_fax_number}" placeholder="Enter number..." mask="(CCC) CCC-CCCC" placeholderSymbol="_">
<rules>
<MaskInputRule maskFormatSymbol="C" regex="[0-9]"/>
</rules>
<layoutData>
<l:GridData span="XL4 L4 M4 S6"/>
</layoutData>
</MaskInput>
</f:content>
</f:SimpleForm>

I believe you are having trouble with your form because you are using sap.m.Title instead of sap.ui.core.Title.
Trying replacing them like this
// as is
<Title text="Business Phone" level="H5" titleStyle="H5"/>
// to be
<core:Title text="Business Phone" level="H5" />
Like this you will have different sections in your form. Check out the result without the GridData in all controls as well.
Do not forget to add the core namespace to your xml file
<mvc:View
controllerName="your.controller.name"
displayBlock="true"
xmlns:mvc="sap.ui.core.mvc"
xmlns:f="sap.ui.layout.form"
xmlns:l="sap.ui.layout"
xmlns:core="sap.ui.core"
xmlns="sap.m" >

I ended up finding out how to do exactly what I was looking to do. By adding the 'columnsM' and 'columnsL' properties to the SimpleForm control, it is now displayed in the format I want:
<f:SimpleForm id="phoneFormSimple" editable="true" layout="ResponsiveGridLayout" title="Phone Numbers" columnsM="1" columnsL="1">
<f:content>
<core:Title text="Business Phone"/>
<Label text="Number" design="Bold">
<layoutData>
<l:GridData span="XL2 L2 M2 S6"/>
</layoutData>
</Label>
<MaskInput id="businessPhoneNumber" value="{business_phone_number}" placeholder="Enter number..." mask="(CCC) CCC-CCCC"
placeholderSymbol="_">
<rules>
<MaskInputRule maskFormatSymbol="C" regex="[0-9]"/>
</rules>
<layoutData>
<l:GridData span="XL4 L4 M4 S6"/>
</layoutData>
</MaskInput>
<Label text="Extension" design="Bold">
<layoutData>
<l:GridData span="XL2 L2 M2 S6"/>
</layoutData>
</Label>
<Input id="businessPhoneExtension" value="{business_phone_extension}">
<layoutData>
<l:GridData span="XL4 L4 M4 S6"/>
</layoutData>
</Input>
<core:Title text="Business Fax"/>
<Label text="Number" design="Bold">
<layoutData>
<l:GridData span="XL2 L2 M2 S6"/>
</layoutData>
</Label>
<MaskInput id="buinessFaxNumber" value="{business_fax_number}" placeholder="Enter number..." mask="(CCC) CCC-CCCC" placeholderSymbol="_">
<rules>
<MaskInputRule maskFormatSymbol="C" regex="[0-9]"/>
</rules>
<layoutData>
<l:GridData span="XL4 L4 M4 S6"/>
</layoutData>
</MaskInput>
</f:content>
</f:SimpleForm>
Now the form displays as such:
Thanks to everyone who answered, it was helpful and I have a better understanding of how the form layouts work now!
Cheers!

How does Form layout exactly work?

I have a simple form, that looks as following:
the code:
<VBox class="sapUiSmallMargin">
<sf:SimpleForm id="PayerSel" editable="true" layout="ResponsiveGridLayout" labelSpanXL="1" labelSpanL="1" labelSpanM="1" labelSpanS="12"
adjustLabelSpan="false" emptySpanXL="5" emptySpanL="5" emptySpanM="5" emptySpanS="0" columnsXL="1" columnsL="1" columnsM="1"
singleContainerFullSize="false">
<sf:content>
<Label text="Payers"></Label>
<Input id="payerFrom" placeholder="From" required="true"/>
<Input id="payerTo" placeholder="Until" required="true"/>
</sf:content>
</sf:SimpleForm>
</VBox>
The questions are:
How to configure that both inputs have same length?
When I change columnsL="1" to columnsL="4", why the input is
getting smaller? I give more space and expect it to be wider, because I give to space.

According to the API:
A new Title or Toolbar starts a new group (FormContainer) in the form.
A new Label starts a new row (FormElement) in the form.
All other controls will be assigned to the row (FormElement) that started with the last label.
The code exmple uses 1 group with 1 row.
columns<size> The layout will be divided into column columns in size
Without playing with spans here is an example for different columns, each column with 1 row and Label width + Input width + Input width = 2 + 5 + 5 in all size: (Plunker - try to resize the browser window and examine the result)
<core:FragmentDefinition xmlns="sap.m" xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form" xmlns:core="sap.ui.core">
<VBox class="sapUiSmallMargin">
<f:SimpleForm id="PayerSel" editable="true"
layout="ResponsiveGridLayout"
labelSpanXL="0"
labelSpanL="0"
labelSpanM="0"
labelSpanS="0"
columnsL="1">
<f:content>
<Label text="Payers">
<layoutData>
<l:GridData span="L2 M2 S2"/>
</layoutData>
</Label>
<Input id="payerFrom" placeholder="From" required="true">
<layoutData>
<l:GridData span="L5 M5 S5"/>
</layoutData>
</Input>
<Input id="payerTo" placeholder="Until" required="true">
<layoutData>
<l:GridData span="L5 M5 S5"/>
</layoutData>
</Input>
</f:content>
</f:SimpleForm>
<f:SimpleForm id="PayerSel2" editable="true"
layout="ResponsiveGridLayout"
labelSpanXL="0"
labelSpanL="0"
labelSpanM="0"
labelSpanS="0"
columnsL="2"
columnsM="2">
<f:content>
<core:Title text="group1"/>
<Label text="Payers">
<layoutData>
<l:GridData span="L2 M2 S2"/>
</layoutData>
</Label>
<Input id="payerFrom2" placeholder="From" required="true">
<layoutData>
<l:GridData span="L5 M5 S5"/>
</layoutData>
</Input>
<Input id="payerTo2" placeholder="Until" required="true">
<layoutData>
<l:GridData span="L5 M5 S5"/>
</layoutData>
</Input>
<core:Title text="group2"/>
<Label text="Payers">
<layoutData>
<l:GridData span="L2 M2 S2"/>
</layoutData>
</Label>
<Input id="payerFrom3" placeholder="From" required="true">
<layoutData>
<l:GridData span="L5 M5 S5"/>
</layoutData>
</Input>
<Input id="payerTo3" placeholder="Until" required="true">
<layoutData>
<l:GridData span="L5 M5 S5"/>
</layoutData>
</Input>
</f:content>
</f:SimpleForm>
<f:SimpleForm id="PayerSel3" editable="true"
layout="ResponsiveGridLayout"
labelSpanXL="0"
labelSpanL="0"
labelSpanM="0"
labelSpanS="0"
columnsL="3"
columnsM="3">
<f:content>
<core:Title text="group1"/>
<Label text="Payers">
<layoutData>
<l:GridData span="L2 M2 S2"/>
</layoutData>
</Label>
<Input id="payerFrom32" placeholder="From" required="true">
<layoutData>
<l:GridData span="L5 M5 S5"/>
</layoutData>
</Input>
<Input id="payerTo32" placeholder="Until" required="true">
<layoutData>
<l:GridData span="L5 M5 S5"/>
</layoutData>
</Input>
<core:Title text="group2"/>
<Label text="Payers">
<layoutData>
<l:GridData span="L2 M2 S2"/>
</layoutData>
</Label>
<Input id="payerFrom33" placeholder="From" required="true">
<layoutData>
<l:GridData span="L5 M5 S5"/>
</layoutData>
</Input>
<Input id="payerTo33" placeholder="Until" required="true">
<layoutData>
<l:GridData span="L5 M5 S5"/>
</layoutData>
</Input>
<core:Title text="group3"/>
<Label text="Payers">
<layoutData>
<l:GridData span="L2 M2 S2"/>
</layoutData>
</Label>
<Input id="payerFrom34" placeholder="From" required="true">
<layoutData>
<l:GridData span="L5 M5 S5"/>
</layoutData>
</Input>
<Input id="payerTo34" placeholder="Until" required="true">
<layoutData>
<l:GridData span="L5 M5 S5"/>
</layoutData>
</Input>
</f:content>
</f:SimpleForm>
</VBox>
</core:FragmentDefinition>

When you change columnsL="1" to columnsL="4", the input is getting smaller because "columnsL" attribute is stands for "The number of columns for large size". That means if you want 4 columns in your page and don't provide any width, every columns has width 25% of the parent component's width. Obviously they will be smaller than 1 column.
link : more info
Edit: You're using ResponsiveGridLayout in your simpleForm. If you want to your inputs have same width then just use "layoutdata".
<Input id="payerFrom" placeholder="From" required="true">
<layoutData>
<l:GridData span="L4 M6 S12"/> //for example
</layoutData>
</>