I am trying to create a area chart without any axis like this one:
I have almost done it but there is a problem: When the chart is loaded the first time it looks like this:
After initial load if I toggle the hidden property of LinearAxis it stars looking correctly:
For Android the situation is worst then iOS, chart is completely invisible:
Here is my Chart in template:
<template>
<Page actionBarHidden="true">
<StackLayout class="root">
...
<FlexboxLayout class="bottom" flexDirection="column">
...
<RadCartesianChart class="chart" ref="chart">
<LinearAxis v-tkCartesianHorizontalAxis hidden="true"/>
<LinearAxis v-tkCartesianVerticalAxis hidden="true"/>
<AreaSeries
:items="items"
valueProperty="value"
categoryProperty="date"
v-tkCartesianSeries
/>
</RadCartesianChart>
</FlexboxLayout>
</StackLayout>
</Page>
</template>
The question is how can I fix the initial layout of the chart?
Related
I have a TableView in which I render form controls for data editing.
However, as soon as the Entry control receives focus, the ViewCell seemingly collapses, leaving only the section title and separator borders visible:
<TableView Intent="Data">
<TableRoot>
<TableSection Title="Details">
<ViewCell>
<Grid ColumnDefinitions="0.5*,0.5*">
<Label Text="Manufacturer" />
<Entry Text="{Binding Manufacturer}" Grid.Column="1" />
</Grid>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
Initial state:
After tapping the Entry element:
I've tried setting a specific height for the Grid and the Entry control, but I get the same result regardless.
Am I missing something obvious here? 🤔
It's a bug in .NET MAUI: https://github.com/dotnet/maui/issues/10322
I ran into this a while ago and reported it. For now, I have created my own table using a Grid.
You can change The TableView HeightRequest property to a large number such as 700.
This is a temporary workaround until the bug is fixed.
<TableView HeightRequest="700">
<TableRoot>
<TableSection>
<!-- Your code goes here -->
</TableSection>
</TableRoot>
</TableView>
But, in most scenarios, you don't know what the Height is so you could set it dynamically in your code behind.
Page constructor:
public MainPage()
{
InitializeComponent();
// if you want your table height to fit half of the page
Table.HeightRequest = this.Height / 2;
// Rest of logic...
}
Xaml:
<TableView x:Name="Table">
<TableRoot>
<TableSection>
<ViewCell>
<Label Text="Example"/>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
I have a line chart in my sapui5 app and I want to put it in an object page subsection. When I put it in a normal layout in a page, it's working. But when I separate it in a fragment and call from object page subsection nothing is shown.
here is my fragment :
<core:FragmentDefinition xmlns:m="sap.m" xmlns:core="sap.ui.core" xmlns:viz="sap.viz.ui5.controls" xmlns:layout="sap.ui.layout"
xmlns:mvc="sap.ui.core.mvc" xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds" xmlns:viz.data="sap.viz.ui5.data" height="100%" xmlns:common="sap.suite.ui.commons">
<layout:FixFlex>
<layout:flexContent>
<viz:Popover id="idPopOver"></viz:Popover>
<viz:VizFrame id="idLineGraph" uiConfig="{applicationSet:'fiori'}" height='100%' width="100%" vizType='line'></viz:VizFrame>
</layout:flexContent>
</layout:FixFlex>
</core:FragmentDefinition>
and here is my subsection:
<ux:ObjectPageSection id="idChart" title="{i18n>chartSection}" titleUppercase="false">
<ux:subSections>
<ux:ObjectPageSubSection>
<ux:blocks>
<core:Fragment id="idChartFragment" fragmentName="mynamespace.zmm_stok_list.fragments.grafik" type="XML"/>
</ux:blocks>
</ux:ObjectPageSubSection>
</ux:subSections>
</ux:ObjectPageSection>
I also saw that question Q but it looks like OP have preferred to keep that answer which hi's found for himself.
lastly, there a blog about almost same thing but using cds views.blog
But you know cds views are not like xml views and I guess they are generated automatically and we can not see which componenets are used.
So I still couldn't found a way to do this that way. But if I put my vizframe in object layout section directly (not seperated in a fragment) and give the height of vizframe with pixels it works. Not much but I'm ok with this.
Ps: When vizframe is seperated in a fragment, giving its height with pixels does not work either.
I want to place a text field in a matrix layout. Please check below code and please suggest how to check XML code errors? Every time I stuck in designing the XML code. Please suggest me how to overcome that.
<core:View
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
xmlns:l="sap.ui.commons.layout"
controllerName="matrix.matrix"
xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="ytftfhgff">
<content>
<l:MatrixLayout layoutFixed="true" columns="4" width="600px" widths="150px,150px,150px,150px">
<l:MatrixLayoutRow>
<l:MatrixLayoutCell colSpan="4">
<Text text="Its a heading" />
</l:MatrixLayoutCell>
</l:MatrixLayoutRow>
<l:MatrixLayoutRow>
<l:MatrixLayoutCell>
<Label text="First Name"/>
</l:MatrixLayoutCell>
<l:MatrixLayoutCell>
<TextField id="axscx" width="20em"></TextField>
</l:MatrixLayoutCell>
</l:MatrixLayoutRow>
</l:MatrixLayout>
</content>
</Page>
</core:View>
Thanks in advance,
sriman.
In general the errors logged by the XMLTemplateParser to the console should be understandable enough to get a basic idea of what's going wrong. In your case it is quite simple. The default namespace is set to "sap.m", i.e. the runtime tries to load the TextField control from that library. This cannot work as sap.m does not have a TextField control.
You can either use the Input control, i.e. replace TextField with Input. Or introduce an additional namespace:
xmlns:commons="sap.ui.commons"
and define the TextField in the following way:
<commons:TextField id="axscx" width="20em"/>
I would prefer using the Input field.
Am new to ZK and using combobox in my page.I gave width="100%" to combobox but it doesn't take and if I refresh the page , the combobox shrinks.
Please anyone tell me how I can set common width to entire combobox in my application uniformly?
There are few ways to do what you want. for example:
<div sclass="positionInfo">
<combobox readonly="true" width="30%" model="#load(vm.positionModel)" constraint="no empty:Please select position!"
selectedItem="#bind(fx.position)" tabindex="3">
<template name="model" var="po">
<comboitem label="#load(po.positionName)" value="#load(po.positionId)" />
</template>
</combobox>
</div>
put your combobox inside div element, then set CSS class named "positionInfo".
set CSS rule for CSS selector .positionInfo (width by a specific pixels or percent), then everything will be done.
Here is the plunker link: http://plnkr.co/edit/XVINtJ1RbNrkaCAFbZti?p=preview
I have a view with a FlexBox with 2 items that span 100% width.
<FlexBox width="100%">
<items>
<Button press="onButtonLeftPress" text="{LayoutModel>/left}" width="100%" type="Emphasized" >
<layoutData>
<FlexItemData growFactor="{LayoutModel>/left}" />
</layoutData>
</Button>
<Button press="onButtonRightPress" text="{LayoutModel>/right}" width="100%" type="Reject">
<layoutData>
<FlexItemData growFactor="{LayoutModel>/right}" />
</layoutData>
</Button>
</items>
</FlexBox>
The growFactor of the 2 FlexBox items are bound to a LayoutModel that is initialized in index.html
var layoutModel = new sap.ui.model.json.JSONModel();
layoutModel.setData({
left: 2,
right: 1
});
ui5Core.setModel(layoutModel, "LayoutModel");
By pressing the buttons I update the model properties "left" and "right". The values are updated as you can see but the style for the items is not updated.
I see that FlexBox is taking into consideration only at initialization the values, but if the value is changed the UI is not updated.
The main idea is that I'm trying to obtain a layout with 2-3 columns that collapse/expand.
Do you have any ideas how to obtain this? or how to solve this FlexBox bug?
Many thanks
You have to call invalidate() on the FlexBox instance inside your handler functions. This will make the FlexBox rerender and everything works as expected. Here is a "One-File" jsbin example: https://jsbin.com/pisadigene/edit?html,output
I did not check the code of the FlexBox but I guess that updating the GrowFactor of a FlexBox item does not trigger a change (i.e. rerendering). I guess it’s just a one-time thing...
However, you should be aware that using invalidate() will trigger a re-rendering for all content inside the FlexBox. So that is not a good idea in case you have a lot of content inside the FlexBox because it can have a negative effect on performance… I am not very sure what you try to achieve but using flexboxes for a complete layout of the app might not be a good idea. Instead you should check the other opportunities you have with SAPUI5, i.e. MatrixLayout etc.