I want my last listcell has auto width to full the list size. but don't want the listcell too small or swallowed when the list size is not enough.
<listbox width="800px">
<listhead>
<listheader width="500px">header 1</listheader>
<listheader width="500px">header 2</listheader>
<listheader>header 3</listheader>
</listhead>
<listitem>
<listcell>item 1</listcell>
<listcell>item 1</listcell>
<listcell>item 1</listcell>
</listitem>
<listitem>
<listcell>item 1</listcell>
<listcell>item 1</listcell>
<listcell>item 1</listcell>
</listitem>
<listitem>
<listcell>item 1</listcell>
<listcell>item 1</listcell>
<listcell>item 1</listcell>
</listitem>
</listbox>
Hope anyone help!
First of all,
What you want is impossible.
The reason why is pretty obvious, if your screen size is 1000px, where do your browser have to take the space for the 3th column?
The only thing what you can do, when the first 2 columns need to be 500px is setting all available place to the 3th one with vflex="max".
As an optional thing what you could do is make the columns resizable for the user. (set sizable to true in listhead.
Use hflex="min" in last listheader
As per this documentation,
By default, the widths of columns have to be specified explicitly, or
it will be split equally among columns regardless what content they
might have. If you want to have the minimal width (that fit the
content), you could specify hflex="min" at the column (not the
listbox).
<listbox width="800px">
<listhead>
<listheader width="500px">header 1</listheader>
<listheader width="500px">header 2</listheader>
<listheader hflex="min">header 3</listheader>
</listhead>
<listitem>
<listcell>item 1</listcell>
<listcell>item 1</listcell>
<listcell>item 1</listcell>
</listitem>
<listitem>
<listcell>item 1</listcell>
<listcell>item 1</listcell>
<listcell>item 1</listcell>
</listitem>
<listitem>
<listcell>item 1</listcell>
<listcell>item 1</listcell>
<listcell>item 1</listcell>
</listitem>
</listbox>
this work for me
<listbox vflex="1" width="100%">
<listhead>
<listheader width="500px">header 1</listheader>
<listheader width="500px">header 2</listheader>
<listheader style="min-width: 120px;display: block;">header 3</listheader>
</listhead>
<listitem>
<listcell>item 1</listcell>
<listcell>item 1</listcell>
<listcell style="min-width: 120px;display: block;">item 1</listcell>
</listitem>
<listitem>
<listcell>item 1</listcell>
<listcell>item 1</listcell>
<listcell style="min-width: 120px;display: block;">item 1</listcell>
</listitem>
<listitem>
<listcell>item 1</listcell>
<listcell>item 1</listcell>
<listcell style="min-width: 120px;display: block;">item 1</listcell>
</listitem>
</listbox>
Related
I have the following simple form:
<Page title="{i18n>authorization}">
<content>
<VBox>
<f:SimpleForm id="registration" editable="true" layout="ResponsiveGridLayout" labelSpanXL="3" labelSpanL="3" labelSpanM="3" labelSpanS="12"
adjustLabelSpan="true" emptySpanXL="3" emptySpanL="3" emptySpanM="3" emptySpanS="0" columnsXL="1" columnsL="1" columnsM="1"
singleContainerFullSize="true">
<f:content>
<Label text=""/>
<Text text="{i18n>userAuthorize}"/>
<Label text=""/>
<Input placeholder="Enter your email address" id="email" type="Email" value="{confirm>/email}" liveChange="onHandleLiveChangeEmail"/>
<Label text=""/>
<Button type="Accept" enabled="{confirm>/enable}" text="{i18n>confirm}" press="handlePressAuthorization"
ariaDescribedBy="acceptButtonDescription genericButtonDescription">
<layoutData>
<FlexItemData growFactor="1"/>
</layoutData>
</Button>
</f:content>
</f:SimpleForm>
</VBox>
</content>
</Page>
and on the large screen, it stretches too width. What I would like that the simple form should take 4 columns width and place in the middle of screen.
How can I do it?
Try giving your VBox control a specific width. That way the SimpleForm will only fit that. In the VBox you can also add the alignItems="Center" attribute.
If you want to center controls and also not to the full width of the screen, you can do the following:
<VBox width="100%" alignItems="Center">
<VBox width="50%" alignItems="Start">
<!-- Content goes here... -->
</VBox>
</VBox>
This way your controls will be centered and also only stretched to the width of the inner VBox.
Anyone can help to make the StepInput next to Number of copies:
My Code:
<core:FragmentDefinition xmlns="sap.m" xmlns:f="sap.ui.layout.form" xmlns:core="sap.ui.core">
<Dialog title="{i18n>CopyStructure}" class="sapUiContentPadding" contentWidth="25em"
afterClose=".onAfterCloseForCreateDuplicateHierarchyElement">
<content>
<HBox class="sapUiSmallMargin">
<f:Form editable="true">
<f:layout>
<f:ResponsiveGridLayout labelSpanXL="4" labelSpanL="4" labelSpanM="4" labelSpanS="12" adjustLabelSpan="false" emptySpanXL="3" emptySpanL="3"
emptySpanM="3" emptySpanS="0" columnsXL="1" columnsL="1" columnsM="1" singleContainerFullSize="false"/>
</f:layout>
<f:formContainers>
<f:FormContainer>
<f:formElements>
<f:FormElement label="{i18n>NumberOfDuplicateCopies}">
<f:fields>
<StepInput value="{objectView>/numberOfDuplicateCopies}" width="5rem" min="0" max="99" change=".onChangeForNumberOfDuplicates"/>
</f:fields>
</f:FormElement>
</f:formElements>
</f:FormContainer>
</f:formContainers>
</f:Form>
</HBox>
</content>
<beginButton>
<Button text="{i18n>OK}" press=".onPressOkForCreateDuplicateHierarchyElement" enabled="false"/>
</beginButton>
<endButton>
<Button text="{i18n>Cancel}" press=".onPressCancel"/>
</endButton>
</Dialog>
</core:FragmentDefinition>
I have tried to used HBOX/VBOX but it doesnt really works.
Thanks!
The problem is in ResponsiveGridLayout. Try to set its parameters like this:
<f:ResponsiveGridLayout labelSpanXL="4" labelSpanL="4" labelSpanM="4" labelSpanS="4" adjustLabelSpan="false" emptySpanXL="0" emptySpanL="0"
emptySpanM="0" emptySpanS="0" columnsXL="1" columnsL="1" columnsM="1" singleContainerFullSize="false"/>
How I can put my icon next to or within the input field?
The problem is, the icon changes the form. Usually, it's like this:
But when I'm adding the icon (code below), it displaces the Dauer input Field.
Is there a way to make it look clean and that's next to it? Or better in the input field inside?
I can make the button smaller with CSS but there is still a gap between them.. And it does not move automatically.
The best solution is like the Datum above with a small icon inside where I can click or like the icon is next to the Dauer without no gap between input field from Dauer and the ? icon.
PS: I just want it like this (I will decide then later which option is better. But it is possible?)
<form:SimpleForm id="neuezeiterfassung"
editable="true"
title="Neue Zeiterfassung anlegen"
>
<Label
text="Auftrag"
class="font1"
tooltip="Auftrag eingeben"
/>
<l:VerticalLayout>
<ComboBox id="Auftrag"
items="{/ZAUFKSet}"
showSecondaryValues="true"
width="50%"
>
<core:ListItem text="{Aufnr}" />
</ComboBox>
</l:VerticalLayout>
<Label
text="Datum"
class="font1"
/>
<DatePicker id="DP3"
valueFormat="dd.MM.yyyy"
displayFormat="medium"
width="50%"
placeholder="dd.mm.yyyy"
/>
<Label class="font1" text="Dauer" />
<Input id="dauer"
class="dauer"
placeholder="Dauer eingeben ... "
width="50%"
/>
<HBox class="sapUiSmallMargin">
<core:Icon
src="sap-icon://sys-help"
class="size1" color="#031E48" press="aseads"
>
<core:layoutData>
<FlexItemData growFactor="1" />
</core:layoutData>
</core:Icon>
</HBox>
<!-- <Button icon="sap-icon://sys-help" class="myButton"/> -->
<Label class="font1" text="Arbeitsbeschreibung" />
<TextArea id="beschreibung" width="50%" />
</form:SimpleForm>
Update: with the change in commit:8f1757d, which is available since UI5 1.84, the value help icon can be changed via valueHelpIconSrc:
<Input showValueHelp="true"
valueHelpIconSrc="sap-icon://sys-help"
valueHelpRequest="alert('Help requested')"
/><!-- valueHelpIconSrc available since 1.84.0 -->
No need to extend sap.m.InputBase in this case. Other input controls like sap.m.MaskInput still need to be extended as shown in the linked Plunk below.
Original answer:
The best solution is like the Datum above with a small icon inside where I can click. (...) Is it possible?
Yes, it's possible. Here is a minimal example: https://embed.plnkr.co/EzlF2tkvalJWvSEn
For this, UI5 provides the API addEndIconapi which is protected, meaning it should be used only when extending sap.m.InputBase!
As an argument for the addEndIcon, you can pass a map of settings that are required to create sap.ui.core.Iconapi, which is highly customizable.
const icon = this.addEndIcon({
id: this.getId() + "-questionMarkBtn",
src: IconPool.getIconURI("sys-help"),
noTabStop: true,
tooltip: "Information",
press: [this.onEndButtonPress, this],
}); // See sap.ui.core.Icon/properties for more settings
// icon.addStyleClass(...); if even more customization required..
You can achieve it using the below code, just updated the CSS as per your requirement. It is a responsive design, it will work for all the devices.
CODE
<VBox class="sapUiSmallMargin">
<f:SimpleForm
editable="true"
layout="ResponsiveGridLayout"
title="Neue Zeiterfassung anlegen"
labelSpanXL="3"
labelSpanL="3"
labelSpanM="3"
labelSpanS="12"
adjustLabelSpan="false"
emptySpanXL="1"
emptySpanL="1"
emptySpanM="1"
emptySpanS="0"
columnsXL="1"
columnsL="1"
columnsM="1"
singleContainerFullSize="false" >
<f:content>
<Label text="Auftrag" tooltip="Auftrag eingeben" />
<ComboBox items="{/ZAUFKSet}" id="Auftrag" showSecondaryValues="true">
<core:ListItem text="{Aufnr}"/>
</ComboBox>
<Label text="Datum" labelFor="DP3"/>
<DatePicker id="DP3" valueFormat="dd.MM.yyyy" displayFormat="medium" placeholder="dd.mm.yyyy"/>
<Label class="font1" text="Dauer"/>
<Input value="Street">
<layoutData>
<l:GridData span="XL7 L7 M7 S10" />
</layoutData>
</Input>
<Button icon="sap-icon://sys-help" press="onPress" >
<layoutData>
<l:GridData span="XL1 L1 M1 S2" />
</layoutData>
</Button>
<Label text="Arbeitsbeschreibung"/>
<TextArea id="beschreibung"/>
</f:content>
</f:SimpleForm>
</VBox>
Output:
If you are looking for below output
<f:SimpleForm
editable="true"
layout="ResponsiveGridLayout"
title="Neue Zeiterfassung anlegen"
labelSpanXL="3"
labelSpanL="3"
labelSpanM="3"
labelSpanS="12"
adjustLabelSpan="false"
emptySpanXL="1"
emptySpanL="1"
emptySpanM="1"
emptySpanS="0"
columnsXL="1"
columnsL="1"
columnsM="1"
singleContainerFullSize="false" >
<f:content>
<Label text="Auftrag" tooltip="Auftrag eingeben" />
<ComboBox items="{/ZAUFKSet}" id="Auftrag" showSecondaryValues="true">
<core:ListItem text="{Aufnr}"/>
<layoutData>
<l:GridData span="XL8 L8 M7 S9" />
</layoutData>
</ComboBox>
<Label text="Datum" labelFor="DP3"/>
<DatePicker id="DP3" valueFormat="dd.MM.yyyy" displayFormat="medium"
placeholder="dd.mm.yyyy">
<layoutData>
<l:GridData span="XL8 L8 M7 S9" />
</layoutData>
</DatePicker>
<Label class="font1" text="Dauer"/>
<Input value="Street">
<layoutData>
<l:GridData span="XL8 L8 M7 S9" />
</layoutData>
</Input>
<Button icon="sap-icon://sys-help" press="onPress" width="40px" >
<layoutData>
<l:GridData span="XL1 L1 M1 S3" />
</layoutData>
</Button>
<Label text="Arbeitsbeschreibung"/>
<TextArea id="beschreibung">
<layoutData>
<l:GridData span="XL8 L8 M7 S9" />
</layoutData>
</TextArea>
</f:content>
</f:SimpleForm>
With icon
<VBox class="sapUiSmallMargin">
<f:SimpleForm
editable="true"
layout="ResponsiveGridLayout"
title="Neue Zeiterfassung anlegen"
labelSpanXL="3"
labelSpanL="3"
labelSpanM="3"
labelSpanS="12"
adjustLabelSpan="false"
emptySpanXL="1"
emptySpanL="1"
emptySpanM="1"
emptySpanS="0"
columnsXL="1"
columnsL="1"
columnsM="1"
singleContainerFullSize="false" >
<f:content>
<Label text="Auftrag" tooltip="Auftrag eingeben" />
<ComboBox items="{/ZAUFKSet}" id="Auftrag" showSecondaryValues="true">
<core:ListItem text="{Aufnr}"/>
<layoutData>
<l:GridData span="XL10 L10 M10 S10" />
</layoutData>
</ComboBox>
<Label text="Datum" labelFor="DP3"/>
<DatePicker id="DP3" valueFormat="dd.MM.yyyy" displayFormat="medium" placeholder="dd.mm.yyyy">
<layoutData>
<l:GridData span="XL10 L10 M10 S10" />
</layoutData>
</DatePicker>
<Label class="font1" text="Dauer"/>
<Input value="Street">
<layoutData>
<l:GridData span="XL10 L10 M10 S10" />
</layoutData>
</Input>
<HBox>
<core:Icon src="sap-icon://sys-help" color="#031E48" press="onPress" class="infoIcon"/>
<layoutData>
<l:GridData span="XL1 L1 M1 S1" />
</layoutData>
</HBox>
<Label text="Arbeitsbeschreibung"/>
<TextArea id="beschreibung">
<layoutData>
<l:GridData span="XL10 L10 M10 S10" />
</layoutData>
</TextArea>
</f:content>
</f:SimpleForm>
</VBox>
If you are using the ICON you need to add the style as well for alignment
.infoIcon {
line-height: 3rem;
}
Sometimes extending the InputBase class can be a bit overkill/increase the complexity of the code.
You can also use Flexbox containers to achieve the alignment of the input and the icon.
For example, if you want the input and the icon to be centered vertically and horizontally:
<HBox
alignItems="Center"
justifyContent="Center">
<Input>
<layoutData>
<FlexItemData growFactor="3" />
</layoutData>
</Input>
<core:Icon
src="sap-icon://sys-help">
<!-- Be careful here with the namespaces (use layoutData from core, not m) -->
<core:layoutData>
<FlexItemData growFactor="1" />
</core:layoutData>
</core:Icon>
</HBox>
This will give something like this:
See Flexbox for more examples (API Reference is available at the top of the page).
Mockup
Current Code
<mvc:View
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form"
displayBlock="true" height="100%">
<Page showHeader="false" id="page">
<content>
<l:Grid defaultSpan="L12 M12 S12" width="auto">
<l:content>
<f:Form editable="true">
<f:title>
<core:Title text="Test" />
</f:title>
<f:layout>
<f:ResponsiveGridLayout
labelSpanL="3"
labelSpanM="3"
emptySpanL="4"
emptySpanM="4"
columnsL="1"
columnsM="1"
/>
</f:layout>
<f:formContainers>
<f:FormContainer>
<f:formElements>
<f:FormElement label="Name">
<f:fields>
<Input id="name1" value="" />
</f:fields>
</f:FormElement>
<f:FormElement label="Name">
<f:fields>
<Input id="name2" value="" />
</f:fields>
</f:FormElement>
<f:FormElement>
<f:fields>
<CheckBox id="cb1" />
<Text wrapping="true" text="lorem ipsum" />
</f:fields>
</f:FormElement>
</f:formElements>
</f:FormContainer>
</f:formContainers>
</f:Form>
</l:content>
</l:Grid>
</content>
</Page>
</mvc:View>
Problem
The checkbox is not centered. The current code is responsive and the solution should also be responsive.
If you want the checkbox to be centered you need to use a label on your formElement just as you do with the others. If you don't want a label you will probably need some css to put a left-margin on that specific FormElement.
There is maybe another way more "polite" to do that, but if it exists I do not know it, will keep looking at that post to see if someone actually offers a better solution.
But for now, I hope this works for you for the moment.
I have this form on an XML view.
I simply want to add a form of two formElements:
<f:Form id="FormChange354"
minWidth="1024"
maxContainerCols="2"
editable="true">
<f:layout>
<f:ResponsiveGridLayout
labelSpanL="3"
labelSpanM="3"
emptySpanL="4"
emptySpanM="4"
columnsL="1"
columnsM="1" />
</f:layout>
<f:formContainers>
<f:FormContainer>
<f:formElements>
<f:FormElement label="Codice Articolo">
<f:fields>
<Text xmlns="sap.m" id="idCodArt" text="codice_articolo_prova"/>
</f:fields>
</f:FormElement>
<f:FormElement label="Codice Nome Doganale">
<f:fields>
<Text xmlns="sap.m" id="idCodNomDog" text="codice_doganale_prova"/>
</f:fields>
</f:FormElement>
</f:formElements>
</f:FormContainer>
</f:formContainers>
</f:Form>
Why is the output this...? :/
Is this a problem of the first part of form declaration?
It's a bug!
Until it is corrected, use an Input and set editable="false".
See here: http://jsbin.com/bokavisu/1/edit