Consider the two .NET MAUI (Android) pages below:
Page 1:
<ContentPage ...>
<ScrollView>
<VerticalStackLayout>
<Label Text="The good movie 1" FontSize="40" WidthRequest="140" />
<Label Text="The good movie 2" FontSize="40" WidthRequest="140" />
<Label Text="The good movie 3" FontSize="40" WidthRequest="140" />
<Label Text="The good movie 4" FontSize="40" WidthRequest="140" />
<Label Text="The good movie 5" FontSize="40" WidthRequest="140" />
<Label Text="The good movie 6" FontSize="40" WidthRequest="140" />
<Label Text="The good movie 7" FontSize="40" WidthRequest="140" />
<Label Text="The good movie 8" FontSize="40" WidthRequest="140" />
<Label Text="The good movie 9" FontSize="40" WidthRequest="140" />
<Label Text="The good movie 10" FontSize="40" WidthRequest="140" />
<Label Text="The good movie 11" FontSize="40" WidthRequest="140" />
<Label Text="The good movie 12" FontSize="40" WidthRequest="140" />
</VerticalStackLayout>
</ScrollView>
</ContentPage>
Page 2:
<ContentPage ...>
<ScrollView>
<FlexLayout Direction="Row" Wrap="Wrap" JustifyContent="SpaceEvenly">
<Label Text="The good movie 1" FontSize="40" WidthRequest="140" />
<Label Text="The good movie 2" FontSize="40" WidthRequest="140" />
<Label Text="The good movie 3" FontSize="40" WidthRequest="140" />
<Label Text="The good movie 4" FontSize="40" WidthRequest="140" />
<Label Text="The good movie 5" FontSize="40" WidthRequest="140" />
<Label Text="The good movie 6" FontSize="40" WidthRequest="140" />
<Label Text="The good movie 7" FontSize="40" WidthRequest="140" />
<Label Text="The good movie 8" FontSize="40" WidthRequest="140" />
<Label Text="The good movie 9" FontSize="40" WidthRequest="140" />
<Label Text="The good movie 10" FontSize="40" WidthRequest="140" />
<Label Text="The good movie 11" FontSize="40" WidthRequest="140" />
<Label Text="The good movie 12" FontSize="40" WidthRequest="140" />
</FlexLayout>
</ScrollView>
</ContentPage>
In Page 1, the text in the label is displayed entirely, and I can scroll to see all the labels.
But in Page 2, it seems like all the labels are shrunk to fit on the screen vertically, and only the beginning of the text on the label is displayed.
How can I get the text on the label to be displayed entirely and the screen to scroll with FlexLayout ?
+++++++ Added +++++++
This is what I get with only 4 labels.
It seems like they fill all the vertical space.
What about ScrollView ?
When Setting FlexLayout as the Child of ScrollView, the Content does not scroll. In conclusion, this is a known issue that being tracked in the link below, you can follow up there.
https://github.com/dotnet/maui/issues/5091
As an alternative workaround, you can use VerticalStackLayout ,StackLayout or Grid instead of FlexLayout like below:
<ScrollView>
<StackLayout>
\\\
</StackLayout>
</ScrollView>
Related
I have to make a matrix of radio buttons exactly like the image attached (this is from https://experience.sap.com/fiori-design-web/radio-button/). But only one option selected per line.
Since the image is from the guidelines shouldn't we be able to reproduce it easily? Been trying to work with radio button groups but it doesn't end up looking like this...
Did you try the "groupName" Property?
Name of the radio button group the current radio button belongs to. You can define a new name for the group. If no new name is specified, this radio button belongs to the sapMRbDefaultGroup per default. Default behavior of a radio button in a group is that when one of the radio buttons in a group is selected, all others are unselected.
https://sapui5.hana.ondemand.com/#/api/sap.m.RadioButton%23controlProperties
you can have a look on https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.RadioButtonGroup/sample/sap.m.sample.RadioButtonGroup
You can just create 2 groups and align them. With a bit of predefined css classes i think you would get your result. Or you use groupName but you cant use it with RadioButtonGroup.
Radiogroup with a bit of adjustment from your side:
<FlexBox class="sapUiMediumMarginBeginEnd">
<Label text="Foo" class="sapUiLargeMarginBeginEnd"/>
<Label text="Bar" class="sapUiLargeMarginBegin"/>
</FlexBox>
<HBox class="sapUiTinyMarginTopBottom">
<Label text="selected"/>
<RadioButtonGroup id="rbg3" columns="5" valueState="Error" class="sapUiMediumMarginBottom">
<RadioButton id="RB3-1" text="Option 1" />
<RadioButton id="RB3-2" text="Option 2" />
<RadioButton id="RB3-3" text="Option 3" />
</RadioButtonGroup>
</HBox>
<HBox class="sapUiTinyMarginTopBottom">
<Label text="unselected"/>
<RadioButtonGroup id="rbg4" columns="5" valueState="Error" class="sapUiMediumMarginBottom">
<RadioButton id="RB3-5" text="Option 1" />
<RadioButton id="RB3-6" text="Option 2" />
<RadioButton id="RB3-7" text="Option 3" />
</RadioButtonGroup>
</HBox>
</VBox>
or you can do this with the groupNamewhich i would prefere more, but here also a little adjustment with the flexbox.
<VBox class="sapUiSmallMargin">
<HBox class="sapUiTinyMarginTopBottom">
<FlexBox class="sapUiMediumMargin" direction="Column" alignItems="Start">
<Label text="Selected" />
<Label text="Unselected" class="sapUiTinyMarginTop"/>
</FlexBox>
<VBox class="sapUiMediumMarginEnd">
<Label text="Success" labelFor="groupB" />
<RadioButton text="Option 1" groupName="test1" />
<RadioButton text="Option 2" groupName="test2" />
</VBox>
<VBox class="sapUiMediumMarginEnd">
<Label text="Error" labelFor="groupC" />
<RadioButton text="Option 1" groupName="test1" />
<RadioButton text="Option 2" groupName="test2" />
</VBox>
<VBox class="sapUiMediumMarginEnd">
<Label text="Warning" labelFor="groupD" />
<RadioButton text="Option 1" groupName="test1" />
<RadioButton text="Option 2" groupName="test2" />
</VBox>
<VBox class="sapUiMediumMarginEnd">
<Label text="Information" labelFor="groupE" />
<RadioButton text="Option 1" groupName="test1" />
<RadioButton text="Option 2" groupName="test2" />
</VBox>
</HBox>
</VBox>
Ended up just using a sap.m.Table and for the content used sap.m.Text and sap.m.RadioButton. Also important to use groupName to distinguish the two radio button lines.
`
<mvc:View
controllerName="HelloWorld.App"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<Page title="My App"/>
<Table id="idProductsTable">
<columns>
<Column>
<Text
text="" />
</Column>
<Column
hAlign="Center">
<Text text="Low"/>
</Column>
<Column
hAlign="Center">
<Text text="Medium" />
</Column>
<Column
hAlign="Center">
<Text text="High" />
</Column>
</columns>
<items>
<ColumnListItem vAlign="Middle">
<cells>
<Text
text="First Line" />
<RadioButton
groupName="1"/>
<RadioButton
groupName="1"/>
<RadioButton
groupName="1"/>
</cells>
</ColumnListItem>
<ColumnListItem vAlign="Middle">
<cells>
<Text
text="Second Line" />
<RadioButton
groupName="2"/>
<RadioButton
groupName="2"/>
<RadioButton
groupName="2"/>
</cells>
</ColumnListItem>
</items>
</Table>
</mvc:View>
`
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).
cannot set the background of the native script modal window to transparent
i have done a example in the below link. https://play.nativescript.org/?template=play-js&id=6xzzC2
<!-- >> modal-view-xml -->
<Page backgroundColor="transparent" xmlns="http://www.nativescript.org/tns.xsd"
shownModally="onShownModally" height="300" width="250">
<StackLayout borderRadius="30" backgroundColor="green">
<Label text="android" textWrap="true" />
<Label text="android" textWrap="true" />
<Label text="android" textWrap="true" />
<Label text="android" textWrap="true" />
<Label text="android" textWrap="true" />
<Label text="android" textWrap="true" />
<Label text="android" textWrap="true" />
</StackLayout>
</Page>
<!-- << modal-view-xml -->
i need a border rounded modal window
Try this,
if (page._dialogFragment) {
page._dialogFragment.getDialog().getWindow().setBackgroundDrawable(new android.graphics.drawable.ColorDrawable(android.graphics.Color.TRANSPARENT));
}
Playground Sample
I am using a Wizard object in my app with multiple steps. I want the content of this step to utilize the full width available. I am currently using the below XML, though this is just resulting in the content being bunched together on the left (see attached image).
How can I modify this so the SimpleForms will use the full width of the page ?
Any help would be greatly appreciated,
thanks,
Joe
<WizardStep id="wizStep2" validated="true" title="Customer Confirm"
icon="sap-icon://customer" >
<HBox width="100%" fitContainer="true">
<form:SimpleForm editable="true">
<Label text="Title"/>
<Input value="MR"/>
<Label text="Name"/>
<Input value="John"/>
<Input value="Smith"/>
<Label text="House"/>
<Input value="81"/>
<Label text="Street"/>
<Input value="Main Road"/>
<Label text="City"/>
<Input value=""/>
<Label text="PostCode"/>
<Input value=""/>
</form:SimpleForm>
<form:SimpleForm editable="true">
<Label text="Home Tel"/>
<Input value=""/>
<Label text="Mobile No"/>
<Input value=""/>
<Label text="Email"/>
<Input value=""/>
</form:SimpleForm>
</HBox>
</WizardStep>
Current output
A SimpleForm will start a new column if you use a Title element: Simple Form API Doc. You also can control the Layout of the Simple Form by using SimpleFormLayout.
So basically, you need to place content that will actually use the 100% width.
By default it uses 100% with ... your limitation comes from somewhere else in your view.
This wizard takes 100% of your screen:
<mvc:View controllerName="tc_v1.test.controller.Main" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
displayBlock="true" xmlns="sap.m" xmlns:form="sap.ui.layout.form">
<App id="idAppControl">
<pages>
<Page title="{i18n>title}">
<content>
<Wizard id="wizard" complete="onPressReview" finishButtonText="Review" showNextButton="true">
<WizardStep id="wizStep1" validated="true" title="Customer Confirm" icon="sap-icon://customer">
<HBox fitContainer="true">
<form:SimpleForm editable="true">
<Label text="Title"/>
<Input value="MR"/>
<Label text="Name"/>
<Input value="John"/>
<Input value="Smith"/>
<Label text="House"/>
<Input value="81"/>
<Label text="Street"/>
<Input value="Main Road"/>
<Label text="City"/>
<Input value=""/>
<Label text="PostCode"/>
<Input value=""/>
</form:SimpleForm>
<form:SimpleForm editable="true">
<Label text="Home Tel"/>
<Input value=""/>
<Label text="Mobile No"/>
<Input value=""/>
<Label text="Email"/>
<Input value=""/>
</form:SimpleForm>
</HBox>
</WizardStep>
<WizardStep id="id_wizStp2" validated="true" title="Step 2"/>
<WizardStep id="id_wizStp3" validated="true" title="Step 3"/>
</Wizard>
</content>
</Page>
</pages>
</App>
</mvc:View>
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.